Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Andere Stripe-Produkte

Zahlungen mit dem Express Checkout Element annehmen

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

Seite kopieren

The Express Checkout Element is an integration for accepting payments through one-click payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and 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.

OptionBeschreibung
Land der Händlerin/des HändlersSet 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 colorSet 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 sizeUse 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 rowsSet these values using the layout parameter when you Create the Express Checkout Element.
Overflow menuSet this using the layout parameter when you Create the Express Checkout Element.
Collect shipping addressTo 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:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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.

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 ZahlungsmethodeParameter für die Zahlungsmethoden-API
Apple Paycard
Google Paycard
Linklink, card
PayPalpaypal
Amazon Payamazon_pay
Klarnaklarna

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);

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.

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.

main.rb
require 'stripe'
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    amount: 1099,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end

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, 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

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:

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

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.

Siehe auch

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc