Zahlungen mit dem Express Checkout Element annehmen

Verwenden Sie eine einzige Integration, um Zahlungen über die Zahlungsschaltflächen mit einem Klick anzunehmen.

Das Express Checkout Element bietet Ihnen einen zentrale Integration, mit der Sie Zahlungen über Schaltflächen mit nur einem Klick annehmen können, einschließlich Link, PayPal, Apple Pay, Google Pay und Amazon Pay.

Kundinnen/Kunden sehen unterschiedliche Zahlungsschaltflächen, je nachdem, welche Kombination von Gerät und Browser unterstützt wird. Kompatible Geräte unterstützen Google Pay und Link automatisch. Die Unterstützung von Apple Pay und PayPal erfordert zusätzliche Schritte.

Klarna on the Express Checkout Element

Klarna on the Express Checkout Element is currently in private preview with limited availability. Reach out here to request access.

Option	Beschreibung
Land der Händlerin/des Händlers	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

Wir empfehlen Ihnen, bei Verwendung des Express Checkout Element Zahlungsdetails zu erfassen, bevor ein Intent erstellt wird. Wenn Sie zuvor das Payment Element integriert haben, müssen Sie möglicherweise Ihre Integration auf diese bessere Option aktualisieren.

Bevor Sie loslegen

Ihrem Browser eine Zahlungsmethode hinzufügen. Beispiel: Sie können Ihrem Google Pay-Konto bzw. Ihrer Wallet für Safari eine Karte hinzufügen.
Ihre Anwendung über HTTPS bereitstellen. Dies ist eine Voraussetzung sowohl in der Entwicklung als auch in der Produktion. Sie können einen Dienst wie ngrok verwenden.
Registrieren Sie Ihre Domain sowohl in einer Sandbox als auch im Live-Modus.
Erstellen Sie ein PayPal Sandbox-Konto, um Ihre Integration zu testen.

Stripe einrichten
Serverseitig

Erstellen Sie zunächst ein Stripe-Konto oder melden Sie sich an.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

Zahlungsmethoden aktivieren

In der Standardeinstellung verwendet Stripe Ihre Zahlungsmethodeneinstellungen, um festzustellen, welche Zahlungsmethoden im Express Checkout-Element aktiviert sind.

Um manuell zu überschreiben, welche Zahlungsmethoden aktiviert sind, listen Sie alle auf, die Sie mit dem Attribut payment_method_types aktivieren möchten.

Wenn Sie Zahlungen einziehen, bevor Sie einen Intent erstellen, listen Sie Zahlungsmethoden im Attribut paymentMethodTypes der Optionen Ihres Element-Anbieters auf.
Wenn Sie vor dem Rendern von Elementen einen Intent erstellen, listen Sie Zahlungsmethoden im Attribut payment_method_types Ihres Intents auf.

Unterstützte Zahlungsmethoden

Apple Pay und Google Pay sind automatisch aktiviert, wenn der Zahlungsmethodetyp card verwendet wird. Wenn Sie Link verwenden, müssen Sie auch den Zahlungsmethodentyp card übergeben.

Name der Zahlungsmethode	Parameter für die Zahlungsmethoden-API
Apple Pay	`card`
Google Pay	`card`
Link	`link, card`
PayPal	`paypal`
Amazon Pay	`amazon_pay`

Stripe Elements
Clientseitig

Das Express Checkout Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es dem head Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Erstellen Sie dann eine Instanz von Elements mit dem Modus (Zahlung, Einrichtung oder Abonnement), dem Betrag und der Währung. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen und Kunden angezeigt werden sollen. Weitere konfigurierbare Elements-Optionen finden Sie im nächsten Schritt.

checkout.js
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);

OptionalAdditional Elements options
Client-seitig

Erstellen und verbinden Sie das Express Bezahlvorgang Element
Clientseitig

Das Express Checkout Element enthält einen iFrame, der die Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss außerdem mit https:// und nicht mit http:// beginnen, damit Ihre Integration funktioniert.

Das Express Checkout Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular.

checkout.html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>

Wenn das Formular geladen wurde, erstellen Sie eine Instanz des Express Checkout Element und verbinden es mit dem Container DOM-Knoten.

checkout.js
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');

Kundendaten erfassen und Einzelposten anzeigen
Clientseitig

Übergeben Sie Optionen beim Erstellen des Express Checkout Element.

Informationen zur zahlenden Person erfassen

Legen Sie emailRequired: true fest, um die E-Mail-Adressen zu erfassen, und phoneNumberRequired: true, um die Telefonnummern zu erfassen. billingAddressRequired ist standardmäßig true.

checkout.js
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});

Bei Verwendung von PayPal mit dem Express Checkout Element empfängt und gibt Stripe üblicherweise nur das Land der Rechnungsadresse an. Aufgrund der Art und Weise, wie PayPal Informationen mit Zahlungsabwicklern von Drittanbietern teilt, werden in der Nutzlast des Bestätigungsereignisses die Felder billingDetails[address] möglicherweise als leere Zeichenfolgen angezeigt (mit Ausnahme des Länderfelds).

Versandinformationen erfassen

Legen Sie shippingAddressRequired: true fest und übergeben Sie ein Array von shippingRates.

checkout.js
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});

Überwachen Sie das Ereignis shippingaddresschange, um zu erkennen, wann Kundinnen/Kunden eine Versandadresse auswählen. Sie müssen entweder resolve oder reject aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

checkout.js
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Überwachen Sie das Ereignis shippingratechange event, um zu erkennen, wann eine Kundin/ein Kunde eine Versandrate auswählt. Sie müssen entweder resolve oder reject aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

checkout.js
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});

Überwachen Sie das cancel-Ereignis , um zu erkennen, wenn Kundinnen/Kunden die Zahlungsoberfläche schließen. Setzen Sie den Betrag auf den ursprünglichen Betrag zurück.

checkout.js
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});

Einzelposten anzeigen

Übergeben Sie ein Array von lineItems:

checkout.js
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});

Apple Pay-Schnittstelle konfigurieren

So konfigurieren Sie die Apple Pay-Schnittstelle.

Vom Händler initiierte Transaktionen (MIT)

Sie können wiederkehrende Zahlungen, zurückgestellte Zahlungen oder automatische Neuzahlungen einrichten, wenn Nutzer/innen den Kauf mit Apple Pay abschließen. Hierfür fordern Sie im click-Ereignis des Express Checkout Element den entsprechenden Händler-Token-Typ an. Wir empfehlen die Implementierung von Apple Pay-Händler-Token, um die neuesten Richtlinien von Apple Pay einzuhalten und Ihre Integration zukunftssicher zu machen.

OptionalÜberwachen Sie das Ereignis „Ready“
Clientseitig

OptionalLegen Sie fest, wann Zahlungsschaltflächen angezeigt werden sollen
Clientseitig

OptionalSchaltfläche anpassen
Clientseitig

OptionalConfirmationToken erstellen
Clientseitig

Erstellen Sie ein PaymentIntent
Serverseitig

Das PaymentIntent-Objekt von Stripe repräsentiert Ihre Absicht, Zahlungen einzuziehen, und dokumentiert Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang.

Erstellen Sie einen PaymentIntent mit einem Betrag und einer Währung auf Ihrem Server. Dies muss mit den Angaben übereinstimmen, die Sie für die Instanz stripe.elements in Schritt 3 festgelegt haben. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, wie viel Sie berechnen möchten, und nicht auf dem Client. So wird verhindert, dass böswillige Kunden und Kundinnen ihre eigenen Preise festlegen.

Der zurückgegebene PaymentIntent enthält ein Client-Geheimnis, das clientseitig verwendet wird, um den Zahlungsvorgang sicher abzuschließen, ohne das gesamte PaymentIntent-Objekt zu übergeben. Es gibt verschiedene Möglichkeiten, das Client-Geheimnis an den Client zu übergeben.

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit den Angaben aus dem Express Checkout Element abzuschließen.

Notiz

Für Amazon Pay und PayPal muss der Betrag, den Sie im PaymentIntent bestätigen, mit dem Betrag übereinstimmen, den der Käufer/die Käuferin vorab autorisiert hat. Stimmen die Beträge nicht überein, wird die Zahlung abgelehnt.

Geben Sie eine return_url für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Website weitergeleitet, bevor sie zur return_url weitergeleitet werden. Payments leitet bei erfolgreicher Zahlung sofort zur return_url weiter.

Wenn Sie nach Zahlungsabschluss keine Weiterleitung wünschen, legen Sie redirect auf if_required fest. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

checkout.js
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

Integration testen

Testen Sie die Integration der einzelnen Zahlungsmethoden, bevor Sie live gehen. Informationen zur Kompatibilität der Browser mit einer Zahlungsmethode finden Sie unter unterstützte Browser. Wenn Sie das Express Checkout Element in einem iFrame verwenden, muss das allow-Attribut des iFrame auf payment * gesetzt werden.

Vorsicht

Don’t store real user data in sandbox Link accounts. Treat them as if they’re publicly available, because these test accounts are associated with your publishable key.

Derzeit funktioniert Link nur mit Kreditkarten, Debitkarten und qualifizierten Käufen über US-Bankkonten. Link erfordert eine Domain-Registrierung.

You can create sandbox accounts for Link using any valid email address. The following table shows the fixed one-time passcode values that Stripe accepts for authenticating sandbox accounts:

Wert	Ergebnis
Alle anderen 6 Ziffern, die unten nicht aufgeführt sind	Erfolgreich
000001	Fehler, Code ungültig
000002	Fehler, Code abgelaufen
000003	Fehler, maximale Anzahl an Versuchen überschritten

OptionalExpress Checkout Element mit Stripe Connect verwenden

Stripe Ihren Kundinnen/Kunden anzeigen

Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem Datenschutzcenter.

Zahlungen mit dem Express Checkout Element annehmen

Verwenden Sie eine einzige Integration, um Zahlungen über die Zahlungsschaltflächen mit einem Klick anzunehmen.

Klarna on the Express Checkout Element

Bevor Sie loslegen

Stripe einrichtenServerseitig

Zahlungsmethoden aktivieren

Unterstützte Zahlungsmethoden

Stripe ElementsClientseitig

OptionalAdditional Elements optionsClient-seitig

Erstellen und verbinden Sie das Express Bezahlvorgang ElementClientseitig

Kundendaten erfassen und Einzelposten anzeigenClientseitig