Nutzerdefinierte Bezahlseite erstellen, die Link enthält

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'

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Wenn Sie Kartendetails für die zukünftige Nutzung mit Setup Intents erfassen, listen Sie Zahlungsmethoden manuell auf, statt dynamische Zahlungsmethoden zu verwenden. Um Link ohne dynamische Zahlungsmethoden zu verwenden, aktualisieren Sie Ihre Integration so, dass link an payment_method_types übergeben wird.

Wenn Sie einen PaymentIntent erstellen, bieten Sie Ihren Kundinnen/Kunden dynamisch die relevantesten Zahlungsmethoden an, einschießlich Link, indem Sie dynamische Zahlungsmethoden verwenden. Um dynamische Zahlungsmethoden zu verwenden, fügen Sie den Parameter payment_method_types nicht ein. Sie können optional auch automatic_payment_methods aktivieren.

So fügen Sie mithilfe dynamischer Zahlungsmethoden Link zu Ihrer Elements-Integration hinzu:

1. Aktivieren Sie in Ihrem Dashboard in den Einstellungen der Zahlungsmethoden Link.
2. Wenn Sie über eine bestehende Integration verfügen, die Zahlungsmethoden manuell auflistet, entfernen Sie den Parameter payment_method_types aus Ihrer Integration.

Client-Geheimnis abrufen

Im PaymentIntent 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 PaymentIntent
  {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.confirmPayment, um die Zahlung mit den von Ihren Kundinnen und Kunden in den verschiedenen Elements-Formularen erfassten Daten abzuschließen. Stellen Sie eine return_url für diese Funktion bereit, um anzugeben, wohin Stripe Nutzer/innen nach Abschluss der Zahlung weiterleitet.

Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor Stripe sie zu der return_url weiterleitet.

By default, card and bank payments immediately redirect to the return_url when a payment is successful. If you don’t want to redirect to the return_url, you can use if_required to change the behavior.

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.confirmPayment({
      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>
  );
}

Die return_url entspricht einer Seite auf Ihrer Website, die den Zahlungsstatus des PaymentIntent liefert, wenn Sie die Rückgabeseite rendern. Wenn Stripe den Kunden/die Kundin an die return_url weiterleitet, können Sie die folgenden URL-Abfrageparameter verwenden, um den Zahlungsstatus zu überprüfen. Sie können auch Ihre eigenen Abfrageparameter anhängen, wenn Sie die return_url bereitstellen. Diese Abfrageparameter bleiben während des Weiterleitungsprozesses bestehen.

Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie einen Webhook, um diese Ereignisse zu empfangen, und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.

Konfigurieren Sie Ihre Integration so, dass diese Ereignisse überwacht werden, statt auf einen Callback vom Client zu warten. Wenn Sie auf einen Callback vom Client warten, können die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Neben der Abwicklung des payment_intent.succeeded-Ereignisses können Sie auch zwei andere wichtige Ereignisse verarbeiten, wenn Sie Zahlungen mit dem Payment Element erfassen:

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:

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 (3DS2) für Kartenzahlungen. Bei 3DS2 müssen Kundinnen und Kunden einen zusätzlichen Verifizierungsschritt beim Kartenaussteller durchlaufen, wenn sie die Zahlung durchführen. Für Zahlungen, die erfolgreich mit 3D Secure authentifiziert wurden, gilt eine Haftungsverlagerung.

Um die 3DS2-Authentifizierung mit Link im Test-Modus auszulösen, verwenden Sie die folgende Testkarte mit beliebigen Werten für Prüfziffer, Postleitzahl und zukünftigem Ablaufdatum: 4000000000003220

Im Test-Modus zeigt die Authentifizierung eine simulierte Authentifizierungsseite an. Auf dieser Seite können Sie die der Zahlung autorisieren oder stornieren. Bei der Autorisierung der wird eine erfolgreiche Authentifizierung simuliert und Sie werden zur angegebenen URL weitergeleitet. Durch Klicken auf die Schaltfläche Fehlgeschlagen wird ein erfolgloser Authentifizierungsversuch simuliert.

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