Zahlungsmethode eines Kunden/einer Kundin speichern, wenn er/sie diese für eine Zahlung verwendet

Registrieren Sie sich zunächst für ein Stripe-Konto.

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 Karte für zukünftige Zahlungen einzurichten, müssen Sie sie einem/einer Kund/in hinzufügen. Erstellen Sie ein Customer-Objekt, wenn Ihr/e Kund/in ein Konto bei Ihrem Unternehmen erstellt. Customer-Objekte ermöglichen die Wiederverwendung von Zahlungsmethoden und die Nachverfolgung über mehrere Zahlungen hinweg.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

Bei erfolgreicher Erstellung wird das Kundenobjekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-id überprüfen and den Wert zum späteren Abruf in Ihrer Datenbank speichern.

Sie finden diese Kundinnen/Kunden auf der Seite Kundinnen/Kunden im Dashboard.

Zeigen Sie Ihre Einstellungen für Zahlungsmethoden an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen PaymentIntent zu erstellen.

Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite Unterstützte Zahlungsmethoden und der Preisseite für Gebühren.

Das PaymentIntent-Objekt stellt Ihre Absicht dar, Zahlungen abzuwickeln und Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Zahlungsvorgang zu dokumentieren.

PaymentIntent erstellen

Erstellen Sie einen PaymentIntent auf Ihrem Server. Geben Sie einen Betrag, eine Währung, und einen Kunden/eine Kundin an. In der neuesten Version der API ist die Angabe des Parameters automatic_payment_methods optional, da Stripe seine Funktionalität standardmäßig aktiviert. Aktivieren Sie setup_future_usage. Die Zahlungsmethoden, die Sie im Dashboard konfiguriert haben, werden automatisch dem Payment Intent hinzugefügt.

Wenn Sie das Dashboard nicht nutzen oder die Zahlungsmethoden manuell angeben möchten, können Sie diese mit dem Attribut payment_method_types auflisten.

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

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

Erfassen Sie Zahlungsdetails auf dem Client mit dem Payment Element. Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung verlangen.

Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das allow-Attribut des iFrame auf "payment *" gesetzt werden.

Die Adresse der Bezahlseite muss mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu aktivieren, wenn Sie zur Annahme von Live-Zahlungen bereit sind.

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

// 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');

<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

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

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

Das Payment Element rendert ein dynamisches Formular, mit dem Kund/innen ihre gewünschte Zahlungsmethode auswählen können. Für jede Zahlungsmethode fordert das Formular die Kund/innen automatisch auf, alle erforderlichen Zahlungsdaten einzugeben.

Erscheinungsbild anpassen

Passen Sie das Payment Element an das Design Ihrer Website an, indem Sie beim Erstellen des Elements-Anbieters das Erscheinungsbild-Objekt an options übergeben.

Adressen einholen

Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Verwenden Sie das Address Element, um die vollständige Rechnungsadresse (z. B. zur Berechnung der Steuer für digitale Waren und Dienstleistungen) oder die Versandadresse einer Kundin/eines Kunden zu erfassen.

Apple Pay-Händler-Token anfordern

Wenn Sie Ihre Integration für die Annahme von Zahlungen per Apple Pay konfiguriert haben, empfehlen wir die Konfiguration der Apple Pay-Schnittstelle um ein Händler-Token zurückzugeben, um von Händlern initiierte Transaktionen (MIT) zu ermöglichen. Fordern Sie den entsprechenden Händler-Token-Typ im Payment Element an.

Verwenden Sie stripe.confirmPayment, um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine return_url an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur return_url weitergeleitet werden. Kartenzahlungen werden sofort zur return_url weitergeleitet, wenn eine Zahlung erfolgreich war.

Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie redirect auf if_required festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen.

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://example.com/order/123/complete',
    },
  });

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

Wurde die Zahlung erfolgreich abgeschlossen, wird die Karte, die für die Zahlung verwendet wurde, im Kundenobjekt gespeichert. Dies wird über das Feld Kundin/Kunde der PaymentMethod angezeigt. Verknüpfen Sie anschließend die ID des Kundenobjekts mit Ihrer eigenen Instanz der Kundin/des Kunden, falls eine vorliegt. Sie können nun das gespeicherte PaymentMethod-Objekt nutzen, um zukünftig Zahlungen von Ihren Kundinnen/Kunden zu erfassen, ohne sie erneut nach den Zahlungsdaten zu fragen.

Achten Sie darauf, dass die return_url auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die return_url weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:

Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den Status des PaymentIntent, um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der return_url auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben.

// Initialize Stripe.js using your publishable key
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Wenn Sie eine Kundenzahlung per Off-Session vornehmen möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine geeignete Zahlungsmethode zu finden, listen Sie die mit Ihrer Kundin/Ihrem Kunden verbundenen Zahlungsmethoden auf. In diesem Beispiel sind Karten aufgeführt, Sie können aber auch alle anderen unterstützten Zahlungsmethoden verwenden.

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

Wenn Ihnen die Kunden-ID und die PaymentMethod-ID vorliegen, erstellen Sie eine PaymentIntent mit dem Betrag und der Währung der Zahlung. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen:

• Legen Sie off_session auf true fest, um anzugeben, dass die Kundin/der Kunde sich während eines Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet und somit eine Authentifizierungsanfrage eines Partners, wie z. B. eines Kartenausstellers, einer Bank oder eines anderen Zahlungsinstituts nicht erfüllen kann. Wenn ein Partner während Ihres Bezahlvorgangs eine Authentifizierung anfordert, fordert Stripe Ausnahmen unter Verwendung von Kundeninformationen aus einer vorherigen On-Session-Transaktion an. Wenn die Bedingungen für eine Ausnahme nicht erfüllt sind, gibt der PaymentIntent möglicherweise einen Fehler zurück.
• Legen Sie den Wert der Eigenschaft confirm des PaymentIntent auf true fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird.
• Setzen Sie payment_method auf die ID der PaymentMethod und Kunde/Kundin auf die ID des Kunden/der Kundin.

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

Verwenden Sie Test-Zahlungsdaten und die Test-Weiterleitungsseite um Ihre Integration zu überprüfen. Klicken Sie auf die nachfolgenden Registerkarten, um Details zu jeder Zahlungsmethode anzuzeigen.

Testen Sie das Belasten mit einer gespeicherten SEPA-Lastschrift

Wenn der PaymentIntent für die Nutzung mit iDEAL, Bancontact oder Sofort bestätigt ist, wird eine wiederverwendbare SEPA-Lastschrift -PaymentMethod erstellt. SEPA-Lastschrift ist eine Zahlungsmethode mit verzögerter Benachrichtigung, die in den Übergangsstatus processing wechselt, bevor sie einige Tage später den Status succeeded oder requires_payment_method annimmt.