Dokumentation zu React Stripe.js

React Stripe.js ist ein schlanker Wrapper um Stripe Elements, mit dem Sie jeder React-App Elemente hinzufügen können.

Die Stripe.js-Referenz behandelt alle Details zur Anpassung von Elements.

Sie können Elements mit jedem Stripe-Produkt verwenden, um Online-Zahlungen einzuziehen. Lesen Sie unsere Dokumentation, um den richtigen Integrationspfad für Ihr Unternehmen zu finden.

Bevor Sie loslegen

Diese Dokumentation setzt voraus, dass Sie bereits über grundlegende Kenntnisse von React verfügen und auch schon ein entsprechendes React-Projekt erstellt haben. Wenn Sie zum ersten Mal mit React arbeiten, empfehlen wir Ihnen, sich zunächst den Leitfaden Getting Started anzusehen.

Einrichtung

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

Checkout-Anbieter

Mit dem CheckoutProvider können Sie Element-Komponenten verwenden und auf das Stripe-Objekt in einer beliebigen verschachtelten Komponente zugreifen. Rendern Sie einen CheckoutProvider im Stammverzeichnis Ihrer React-App, damit er Ihnen bei Bedarf zur Verfügung steht.

Um den CheckoutProvider zu verwenden, rufen Sie loadStripe von @stripe/stripe-js mit Ihrem veröffentlichbaren Schlüssel auf. Die Funktion loadStripe lädt asynchron das Skript Stripe.js und initialisiert ein Stripe-Objekt. Übergeben Sie das zurückgegebene Promise an den CheckoutProvider.

See Create a Checkout Session for an example of what your endpoint might look like.

import {CheckoutProvider} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

export default function App() {
  return (
    <CheckoutProvider stripe={stripePromise} options={{fetchClientSecret}}>
      <CheckoutForm />
    </CheckoutProvider>
  );
}

Element-Komponenten

Mit Element-Komponenten können Sie Zahlungsinformationen sicher in Ihrer React-App erfassen und die Elemente an einer beliebigen Stelle auf Ihrer Bezahlseite platzieren. Auch das Erscheinungsbild kann angepasst werden.

Sie können einzelne Element-Komponenten innerhalb Ihrer CheckoutProvider-Baumstruktur verbinden. Sie können nur jeweils einen Element-Typ mit einem einzigen <CheckoutProvider> verbinden.

import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

Verfügbare Element-Komponenten

Sie können mehrere Arten von Elementen verwenden, um Informationen auf Ihrer Bezahlseite zu erfassen. Dies sind die verfügbaren Elemente:

useCheckout-Hook

useCheckout(): CheckoutContextValue | null

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

import {useCheckout, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const result = await checkout.confirm();

    if (result.type === 'error') {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.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`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button>Submit</button>
    </form>
  )
};

export default CheckoutForm;

Anpassung und Design

Jedes Element ist mit einem iframe verbunden, was bedeutet, dass Elements wahrscheinlich nicht mit Ihren vorhandenen Stil- und Komponenten-Frameworks funktioniert. Dennoch können Sie Elements so konfigurieren, dass es zum Design Ihrer Website passt. Das Anpassen von Elements besteht aus der Reaktion auf Ereignisse und der Konfiguration von Elements mit der Erscheinungsbildoption. Das Layout der einzelnen Elemente bleibt konsistent, Sie können jedoch u. a. Farben, Schriftarten, Rahmen und Abstände ändern.