Schaltflächen für die Zahlung mit einem Klick hinzufügen

Das Express Checkout Element bietet Ihnen eine zentrale Integration, mit der Sie Zahlungen über eine Schaltfläche mit nur einem Klick annehmen können. Zu den unterstützten Zahlungsmethoden zählen Link, Apple Pay und Google Pay.

Try the demo

In der folgenden Demo können Sie einige der vorgefertigten Optionen ein- und ausschalten, um die Hintergrundfarbe, das Layout, die Größe und die Versandadressenerfassung der Zahlungsoberfläche zu ändern. Die Demo zeigt Google Pay und Apple Pay nur auf den jeweils verfügbaren Plattformen an. Schaltflächen für Zahlungsmethoden werden nur in den unterstützten Ländern angezeigt.

Wenn Sie die Demo nicht sehen, versuchen Sie, diese Seite in einem unterstützten Browser anzuzeigen.

Voraussetzungen

Bevor Sie beginnen, müssen Sie:

• Aktivieren Sie Link, Apple Pay oder Google Pay im Dashboard.
• Ihrem Browser eine Zahlungsmethode hinzufügen. Beispiel: Sie können Ihrem Google Pay-Konto bzw. Ihrer Wallet für Safari eine Karte hinzufügen.
• Ihre Anwendung über HTTPS bereitstellen. Dies ist eine Voraussetzung sowohl in der Entwicklung als auch in der Produktion. Sie können einen Dienst wie ngrok verwenden.
• Registrieren und verifizieren Sie Ihre Domain im Test-Modus und im Live-Modus.

Handle one-click payments

The Express Checkout Element emits the confirm event when your customer finalizes their payment. Create a handler that responds to the event by calling confirm and pass it to the Express Checkout Element.

Das Ereignis enthält auch die folgenden Felder:

• expressPaymentType: Entweder 'apple_pay', 'google_pay' oder 'link'.
• billingDetails: Objekt mit Informationen zu den Abrechnungsdetails des Kunden/der Kundin.
• shippingAddress: Objekt, das Informationen über die Versandadresse des Kunden/der Kundin enthält.
• shippingRate: Objekt, das Informationen über die ausgewählte Versandrate enthält.

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

const CheckoutForm = () => {
  const checkout = useCheckout();
  const handleConfirmExpressCheckout = (event) => {
    checkout.confirm({expressCheckoutConfirmEvent: event})
  };
  return (
    <form>
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </form>
  )
};

export default CheckoutForm;

The following options are also supported:

• buttonHeight
• buttonTheme
• layout
• paymentMethodOrder
• paymentMethods
  • Hinweis: Sowohl Ihre Dashboard-Konfiguration als auch Ihre Checkout-Konfiguration wirken sich auf die Verfügbarkeit von Zahlungsmethoden im Express Checkout Element aus. Standardmäßig werden alle verfügbaren Zahlungsmethoden basierend auf beiden Konfigurationen angezeigt. Wenn Sie die Option paymentMethods festlegen, führt das Express Checkout Element Ihre angegebenen Optionen mit der Standardlogik zusammen, um den endgültigen Satz der angezeigten Zahlungsmethoden zu bestimmen.