Zahlung annehmen

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

Wenn Sie einen PaymentIntent auf Ihrem Server erstellen, erstellen Sie auch eine CustomerSession, geben die Kunden-ID an und aktivieren 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-intent-and-customer-session' do
  intent = Stripe::PaymentIntent.create({
    amount: 1099,
    currency: 'usd',
    # 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},
    customer: 
{{CUSTOMER_ID}},
  })
  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',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    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 den Client-Geheimnissen sowohl für den PaymentIntent als auch für die CustomerSession. Verwenden Sie dann diese Elements-Instanz, um ein Payment Element zu erstellen.

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

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

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',
  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

Geben Sie optional require_cvc_recollection beim Erstellen der PaymentIntent an, um die erneute Erfassung der Prüfziffer/CVC zu erzwingen, wenn ein Kunde/eine Kundin mit einer Karte bezahlt.

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

Beschleunigen Sie den Bezahlvorgang Ihrer Kundinnen/Kunden, indem Sie Link im Payment Element verwenden. Sie können die Informationen für alle angemeldeten Kundinnen/Kunden, die Link bereits verwenden, automatisch ausfüllen, unabhängig davon, ob sie ihre Informationen ursprünglich in Link bei einem anderen Unternehmen gespeichert haben. Die standardmäßige Payment Element-Integration enthält eine Link-Aufforderung im Kartenformular. Um Link im Payment Element zu verwalten, gehen Sie zu Ihren Einstellungen für Zahlungsmethoden.

Erfassen Sie eine Kunden-E-Mail-Adresse für die Link-Authentifizierung oder Registrierung

Integrationsoptionen

Es gibt zwei Möglichkeiten, Link in das Payment Element zu integrieren. Stripe empfiehlt, eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben, falls verfügbar. Denken Sie daran, den Bezahlvorgang zu berücksichtigen, wenn Sie sich für eine der folgenden Optionen entscheiden:

Möglicherweise möchten Sie Attribute des PaymentIntent aktualisieren, nachdem das Payment Element gerendert wurde, z. B. den Betrag (z. B. für Rabattcodes oder Versandkosten). Auf Ihrem Server können Sie den PaymentIntent aktualisieren und dann elements.fetchUpdates aufrufen, um den neuen Betrag im Payment Element zu sehen. Dieses Beispiel zeigt Ihnen, wie Sie den Server-Endpoint erstellen, der den Betrag im PaymentIntent aktualisiert:

get '/update' do
  intent = Stripe::PaymentIntent.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end

Dieses Beispiel zeigt, wie die Nutzeroberfläche aktualisiert wird, um die Änderungen auf der Client-Seite zu berücksichtigen:

(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();

Das Payment Element unterstützt standardmäßig viele Zahlungsmethoden. Für die Aktivierung und Anzeige einiger Zahlungsmethoden sind zusätzliche Schritte erforderlich.

Affirm

Um Affirm verwenden zu können, müssen Sie es im Dashboard aktivieren. Wenn Sie einen PaymentIntent mit der Zahlungsmethode Affirm erstellen, müssen Sie eine Versandadresse angeben. In diesem Beispiel wird vorgeschlagen, die Versandinformationen an den Client weiterzugeben, nachdem der Kunde/die Kundin seine/ihre Zahlungsmethode ausgewählt hat. Erfahren Sie mehr über die Verwendung von Affirm mit Stripe.

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',
      shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US',
        },
      },

    },
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (e.g., payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Affirm testen

In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können:

Afterpay (Clearpay)

Wenn Sie einen PaymentIntent mit der Zahlungsmethode Afterpay erstellen, müssen Sie eine Versandadresse angeben. Erfahren Sie mehr über die Verwendung von Afterpay mit Stripe.

Sie können Zahlungsmethoden über das Dashboard verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden basierend auf Faktoren wie dem Betrag und der Währung der Transaktion und dem Zahlungsablauf. Im folgenden Beispiel wird das Attribut automatic_payment_methods verwendet. Sie können jedoch auch afterpay_clearpay mit Arten von Zahlungsmethoden auflisten. In der neuesten Version der API ist die Angabe des Parameters automatic_payment_methods optional, da Stripe seine Funktionalität standardmäßig aktiviert. Unabhängig von der gewählten Option müssen Sie unbedingt Afterpay Clearpay im Dashboard aktivieren.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]"=true \
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"=CA \
  -d "shipping[address][country]"=US \
  -d "shipping[address][postal_code]"=94111

Afterpay testen (Clearpay)

In der folgenden Tabelle erfahren Sie, wie Sie verschiedene Szenarien testen können:

Apple Pay und Google Pay

Wenn Sie Kartenzahlungen aktivieren, zeigen wir automatisch Apple Pay und Google Pay für Kundinnen und Kunden an, deren Umgebung die Bedingungen für die Anzeige von Wallets erfüllt. Um Zahlungen von diesen Wallets annehmen zu können, müssen Sie außerdem folgende Schritte ausführen:

• Aktivieren Sie sie in Ihren Zahlungsmethodeneinstellungen. Apple Pay ist standardmäßig aktiviert.
• Stellen Sie Ihre Anwendung über HTTPS in einer Entwicklungs- und Produktionsumgebung bereit.
• Registrieren Sie Ihre Domain.
• Rufen Sie Aktualisierungen vom Server ab, wenn Sie den Betrag eines PaymentIntent aktualisieren, um das Zahlungsmodal der Wallet zu synchronisieren.

Erfahren Sie mehr über die Verwendung von Apple Pay und Google Pay mit Stripe.

ACH Direct Debit

Wenn Sie das Payment Element mit der Zahlungsmethode ACH-Lastschriftverfahren verwenden, befolgen Sie diese Schritte:

1. Erstellen Sie ein Kundenobjekt.

   Command Line

   Sprache auswählen

   cURL

   Stripe CLI

   Ruby

   Python

   PHP

   Java

   Node.js

   Go

   .NET

   No results

   curl -X POST https://api.stripe.com/v1/customers \
     -u "
   sk_test_BQokikJOvBiI2HlWgH4olfQ2
   :"

2. Geben Sie beim Erstellen des PaymentIntent die Kunden-ID an.

   Command Line

   Sprache auswählen

   cURL

   Stripe CLI

   Ruby

   Python

   PHP

   Java

   Node.js

   Go

   .NET

   No results

   curl https://api.stripe.com/v1/payment_intents \
     -u "
   sk_test_BQokikJOvBiI2HlWgH4olfQ2
   :" \
     -d amount=1099 \
     -d currency=usd \
     -d setup_future_usage=off_session \
     -d customer={{CUSTOMER_ID}} \
     -d "payment_method_types[]"=us_bank_account

3. Wählen Sie eine Verifizierungsmethode.

Bei Verwendung der Zahlungsmethode ACH-Lastschrift mit dem Payment Element können Sie nur automatic oder instant auswählen.

Erfahren Sie mehr über die Verwendung des ACH-Lastschriftverfahrens mit Stripe.

ACH-Lastschriftverfahren testen

BLIK

Bei Verwendung des Payment Element mit BLIK können die Nutzer/innen das Modal schließen und sie auffordern, die Zahlung in ihrer Banking-App zu autorisieren. Dies löst eine Weiterleitung zu Ihrer return_url aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück. Erfahren Sie mehr über die Verwendung von BLIK mit Stripe.

Um das Schließen des Modals durch Nutzer/innen zu handhaben, prüfen Sie im serverseitigen Handler für Ihre return_url den status des Payment Intent, um zu sehen, ob er succeeded ist oder immer noch requires_action (d. h. der/die Nutzer/in hat das Modal ohne Autorisierung geschlossen). Verfahren Sie mit jedem Fall einzeln.

Zahlungsmethoden mit QR-Codes

Bei Verwendung des Payment Elements mit einer Zahlungsmethode, die auf einem QR-Code basiert (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), kann der/die Nutzer/in das QR-Code-Modal schließen. Dies löst eine Weiterleitung zu Ihrer return_url aus und der/die Nutzer/in kehrt nicht zur Bezahlseite zurück.

Um das Schließen von QR-Code-Modals durch Nutzer/innen zu handhaben, prüfen Sie am serverseitigen Handler für Ihre return_url den status der Payment Intent, um zu sehen, ob er succeeded ist oder immer noch requires_action (d. h. der/die Nutzer/in hat das Modal geschlossen, ohne zu bezahlen), wobei jeder Fall nach Bedarf behandelt wird.

Alternativ können Sie die automatische Weiterleitung zu Ihrer return_url verhindern, indem Sie den erweiterten optionalen Parameter redirect=if_required übergeben, der die Weiterleitung beim Schließen eines QR-Code-Modals verhindert.

Barzahlung per App

Das Payment Element rendert ein dynamisches Formular im Desktop-Web oder im mobilen Web unterschiedlich, da es unterschiedliche Kundenauthentifizierungsmethoden verwendet. Erfahren Sie mehr über die Verwendung von Cash App Pay mit Stripe.

PayPal

Um PayPal zu verwenden, müssen Sie sicherstellen, dass Sie sich in einer registrierten Domain befinden.