Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case finden
Zahlungsmethoden
Payment interfaces
Payment scenarios
Persönliche Zahlungen
Other Stripe products

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.

Beta

Klarna on the Express Checkout Element is launching a limited beta in mid October. Reach out here to gain access.

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 und verifizieren Sie Ihre Domain im Test-Modus und 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

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 eine Instanz von Stripe mit dem folgenden JavaScript auf Ihrer Bezahlseite:

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

Handhaben Sie das Klickereignis, um Optionen an das Express Checkout Element zu übergeben. Deaktivieren Sie die Interaktion auf Ihrer Checkout-Seite, nachdem Sie das Klickereignis erhalten haben.

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
expressCheckoutElement.on('click', (event) => {
  const options = {
    emailRequired: true,
    phoneNumberRequired: true
  };
  event.resolve(options);
});

When using PayPal with the Express Checkout Element, Stripe typically only receives and exposes the country from the billing address. Because of how PayPal shares information with third-party payment processors, the confirm event payload might show billingDetails[address] fields as empty strings, except for the country field.

Versandinformationen erfassen

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

checkout.js
expressCheckoutElement.on('click', (event) => {
  const options = {
    shippingAddressRequired: true,
    allowedShippingCountries: ['US'],
    shippingRates: [
      {
        id: 'free-shipping',
        displayName: 'Free shipping',
        amount: 0,
        deliveryEstimate: {
         maximum: {unit: 'day', value: 7},
         minimum: {unit: 'day', value: 5}
        }
      },
    ]
  };
  event.resolve(options);
});

Ü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
expressCheckoutElement.on('click', (event) => {
  const options = {
    lineItems: [
      {
        name: 'Sample item',
        amount: 1000
      },
      {
        name: 'Tax',
        amount: 100
      },
      {
        name: 'Shipping cost',
        amount: 1000
      }
    ]
  };
  event.resolve(options);
});

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_4eC39HqLyjWDarjtT1zdp7dc'


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 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 im Test-Modus keine echten Benutzerdaten für Link-Konten. 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 Test-Modus-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 Konten im Test-Modus akzeptiert:

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

Disclose Stripe to your customers

Stripe collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Stripe to use data in these ways. For more information, visit our privacy center.

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 unseren Produkt-Changelog an.
Fragen? Sales-Team kontaktieren.
Unterstützt von Markdoc