Künftige Zahlungen mit Elements und Link einrichten

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:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem/einer Kund/in hinzufügen. Erstellen Sie Customer-Objekte, wenn Kund/innen ein Konto bei Ihrem Unternehmen erstellen. Customer-Objekte ermöglichen die Wiederverwendung von Zahlungsmethoden und die Nachverfolgung über mehrere Zahlungen hinweg.

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

Ein SetupIntent ist ein Objekt, das Ihre Absicht darstellt, die Zahlungsmethode eines Kunden/einer Kundin für zukünftige Zahlungen während einer Sitzung einzurichten und den Status dieser Sitzung zu verfolgen. Erstellen Sie einen SetupIntent auf Ihrem Server mit link und den anderen Zahlungsmethoden, die Sie unterstützen möchten:

curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]"=card \
  -d "payment_method_types[]"=link

Informationen zum Einrichten weiterer Zahlungsmethoden finden Sie im Leitfaden Zukünftige Zahlungen einrichten.

Client-Geheimnis abrufen

Im SetupIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Link authentifiziert eine Kundin/einen Kunden anhand der E-Mail-Adresse. Je nach Bezahlvorgang haben Sie folgende Möglichkeiten: Eine E-Mail an das Payment Element übergeben, diese direkt im Zahlung Element erfassen oder das Link Authentication Element verwenden. Stripe empfiehlt hier, eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben, falls verfügbar.

E-Mail übermitteln

E-Mail erfassen

Verwenden Sie das Link Authentication Element

Falls eine der folgenden Voraussetzungen auf Sie zutrifft:

• Sie benötigen eine einzige, optimierte Komponente für die Erfassung der E-Mail-Adresse und die Link-Authentifizierung.
• Sie müssen eine Versandadresse von Ihrem Kunden/Ihrer Kundin erfragen.

Verwenden Sie dann diesen Integrationsablauf, der drei Elemente implementiert: das Link Authentication Element, das Payment Element und optional das Address Element.

Bei Link-fähigen Bezahlseiten befindet sich das Link Authentication Element am Anfang, gefolgt vom Address Element und dem Payment Element am Ende. Das Link Authentication Element kann bei mehrseitigen Bezahlvorgängen in derselben Reihenfolge auch auf separaten Seiten angezeigt werden.

Ein Zahlungsformular mit mehreren Elements erstellen

Die Integration funktioniert wie folgt:

Jetzt können Sie Ihr nutzerdefiniertes Zahlungsformular mit den vorgefertigten Elements-Nutzeroberflächenkomponenten einrichten. Die Adresse Ihrer Zahlungsseite muss mit https:// statt http:// beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Aktivieren Sie HTTPS, wenn Sie bereit sind, Live-Zahlungen anzunehmen.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

Verwenden Sie stripe.confirmSetup, um die Einrichtung mit den erfassten Details abzuschließen. Geben Sie eine return_url für diese Funktion an, damit Stripe Nutzer/innen weiterleiten kann, nachdem sie die Einrichtung abgeschlossen haben. Wenn eine Zahlung erfolgreich ist, leitet Stripe Link- und Kartenzahlungen sofort an die return_url weiter.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmSetup({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

Wenn Sie ein Kundenkonto belasten möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine zu belastende Zahlungsmethode zu finden, listen Sie die mit Ihrem Kunden/Ihrer Kundin verknüpfte Zahlungsmethode auf.

curl https://api.stripe.com/v1/payment_methods \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "type"="link" \
  -G

Wenn Sie über die Kunden-ID und die PaymentMethod-ID verfügen, erstellen Sie einen PaymentIntent mit dem Betrag und der Währung der Zahlung mit den folgenden Parametern:

• Legen Sie den Wert der Eigenschaft confirm des PaymentIntent auf true fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird.
• Legen Sie payment_method auf die ID der PaymentMethod fest
• Legen Sie customer auf die ID des Kunden/der Kundin fest.
• Legen Sie off_session auf true fest. Dies führt dazu, dass der PaymentIntent einen Fehler sendet, wenn eine Authentifizierung erforderlich ist, während Ihr Kunde/Ihre Kundin Ihre Website oder App nicht aktiv nutzt.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true

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:

Informationen zum Testen bestimmter Zahlungsmethoden finden Sie in den Beispielen für das Testen von Zahlungselementen.

Mehrere Finanzierungsquellen

Da Stripe zusätzliche Unterstützung für Finanzierungsquellen bietet, müssen Sie Ihre Integration nicht aktualisieren. Stripe unterstützt diese automatisch mit der gleichen Transaktionsabwicklungszeit und den gleichen Garantien wie bei Karten- und Bankkontozahlungen.

Kartenauthentifizierung und 3D Secure

Link unterstützt die 3D Secure 2 (3DS2)-Authentifizierung für Kartenzahlungen. 3DS2 erfordert, dass Kundinnen/Kunden beim Bezahlen einen zusätzlichen Verifizierungsschritt beim Kartenaussteller durchführen. Für Zahlungen, die erfolgreich mit 3D Secure authentifiziert wurden, gilt eine Haftungsverlagerung.

To trigger 3DS2 authentication challenge flows with Link in a sandbox, use the following test card with any CVC, postal code, and future expiration date: 4000000000003220

.

In a sandbox, the authentication process displays a mock authentication page. On that page, you can either authorize or cancel the payment. Authorizing the payment simulates successful authentication and redirects you to the specified return URL. Clicking the Failure button simulates an unsuccessful attempt at authentication.

Weitere Details finden Sie auf der Seite 3D Secure-Authentifizierung.