Zahlungsdetails einziehen, bevor Sie einen Intent erstellen

Sie können das Layout des Payment Element (Akkordeon oder Registerkarten) an Ihre Checkout-Nutzeroberfläche anpassen. Weitere Informationen zu den einzelnen Eigenschaften finden Sie unter elements.create.

const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: true,
    spacedAccordionItems: false
  }
});

Das folgende Bild zeigt dasselbe Payment Element, das mit unterschiedlichen Layout-Konfigurationen gerendert wurde.

Layouts für Payment Element

Nachdem Sie das Payment Element zu Ihrer Seite hinzugefügt haben, können Sie das Erscheinungsbild an Ihr Design anpassen. Weitere Informationen zum Anpassen des Payment Element finden Sie unter Elements Appearance API.

Payment Element anpassen

Sie können das Payment Element so konfigurieren, dass die Zahlungsmethoden Ihrer Kundinnen und Kunden für die zukünftige Verwendung gespeichert werden. In diesem Abschnitt erfahren Sie, wie Sie die neue Funktion für gespeicherte Zahlungsmethoden integrieren, mit der das Payment Element Folgendes tun kann:

• Käufer/innen um Zustimmung zur Speicherung einer Zahlungsmethode bitten
• Zahlungsmethoden speichern, wenn Käufer/innen zustimmen
• Gespeicherte Zahlungsmethoden für zukünftige Käufe anzeigen
• Aktualisieren Sie verlorene oder abgelaufene Karten automatisch, wenn Käufer/innen sie ersetzen

Zahlungsmethoden speichern.

Verwenden Sie eine zuvor gespeicherte Zahlungsmethode erneut.

Speichern der Zahlungsmethode im Payment Element aktivieren

Erstellen Sie eine CustomerSession auf Ihrem Server, geben die Kunden-ID an und aktiveren die payment_element-Komponente für Ihre Sitzung. Konfigurieren Sie, welche Funktionen der gespeicherten Zahlungsmethode Sie aktivieren möchten. Durch Aktivieren von payment_method_save wird beispielsweise ein Kontrollkästchen angezeigt, über das Kundinnen und Kunden ihre Zahlungsdetails für die zukünftige Nutzung speichern können.

Sie können setup_future_usage für einen PaymentIntent oder eine Checkout-Sitzung angeben, um das Standardverhalten zum Speichern von Zahlungsmethoden außer Kraft zu setzen. Dadurch wird sichergestellt, dass die Zahlungsmethode automatisch für die zukünftige Verwendung gespeichert wird, auch wenn der Kunde/die Kundin sie nicht explizit speichert.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'

post '/create-customer-session' do
  customer_session = Stripe::CustomerSession.create({
    customer: 
{{CUSTOMER_ID}},
    components: {
        payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
      },
  })
  {
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end

Ihre Elements-Instanz verwendet das Client-Geheimnis der CustomerSession, um auf die gespeicherten Zahlungsmethoden dieses Kunden/dieser Kundin zuzugreifen. Umgang mit Fehlern, wenn Sie die CustomerSession korrekt erstellen. Wenn ein Fehler auftritt, müssen Sie das Client-Geheimnis der CustomerSession nicht für die Elements-Instanz bereitstellen, da dies optional ist.

Erstellen Sie die Elements-Instanz mit dem Client-Geheimnis der CustomerSession. Verwenden Sie dann die Elements-Instanz, um ein Payment Element zu erstellen.

// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Bei der Bestätigung der PaymentIntent steuert Stripe.js automatisch die Einstellung setup_future_usage für den PaymentIntent und allow_redisplay für die PaymentMethod, je nachdem, ob die Kundin/der Kunde das Kontrollkästchen aktiviert hat, um die Zahlungsdetails zu speichern.

Erneute Erfassung der CVC erzwingen

Wenn Sie PaymentIntents verwenden, geben Sie optional require_cvc_recollection an, sowohl beim Erstellen des PaymentIntent als auch beim Erstellen von Elements. Dadruch müssen Kundinnen und Kunden ihre Prüfziffer/CVC zwingend erneut eingeben, wenn sie eine Kartenzahlung tätigen.

Auswahl einer gespeicherten Zahlungsmethode erkennen

Um dynamische Inhalte zu steuern, wenn eine gespeicherte Zahlungsmethode ausgewählt wird, überwachen Sie das change-Ereignis des Payment Element, das automatisch mit der ausgewählten Zahlungsmethode ausgefüllt wird.

paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})

Wenn der/die Kund/in Aktionen durchführt, die die Zahlungsdetails ändern (zum Beispiel das Anwenden eines Rabattcodes), aktualisieren Sie die Elements-Instanz, um die neuen Werte widerzuspiegeln. Bei einigen Zahlungsmethoden, wie Apple Pay und Google Pay, wird der Betrag in der Nutzeroberfläche angezeigt. Stellen Sie daher sicher, dass er immer korrekt und aktuell ist.

async function handleDiscountCode(code) {
  // On the server, validate that the discount code is valid and return the new amount
  const {newAmount} = await fetch("/apply-discount", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify({code}),
    });
  elements.update({amount: newAmount});
}

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

Wenn Sie einen mehrseitigen Bezahlvorgang erstellen oder Angaben zur Zahlungsmethode erfassen möchten, bevor Sie zusätzliche Validierungen durchführen, lesen Sie Zwei-Schritte-Bezahlvorgang erstellen. Bei diesem Ablauf erstellen Sie ein ConfirmationToken auf dem Client, um Zahlungsdetails zu erfassen, und verwenden diese dann zum Erstellen eines PaymentIntent auf dem Server.

Stripe übermittelt ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen Webhook oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den Unterschieden zwischen allen unterstützten Zahlungsmethoden.

• Manuelles Bearbeiten von Ereignissen im Dashboard

  Verwenden Sie das Dashboard, um Ihre Testzahlungen im Dashboard anzuzeigen, E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

• Erstellen eines benutzerdefinierten Webhooks

  Erstellen Sie einen benutzerdefinierten Webhook-Handler, um auf Ereignisse zu hören und eigene asynchrone Zahlungsabläufe zu implementieren. Testen und debuggen Sie Ihre Webhook-Integration lokal mit der Stripe CLI.

• Integrieren einer vorgefertigten App

  Bearbeiten Sie häufige Unternehmensereignisse, wie z. B.Automatisierung oderMarketing und Vertrieb, indem Sie eine Partneranwendung integrieren.