PaymentSheet

PaymentSheet erfasst Zahlungsdetails und bestätigt den Intent in einer einzigen Darstellung. Wenn Sie eine zunächst vorgemerkte Karte und einen späteren Bestätigungsschritt benötigen, verwenden Sie PaymentFlow.

Verwenden Sie einen PaymentIntent für eine sofortige Zahlung oder einen SetupIntent, um eine Zahlungsmethode für später zu speichern. Erstellen Sie diese Objekte auf Ihrem Server. Siehe Serverintegration.

Plattformunterstützung

Das Web rendert kein natives PaymentSheet. Im Web verwendet createPaymentSheet paymentIntentClientSecret und das optionale withZipCode. Die aktuelle Web-Implementierung unterstützt keine SetupIntents. Ausschließlich native Optionen wie defaultBillingDetails, shippingDetails, billingDetailsCollectionConfiguration, enableApplePay, enableGooglePay, style und returnURL werden ignoriert.

1. createPaymentSheet

Rufen Sie für den Client sichere Secrets von Ihrem Backend ab und rufen Sie anschließend createPaymentSheet auf. Das Plugin kommuniziert nicht mit der geheimen Stripe-API. Ersetzen Sie /your-intent-endpoint im Beispiel durch die Backend-URL aus Serverintegration.

Übergeben Sie unter iOS und Android entweder paymentIntentClientSecret oder setupIntentClientSecret. Übergeben Sie im Web paymentIntentClientSecret. customerId und customerEphemeralKeySecret sind gemeinsam optional. Wenn Sie customerId setzen, müssen Sie auch customerEphemeralKeySecret setzen. Ein PaymentIntent ohne Customer ist gültig. Siehe die Demo-Struktur intent/without-customer unter Serverintegration.

import { PaymentSheetEventsEnum, Stripe } from '@capacitor-community/stripe';

// `/your-intent-endpoint` durch Ihr Backend aus der Anleitung zur Serverintegration ersetzen.
const response = await fetch('/your-intent-endpoint', {
  method: 'POST',
});
if (!response.ok) {
  throw new Error(`Intent request failed: ${response.status}`);
}
const { paymentIntent, ephemeralKey, customer } = (await response.json()) as {
  paymentIntent: string;
  ephemeralKey: string;
  customer: string;
};

await Stripe.createPaymentSheet({
  paymentIntentClientSecret: paymentIntent,
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  merchantDisplayName: 'rdlabo',
});

2. presentPaymentSheet

Rufen Sie presentPaymentSheet erst nach einem erfolgreichen createPaymentSheet auf.

const result = await Stripe.presentPaymentSheet();
if (result.paymentResult === PaymentSheetEventsEnum.Completed) {
  // Nur die UI aktualisieren. Den Intent vor der Leistungserbringung per Webhook bestätigen.
}

Behandeln Sie Canceled als Schließen des Sheets durch den Kunden. Behandeln Sie Failed als Fehler. Keines der Ergebnisse autorisiert allein die Erfüllung einer Bestellung.

3. addListener

Registrieren Sie Ergebnis-Listener einmal beim Anwendungsstart, bevor Sie das Sheet anzeigen. Bevorzugen Sie nach der Neuerstellung einer Android-Activity Ereignisse gegenüber dem Promise. Siehe Ereignis-Listener.

await Promise.all([
  Stripe.addListener(PaymentSheetEventsEnum.Completed, () => {
    console.log('PaymentSheetEventsEnum.Completed');
  }),
  Stripe.addListener(PaymentSheetEventsEnum.Canceled, () => {
    console.log('PaymentSheetEventsEnum.Canceled');
  }),
  Stripe.addListener(PaymentSheetEventsEnum.Failed, (error) => {
    console.log('PaymentSheetEventsEnum.Failed', error);
  }),
]);

Referenz

• Eine Zahlung annehmen (iOS)
• Eine Zahlung annehmen (Android)