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.

Ein Beispiel dafür, wie Ihr Endpoint aussehen könnte, finden Sie unter Checkout-Sitzung erstellen.

import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
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');

export default function App() {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  return (
    <CheckoutProvider stripe={stripePromise} options={{clientSecret: promise}}>
      <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/checkout';

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(): CheckoutValue

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

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

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

    if (checkoutState.type === 'loading') {
      return (
        <div>Loading...</div>
      );
    } else if (checkoutState.type === 'error') {
      return (
        <div>Error: {checkoutState.error.message}</div>
      );
    }

    // checkoutState.type === 'success'
    const {checkout} = checkoutState;
    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 in einen iframe eingebunden, was bedeutet, dass Elements wahrscheinlich nicht mit Ihren vorhandenen Stil- und Komponenten-Frameworks funktioniert. Trotzdem können Sie Elements so konfigurieren, dass es zum Design Ihrer Website passt. Um Elements anzupassen, reagieren Sie auf Ereignisse und konfigurieren Sie Elements mit der Option Erscheinungsbild. Das Layout jedes Elements bleibt einheitlich, Sie können jedoch Farben, Schriftarten, Ränder, Abstände usw. ändern.