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 ist eine Integration zum Akzeptieren von Zahlungen über Schaltflächen für Zahlungen mit einem Klick. Zu den unterstützten Zahlungsmethoden gehören Link, Apple Pay, Google Pay, PayPal, Klarna und Amazon Pay.

Den Kund/innen werden je nach Gerät und Browser unterschiedliche Zahlungsschaltflächen angezeigt. Kompatible Geräte unterstützen automatisch Google Pay und Link. Sie müssen zusätzliche Schritte ausführen, um Apple Pay und PayPal zu unterstützen.

Demoversion testen

In der folgenden Demo können Sie einige der vorgefertigten Optionen ein- und ausschalten, um die Hintergrundfarbe, das Layout, die Größe und die Versandadressenerfassung der Zahlungsoberfläche zu ändern. Die Demo zeigt Google Pay und Apple Pay nur auf den jeweils verfügbaren Plattformen an. Schaltflächen für Zahlungsmethoden werden nur in den unterstützten Ländern angezeigt.

Wenn Sie die Demo nicht sehen, versuchen Sie, diese Seite in einem unterstützten Browser anzuzeigen.

Option	Beschreibung
Land der Händlerin/des Händlers	Legen Sie dies mit dem veröffentlichbaren Schlüssel fest, den Sie zum Initialisieren von Stripe.js verwenden. Um das Land zu ändern, müssen Sie die Bereitstellung des Express Checkout Element aufheben, den veröffentlichbaren Schlüssel aktualisieren und dann das Express Checkout Element erneut verbinden.
Hintergrundfarbe	Legen Sie Farben mit der Elements Appearance API fest. Schaltflächendesigns werden von der Appearance API übernommen, aber Sie können sie auch direkt definieren, wenn Sie das Element erstellen.
Desktop- und Mobilgröße	Verwenden Sie das Dropdown-Menü, um die maximale Pixelbreite des übergeordneten Elements festzulegen, mit dem das Express Checkout Element verbunden ist. Sie können es auf 750px (Desktop) oder 320px (Mobil) festlegen.
Max. Anzahl Spalten und Zeilen	Legen Sie diese Werte mit dem Parameter Layout fest, wenn Sie das Express Checkout Element erstellen.
Überlaufmenü	Legen Sie dies mit dem Parameter Layout fest, wenn Sie das Express Checkout Element erstellen.
Versandadresse erfassen	Um Versanddaten zu erfassen, müssen Sie beim Erstellen des Express Checkout-Element Optionen übergeben. Erfahren Sie mehr über die Erfassung von Kundendaten und die Anzeige von Einzelposten.

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.

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`
Klarna	`klarna`

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/clover/stripe.js"></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);

OptionalOptionen für zusätzliche Elemente
Client-seitig

Das Elements-Objekt akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Express Checkout Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die Unterstützung von Zahlungsmethoden.

Eigentum	Typ	Beschreibung	Erforderlich
`mode`	`payment` `setup` `subscription`	Gibt an, ob das Express Checkout Element mit einem PaymentIntent, SetupIntent oder Abonnement verwendet wird.	Ja
`currency`	`string`	Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll.	Ja
`amount`	`number`	Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen.	Für den Modus `payment` und `subscription`
`setupFutureUsage`	`off_session` `on_session`	Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Express Checkout Element erfassten Zahlungsdaten zu tätigen. Wird nicht unterstützt von Klarna mit dem Express Checkout Element.	Nein
`captureMethod`	`automatic` `automatic_async` `manual`	Steuert, wann die Gelder vom Kundenkonto erfasst werden.	Nein
`onBehalfOf`	`string`	Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter Use cases.	Nein
`paymentMethodTypes`	`string[]`	Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im Stripe-Dashboard zu verwalten.	Nein
`paymentMethodConfiguration`	`string`	Die Konfiguration der Zahlungsmethode, die bei der Verwaltung Ihrer Zahlungsmethoden im Stripe-Dashboard verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet.	Nein
`paymentMethodCreation`	`manual`	Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit stripe.createPaymentMethod.	Nein
`paymentMethodOptions`	`{us_bank_account: {verification_method: string}}`	Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie Payment Intents.	Nein
`paymentMethodOptions`	`{card: {installments: {enabled: boolean}}}`	Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im Stripe-Dashboard verwalten. Sie müssen `mode='payment'` festlegen und `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`.	Nein

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

Setzen Sie emailRequired: wahr, um E-Mail-Adressen zu erfassen und phoneNumberRequired: wahr, um Telefonnummern zu erfassen.

Die Standardeinstellung für billingAddressRequired hängt von Ihrer Integration ab:

Wenn Sie beim Erstellen des Express Checkout Elements allowedShippingCountries, phoneNumberRequired, shippingAddressRequired, emailRequired, applePay, LineItems oder Unternehmen übergeben, ist billingAddressRequired standardmäßig „falsch“.
Andernfalls ist billingAddressRequired standardmäßig auf „wahr“ gesetzt.

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

PayPal-Kundeninformationen

PayPal gibt normalerweise weder die Rechnungsadresse (mit Ausnahme des Landes) noch die Telefonnummer der Kundin/des Kunden an. Wenn sie nicht angegeben werden, enthält das „confirm“-Ereignis leere Zeichenfolgen für diese Eigenschaften. Wenn Sie die Rechnungsadresse oder Telefonnummer des Kunden/der Kundin benötigen, zeigt das Express Checkout Element die PayPal-Schaltfläche nur an, wenn diese Informationen verfügbar sind.

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.

Hinweis

Um den Datenschutz zu wahren, anonymisieren Browser möglicherweise die Versandadresse, indem sensible Informationen entfernt werden, die zur Berechnung der Versandkosten nicht erforderlich sind. Je nach Land können einige Felder fehlen oder teilweise geschwärzt sein. Beispielsweise darf die Versandadresse in den USA nur eine Stadt, ein Bundesland und eine Postleitzahl enthalten. Die vollständige Versandadresse wird im Objekt Bestätigungsereignis angezeigt, nachdem der Kauf in der Zahlungsschnittstelle des Browsers bestätigt wurde.

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

Nach der Bereitstellung zeigt das Express Checkout Element für kurze Zeit keine Schaltflächen an. Um das Element zu animieren, wenn Schaltflächen angezeigt werden, überwachen Sie das Ereignis „Ready“. Prüfen Sie den Wert von availablePaymentMethods, um zu bestimmen, welche Schaltflächen gegebenenfalls im Express Checkout Element angezeigt werden.

checkout.js
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});

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

Sie können die im Express Checkout Element angezeigten Zahlungsmethoden auf verschiedene Arten verwalten:

In den Zahlungsmethodeneinstellungen des Stripe-Dashboards.
Durch Verwenden der Eigenschaft paymentMethods, um die Zahlungsschaltflächen zu deaktivieren. Mit dieser Eigenschaft können Sie besser steuern, was Ihre Kundinnen/Kunden sehen.

Das Express Checkout Element zeigt Apple Pay oder Google Pay an, wenn der Kunde/die Kundin sich auf einer unterstützten Plattform befindet und über eine aktive Karte verfügt. Wenn Sie Apple Pay und Google Pay immer anzeigen möchten, auch wenn der Kunde/die Kundin keine aktive Karte hat, können Sie dies auch mit paymentMethods konfigurieren.

OptionalSchaltfläche anpassen
Clientseitig

Sie können jede Schaltfläche für Zahlungsmethoden individuell anpassen. Sehen Sie sich die Beispiele und Ressourcen der einzelnen Schaltflächendesigns und -typen für Google Pay und Apple Pay an. Sie können auch die Variable borderRadius in der Appearance API verwenden:

checkout.js
const appearance = {
  variables: {
    // This controls the border-radius of the rendered Express Checkout Element
    borderRadius: '4px',
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

elements.create('expressCheckout', {
  // Specify a type per payment method
  // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});

OptionalConfirmationToken erstellen
Clientseitig

Wenn der/die Kund/in eine Zahlung autorisiert, können Sie einen ConfirmationToken erstellen, der zur zusätzlichen Validierung oder Geschäftslogik vor der Bestätigung an Ihren Server gesendet wird. Sie müssen den erstellten ConfirmationToken sofort verwenden, um einen PaymentIntent oder SetupIntent zu bestätigen.

checkout-confirmation.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 a ConfirmationToken using the details collected by the Express Checkout Element
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
        }
      },
      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);
    return;
  }

  // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: confirmationToken.id
  });
  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent
  const {error: confirmError} = await stripe.confirmPayment({
    clientSecret,
    confirmParams: {
      confirmation_token: confirmationToken.id
    },
  });

  if (confirmError) {
    // 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(confirmError);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});

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.

Hinweis

Für Amazon Pay, Klarna 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

Speichern Sie keine echten Nutzerdaten in Link-Konten der Sandbox. Behandeln Sie sie so, als seien sie öffentlich verfügbar, da diese Testkonten an Ihren veröffentlichbaren Schlüssel gebunden sind.

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

Sie können Sandbox-Konten für Link mit jeder gültigen E-Mail-Adresse erstellen. Die folgende Tabelle zeigt die festen einmaligen Passcode-Werte, die Stripe für die Authentifizierung von Sandbox-Konten akzeptiert:

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

Connect-Plattformen, die für das verbundene Konto entweder Direct Charges erstellen oder das Token einem Customer hinzufügen, müssen zusätzliche Schritte durchführen.

Bevor Sie das ExpressCheckoutElementin Ihrem Frontend erstellen, legen Sie die Option stripeAccount für die Stripe-Instanz fest:

const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  apiVersion: "2025-11-17.clover",
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'
,
});

Registrieren Sie alle Domains, auf denen Sie das Express Checkout Element anzeigen möchten.

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.

Demoversion testen

Bevor Sie loslegen

Stripe einrichtenServerseitig

Zahlungsmethoden aktivieren

Unterstützte Zahlungsmethoden

Stripe ElementsClientseitig

OptionalOptionen für zusätzliche ElementeClient-seitig

Erstellen und verbinden Sie das Express Bezahlvorgang ElementClientseitig

Kundendaten erfassen und Einzelposten anzeigenClientseitig

Informationen zur zahlenden Person erfassen

PayPal-Kundeninformationen

Versandinformationen erfassen

Hinweis

Einzelposten anzeigen

Apple Pay-Schnittstelle konfigurieren

Vom Händler initiierte Transaktionen (MIT)

OptionalÜberwachen Sie das Ereignis „Ready“Clientseitig

OptionalLegen Sie fest, wann Zahlungsschaltflächen angezeigt werden sollenClientseitig

OptionalSchaltfläche anpassenClientseitig

OptionalConfirmationToken erstellenClientseitig

Erstellen Sie ein PaymentIntentServerseitig

Zahlung an Stripe sendenClientseitig

Hinweis

Integration testen

Vorsicht

OptionalExpress Checkout Element mit Stripe Connect verwenden

Stripe Ihren Kundinnen/Kunden anzeigen

Siehe auch

Stripe einrichten
Serverseitig

Stripe Elements
Clientseitig

OptionalOptionen für zusätzliche Elemente
Client-seitig

Erstellen und verbinden Sie das Express Bezahlvorgang Element
Clientseitig

Kundendaten erfassen und Einzelposten anzeigen
Clientseitig

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

Zahlung an Stripe senden
Clientseitig