SS2019: Technologierecherche – E – Commerce

Intro

E-Commerce wird als Electronic Commerce bezeichnet, was übersetzt nichts anderes als elektronischer Handel heisst. Der elektronische Handel findet im Internet (www) statt, wobei hier nicht zwischen dem klassischen oder mobilen Internet differenziert wird.
E-Commerce ist der elektronische Handel, der vom Rechner, Smartphone oder Tablet getätigt wird und darüber hinaus nicht nur den Verkaufsprozess als solches meint, sondern eben auch die Dinge, die dazu gehören – wie Service, Zahlungsprozess, etc. Grundsätzlich differenziert man im E-Commerce zwischen dem B2C (Business-to-Customer) und B2B Business (Business-to-Business), da teilweise unterschiedliche Anforderungen an die unterschiedlichen Zielgruppen bestehen.

Ziele

• Neue Regionale Kunden zu erreichen.
• Die Kosten für die Kundenbetreuung zu senken. (Einige Komponenten der digitalen Erfahrung - wie Entdeckung, Bewertung und Unterstützung - können kostengünstiger sein und bessere Ergebnisse liefern als herkömmliche Bereitstellungsmechanismen.)
• Ein differenziertes Customer Experience zu schaffen, um Marktanteile zu gewinnen.

User Experience Hierarchy of Needs

User shopping behavior diagram

Die wichtigsten Teile von UX für den E-Commerce

• The First Impression
• Collections of Filterable Items with Product Selection Tools
• Having a System in Place to Bring Users Back (E-Mail-Marketing-Software / Neue Angebote / Verkauf mit Countdown-Timer / Kostenloser Versand für eine bestimmte Menge an gekauften Produkten)
• Showing Credibility and Customer Satisfaction (Bewertungen und Überprüfungen)
• Offering Quick Customer Service Tabs
• FastSingin/login Process
• A Pleasant User Experience after Purchasing Has Been Made
• Clear, Beautiful Images with Quick Loading

Zahlungsdienstleistungen

Welches Payment Gateway sollten wir nutzen?

Sowohl Stripe (gegründet 2011) als auch PayPal (gegründet 1998) sind Payment Gateways und fungieren als Vermittler zwischen Händlern und den entsprechenden Kreditkartennetzwerken bzw. Finanzinstituten, um Zahlungen zu autorisieren und zu akzeptieren. ** Ein Payment Gateway ist nicht die einzige Lösung für die Annahme von Online-Zahlungen, aber es ist eine der einfacheren Optionen

Paypal Mikro-Payment Gebühren 🥇

• $1.00: 5% von 1$ = 5¢ und 5¢ + 5¢ = 10¢
• $5.00: 5% von 5$ = 25¢ und 25¢ +5¢ = 30¢

Stripe Mikro-Payment Gebühren

• $1.00: 2.9% von $1 = 2.9¢ und 2.9¢ + 30¢ = 32.9¢
• $5.00: 2.9% von $5 = 14.5¢ und 14.5¢ +30¢ = 44.5¢

• Standardgebühren

• PayPal’s aktuelle Gebühr beträgt 2.9% + 0.30 pro Transaktion.

• Stripe’s Gebührenordnung sieht ebenfalls 2,9% + 0.30 vor.

• PayPal berechnet 4,4% für Transaktionen, bei denen die Gelder von außerhalb der USA stammen

• Stripe ist bei den Gebühren etwas entgegenkommender und erhebt zusätzlich zu seiner festen Gebühr von ,30 nur insgesamt 3,9%.

Installation

Paypal :

• Vue JS Storefront PayPal Payment Extension : https://github.com/develodesign/vsf-payment-paypal

--

Stripe :

• React JS : https://github.com/stripe/react-stripe-elements

First, install react-stripe-elements.

Install with yarn:

yarn add react-stripe-elements

OR with npm:

npm install --save react-stripe-elements

OR using UMD build (exports a global ReactStripeElements object);

<script src="https://unpkg.com/react-stripe-elements@latest/dist/react-stripe-elements.min.js"></script>

Then, load Stripe.js in your application:

<script src="https://js.stripe.com/v3/"></script>

• Doc : https://stripe.com/docs/payments/checkout
• Stripe MS : https://github.com/seanrobenalt/stripe-microservice Microservice verwenden , um Stripe einfach in die App zu integrieren, ohne Stripe Checkout oder Elemente verwenden zu müssen.

Adyen :

npm install adyen Adyen Hosted Payment Pages (HPPs) Example for the HPP payment

// Init payment
var
  HPP = require('adyen').HPP;

  hppPayment = new HPP({
    test: true,                                     // optional: true for Adyen test environment

    HMACKey: 'YourHMAC_Key',                          

    // Required for the payment
    merchantReference: 'DummyPaymentID',            // optional (lib do this)
                                                    //    default: 'PAYMENT-YYYY-MM-DDThh:mm:ssTZD'
    paymentAmount: 100,                             // EUR 1,00 = 100
    currencyCode: 'EUR',                            // optional (lib do this), default: 'EUR'
    shipBeforeDate: 2014-01-25                      // 'YYYY-MM-DD'
    skinCode: 'YourSkinCode',                         
    merchantAccount: 'YourMerchantAccountName',       
    sessionValidity: 'YYYY-MM-DDThh:mm:ssZ',        // optional (lib do this), default: 24h

    // Optional for the payment
    recurringContract: 'RECURRING',                 // For recurring payments (see Adyen documentation)
    shopperLocale: 'nl_NL',                         // optional: 'en_US'
    orderData: 'XY 1 year subscription',            // optional
    merchantReturnData: '',                         // optional
    countryCode: 'NL',                              // optional
    shopperEmail: '[email protected]',                  // optional
    shopperReference: 'shopperID'                   // optional
    // allowedMethods                               // optional: check the Adyen documentation
    // blockedMethods                               // optional: check the Adyen documentation
    // offset                                       // optional: check the Adyen documentation
    // offerEmail                                   // optional: check the Adyen documentation
    // shopperStatement: ''                         // optional
    
    // if skipSelection is enabled the user will not be asked for a payment method but directly comes
    // to the payment page for the method specified by brandCode (e.g. paypal)
    // brandCode                                    // optional
    // skipSelection                                // optional
    
    // for redirecting the user to your custom page instead of the adyen confirmation page
    // resURL                                       // optional
  });
  


// Get URL to the payment window
hppPayment.generateRequest(function (err, url, paymentdata) {
  if (err) {
    return console.error(err);
  }

  console.log(paymentData);
  console.log(url);
});

• Vue JS : https://github.com/sdurighello/team5-adyen-vue
• Doc : https://docs.adyen.com/developers

Sollte dieser Prozess ein Microservice sein?

• Multiple Rates of Change
• Independent Life Cycles
• Independent Scalability
• Isolated Failure
• The Freedom to Choose the Right Tech

GraphQL - Braintree Payments

{"payments": [{
        "id": "5c116dced8c10900155a4a1c",
        "amount": "1.20",
        "status": "approved",
        "customer": {
          "id": "5c116dced8c10900155a4a19",
          "email": "[email protected]"
        },
        "card": {
          "id": "5c116dced8c10900155a4a1b",
          "brand": "visa",
          "last4": "1111"
        }
      }
    ]}

Fragen

Welche Elemente der Kaufreise werden digital ermöglicht?
Wie und welche können wir Payment Gateway in die Website integrieren?
Was ist besser für eine E-Commerce-Website: Cloud Hosting oder Web-hosting?