Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case finden
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Andere Stripe-Produkte

Zahlungsseite mit eingebetteten Komponenten erstellenÖffentliche Vorschau

Verwenden Sie Elements und die Checkout Sessions API, um eine Bezahlseite zu erstellen.

Seite kopieren

Erstellen Sie eine Bezahlseite auf Ihrer Website mit Stripe Elements und Checkout Sessions, einer Integration, die Steuern, Rabatte, Versandgebühren und mehr verwaltet.

Kundenstandort
Größe
Design
Layout
Diese Demo zeigt Google Pay oder Apple Pay nur dann an, wenn Sie über eine aktive Karte mit einer der beiden Wallets verfügen.

Server einrichten
Serverseitig

Bevor Sie beginnen, müssen Sie sich für ein Stripe-Konto registrieren.

Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die API zuzugreifen.

Command Line
npm install stripe@17.4.0-beta.2 --save

Legen Sie im SDK fest, dass der Betaversion-Header custom_checkout_beta=v1 verwendet wird.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-02-24.acacia; custom_checkout_beta=v1' as any,
});

Checkout-Sitzung erstellen
Serverseitig

Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine Checkout-Sitzung erstellt und sein Client-Geheimnis an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihres Kunden/Ihrer Kundin dar, während er/sie per Checkout für einmalige Käufe oder Abonnements bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab.

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: '{{RETURN_URL}}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Frontend einrichten
Clientseitig

Installieren Sie React Stripe.js und den Stripe.js-Loader aus dem öffentlichen npm-Register. Sie benötigen mindestens Version 3.5.0 für React Stripe.js und Version 6.1.0 für den Stripe.js-Loader.

Command Line
npm install --save @stripe/react-stripe-js@^3.5.0 @stripe/stripe-js@^6.1.0

Initialisieren Sie eine stripe-Instanz auf Ihrem Frontend mit Ihrem veröffentlichbaren Schlüssel und übergeben Sie die Betaversion custom_checkout_beta_6.

App.jsx
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe(
"pk_test_TYooMQauvdEDq54NiTphI7jx"
, {
  betas: ['custom_checkout_beta_6'],
});

Bezahlvorgang initialisieren
Clientseitig

Erstellen Sie eine fetchClientSecret-Funktion. Diese Funktion sollte das Client-Geheimnis von Ihrem Server abrufen und ein Promise zurückgeben, das mit dem Client-Geheimnis aufgelöst wird.

Schließen Sie Ihre Anwendung mit der Komponente CheckoutProvider ein und übergeben Sie die fetchClientSecret-Funktion und die stripe-Instanz.

Verwenden Sie den Hook useCheckout in Ihren Komponenten, um das Checkout-Objekt abzurufen, das die Daten aus der Checkout-Sitzung sowie Methoden zur Aktualisierung der Sitzung enthält.

Verwenden Sie das checkout-Objekt als Informationsquelle für Preise. Wir empfehlen, die Elemente total, currency und lineItems aus dem checkout-Objekt in Ihrer Nutzeroberfläche zu lesen.

Auf diese Weise können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Wenn Sie beispielsweise Preise in manueller Währung hinzufügen, sind keine Änderungen an der Nutzeroberfläche erforderlich, wenn Sie total und currency anzeigen.

Vorsicht

Möglicherweise erhalten Sie eine Fehlermeldung, wenn Sie die Preise aus dem checkout-Objekt nicht richtig lesen und anzeigen.

App.jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js';
import CheckoutForm from './CheckoutForm';

const App = () => {
  const fetchClientSecret = () => {
    return fetch('/create-checkout-session', {method: 'POST'})
      .then((response) => response.json())
      .then((json) => json.checkoutSessionClientSecret)
  };

  return (
    <CheckoutProvider
      stripe={stripe}
      options={{fetchClientSecret}}
    >
      <CheckoutForm />
    </CheckoutProvider>
  );
};

export default App;
CheckoutForm.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  return (
    <pre>
      {JSON.stringify(checkout.lineItems, null, 2)}
      Currency: {checkout.currency}
      // A formatted total amount
      Total: {checkout.total.total.amount}
    </pre>
  )
};

E-Mail-Adressen von Kundinnen/Kunden erfassen
Clientseitig

Erstellen Sie eine Komponente, um die E-Mail-Adresse Ihrer Kundinnen/Kunden zu erfassen. Rufen Sie updateEmail auf, wenn Ihre Kundin/Ihre Kunde die Eingabe abgeschlossen hat, um die E-Mail-Adresse zu validieren und zu speichern.

Je nach Design Ihres Bezahlformulars können Sie updateEmail folgendermaßen aufrufen:

  • Direkt vor dem Senden der Zahlung. Sie können auch updateEmail aufrufen, um die Validierung zu einem früheren Zeitpunkt durchzuführen, z. B. bei Eingabeunschärfe.
  • Vor dem Übergang zum nächsten Schritt, z. B. dem Klicken auf die Schaltfläche Speichern, wenn Ihr Formular mehrere Schritte umfasst.
EmailInput.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const EmailInput = () => {
  const checkout = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

  const handleBlur = () => {
    checkout.updateEmail(email).then((result) => {
      if (result.error) {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };
  return (
    <div>
      <input
        type="text"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;

Zahlungsdetails erfassen
Clientseitig

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

Verbinden Sie die Komponente Payment Element innerhalb des CheckoutProvider.

CheckoutForm.jsx
import React from 'react';
import {PaymentElement, useCheckout} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();
  return (
    <form>
      <PaymentElement options={{layout: 'accordion'}}/>
    </form>
  )
};

export default CheckoutForm;

Welche Optionen unterstützt werden, erfahren Sie in der Dokumentation für Stripe.js.

Sie können das Erscheinungsbild aller Elements anpassen, indem Sie elementsOptions.appearance an den CheckoutProvider übergeben.

Zahlung übermitteln
Clientseitig

Rendern Sie eine Schaltfläche zum Bezahlen, die confirm über useCheckout aufruft, um die Zahlung zu übermitteln.

PayButton.jsx
import React from 'react';
import {useCheckout} from '@stripe/react-stripe-js';

const PayButton = () => {
  const {confirm} = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const handleClick = () => {
    setLoading(true);
    confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;

Ihre Integration testen

  1. Navigieren Sie zu Ihrer Bezahlseite.
  2. Geben Sie in den Zahlungsdetails eine Zahlungsmethode aus der folgenden Tabelle ein. Für Kartenzahlungen:
    • Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein.
    • Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein.
    • Geben Sie eine beliebige Postleitzahl ein.
  3. Senden Sie die Zahlung an Stripe.
  4. Gehen Sie zum Dashboard und suchen Sie auf der Seite Transaktionen nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt.
  5. Klicken Sie auf Ihre Zahlung, um weitere Details wie Rechnungsinformationen und die Liste der gekauften Artikel anzuzeigen. Sie können diese Informationen verwenden, um die Bestellung abzuwickeln.
KartennummerSzenarioSo führen Sie den Test durch
Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Für die Kartenzahlung ist eine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die Karte wird mit einem Ablehnungscode wie insufficient_funds abgelehnt.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.

Siehe auch

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc