Schaltfläche für ZahlungsanfrageVeraltet

Das Schaltfläche für Zahlungsanfragen-Element zeigt dynamisch Wallet-Optionen während des Bezahlvorgangs an und bietet Ihnen eine zentrale Integration für Apple Pay, Google Pay und Link. Alternativ können Sie mit dem Express Checkout Element Ihren Kundinnen/Kunden mehrere One-Click-Zahlungsschaltflächen anbieten. Vergleichen Sie das Express Checkout Element und die Schaltfläche für Zahlungsanfragen.

Kundinnen und Kunden sehen Apple Pay oder Google Pay, wenn sie diese Funktionen auf ihrem Gerät aktiviert haben und je nachdem, welchen Browser sie verwenden. Wenn Link angezeigt wird, könnte es sein, weil Kundinnen/Kunden:

• Sie haben auf ihrem Gerät weder Apple Pay noch Google Pay aktiviert.
• Verwenden Sie Chrome mit aktiven, authentifizierten Link-Sitzungen.

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

import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

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

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

import React, {useState, useEffect} from 'react';
import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const [paymentRequest, setPaymentRequest] = useState(null);

  useEffect(() => {
    if (stripe) {
      const pr = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
          label: 'Demo total',
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });
    }
  }, [stripe]);

  // Use a traditional checkout form.
  return 'Insert your form or button component here.';
}

import React, {useState, useEffect} from 'react';
import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const [paymentRequest, setPaymentRequest] = useState(null);

  useEffect(() => {
    if (stripe) {
      const pr = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
          label: 'Demo total',
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });

      // Check the availability of the Payment Request API.
      pr.canMakePayment().then(result => {
        if (result) {
          setPaymentRequest(pr);
        }
      });
    }
  }, [stripe]);

  if (paymentRequest) {
    return <PaymentRequestButtonElement options={{paymentRequest}} />
  }

  // Use a traditional checkout form.
  return 'Insert your form or button component here.';
}

Erstellen Sie ein PaymentIntent

Serverseitig

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.

Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, im Gegensatz zum Client, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kund/innen ihre eigenen Preise wählen können.

Command Line

cURL

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card

Im zurückgegebenen PaymentIntent ist ein Client-Geheimnis enthalten, mit dem Sie den Zahlungsvorgang sicher abschließen können, anstatt das gesamte PaymentIntent-Objekt zu übergeben. Senden Sie das Client-Geheimnis zur Verwendung im nächsten Schritt zurück an den Client.

paymentRequest.on('paymentmethod', async (ev) => {
  // Confirm the PaymentIntent without handling potential next actions (yet).
  const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
    clientSecret,
    {payment_method: ev.paymentMethod.id},
    {handleActions: false}
  );

  if (confirmError) {
    // Report to the browser that the payment failed, prompting it to
    // re-show the payment interface, or show an error message and close
    // the payment interface.
    ev.complete('fail');
  } else {
    // Report to the browser that the confirmation was successful, prompting
    // it to close the browser payment method collection interface.
    ev.complete('success');
    // Check if the PaymentIntent requires any actions and, if so, let Stripe.js
    // handle the flow. If using an API version older than "2019-02-11"
    // instead check for: `paymentIntent.status === "requires_source_action"`.
    if (paymentIntent.status === "requires_action") {
      // Let Stripe.js handle the rest of the payment flow.
      const {error} = await stripe.confirmCardPayment(clientSecret);
      if (error) {
        // The payment failed -- ask your customer for a new payment method.
      } else {
        // The payment has succeeded -- show a success message to your customer.
      }
    } else {
      // The payment has succeeded -- show a success message to your customer.
    }
  }
});

Versandinformationen erfassen

Um Versandinformationen zu erfassen, geben Sie beim Erstellen der Zahlungsanfrage zunächst requestShipping: true an.

In diesem Schritt können Sie auch ein Array mit shippingOptions bereitstellen, wenn die Adresse der Kundin/des Kunden keine Auswirkungen auf Ihre Versandoptionen hat.

const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 1099,
  },

  requestShipping: true,
  // `shippingOptions` is optional at this point:
  shippingOptions: [
    // The first shipping option in this list appears as the default
    // option in the browser payment interface.
    {
      id: 'free-shipping',
      label: 'Free shipping',
      detail: 'Arrives in 5 to 7 days',
      amount: 0,
    },
  ],
});

Next, listen to the shippingaddresschange event to detect when a customer selects a shipping address. Use the address to fetch valid shipping options from your server, update the total, or perform other business logic. The address data on the shippingaddresschange event might be anonymized by the browser to not reveal sensitive information that isn’t necessary for shipping cost calculation.

Der/die Kund/in muss an dieser Stelle gültige shippingOptions angeben, um mit dem Ablauf fortzufahren.

paymentRequest.on('shippingaddresschange', async (ev) => {
  if (ev.shippingAddress.country !== 'US') {
    ev.updateWith({status: 'invalid_shipping_address'});
  } else {
    // Perform server-side request to fetch shipping options
    const response = await fetch('/calculateShipping', {
      data: JSON.stringify({
        shippingAddress: ev.shippingAddress
      })
    });
    const result = await response.json();

    ev.updateWith({
      status: 'success',
      shippingOptions: result.supportedShippingOptions,
    });
  }
});

Rechnungsposten anzeigen

Verwenden Sie displayItems, um PaymentItem-Objekte und eine Preisaufschlüsselung in der Zahlungsschnittstelle des Browsers anzuzeigen.

const pr = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'Demo total',
    amount: 2000,
  },

  displayItems: [
    {
      label: 'Sample item',
      amount: 1000,
    },
    {
      label: 'Shipping cost',
      amount: 1000,
    }
  ],
});

Schaltfläche anpassen

Verwenden Sie die folgenden Parameter, um das Element anzupassen:

const options = {
  paymentRequest,
  style: {
    paymentRequestButton: {
      type: 'default',
      // One of 'default', 'book', 'buy', or 'donate'
      // Defaults to 'default'

      theme: 'dark',
      // One of 'dark', 'light', or 'light-outline'
      // Defaults to 'dark'

      height: '64px',
      // Defaults to '40px'. The width is always '100%'.
    },
  }
}

<PaymentRequestButtonElement options={options} />

Mit Ihrer eigenen Schaltfläche

Falls Sie Ihre eigene Schaltfläche gestalten möchten, anstatt das Element paymentRequestButton zu verwenden, können Sie basierend auf dem Ergebnis von paymentRequest.canMakePayment() Ihre eigene individuelle Schaltfläche anzeigen. Verwenden Sie anschließend paymentRequest.show(), um bei einem Klick auf die Schaltfläche die Browseroberfläche anzuzeigen.

Falls Sie Ihre eigene Schaltfläche erstellen, befolgen Sie die Human Interface Guidelines für Apple Pay und die Brand Guidelines für Google Pay.

Verwenden Sie die Schaltfläche für Zahlungsanfragen in Stripe Connect.

Connect-Plattformen müssen bei Verwendung der Schaltfläche für Zahlungsanfragen möglicherweise zusätzliche Schritte durchführen.

1. Wenn Sie Direct Charges erstellen oder den Token zu einem Kunden/einer Kundin für das verbundene Konto hinzufügen, müssen Sie die Option stripeAccount in der Stripe-Instanz des Frontends festlegen:

   const stripe = Stripe(
   'pk_test_TYooMQauvdEDq54NiTphI7jx', {
     apiVersion: "2024-11-20.acacia",
     stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

2. Wenn Sie bei der Erstellung des Payment oder Setup Intent on_behalf_of angegeben haben, müssen Sie den gleichen Wert mit der Option onBehalfOf an die paymentRequest-Instanz übergeben:

   const paymentRequest = stripe.paymentRequest({
     country: 'US',
     currency: 'usd',
     total: {
       label: 'Demo total',
       amount: 1099,
     },
     requestPayerName: true,
     requestPayerEmail: true,
     onBehalfOf: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

3. Registrieren Sie alle Domains, auf denen Sie die Schaltfläche für Zahlungsanfragen anzeigen möchten.

1. Bevor Sie die PaymentRequest-Instanz in Ihrem Frontend erstellen, legen Sie die Option stripeAccount für die Stripe-Instanz fest:

   const stripe = Stripe(
   'pk_test_TYooMQauvdEDq54NiTphI7jx', {
     apiVersion: "2024-11-20.acacia",
     stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

2. Registrieren Sie alle Domains, auf denen Sie die Schaltfläche für Zahlungsanfragen anzeigen möchten.

Link für die Schaltfläche für Zahlungsanfragen

When new customers come to your site, they can use Link in the Payment Request Button to pay with their saved payment details. With Link, they don’t need to manually enter their payment information. Link requires domain registration.