PaymentFlow

PaymentFlow trennt Erfassung und Bestätigung. presentPaymentFlow erfasst die Zahlungsmethode und gibt eine vorgemerkte Karte zurück. confirmPaymentFlow bestätigt den Intent später, üblicherweise nach einer Übersichtsseite.

Verwenden Sie einen PaymentIntent oder einen SetupIntent. Erstellen Sie diese Objekte auf Ihrem Server. Siehe Serverintegration.

Plattformunterstützung

Das Web unterstützt paymentIntentClientSecret oder setupIntentClientSecret sowie das optionale withZipCode. Ausschließlich native Optionen wie defaultBillingDetails, shippingDetails, billingDetailsCollectionConfiguration, enableApplePay, enableGooglePay, style und returnURL werden im Web ignoriert.

1. createPaymentFlow

Rufen Sie für den Client sichere Secrets von Ihrem Backend ab und rufen Sie anschließend createPaymentFlow auf. Ersetzen Sie /your-intent-endpoint im Beispiel durch die Backend-URL aus Serverintegration. Übergeben Sie entweder paymentIntentClientSecret oder setupIntentClientSecret. customerId und customerEphemeralKeySecret sind gemeinsam optional. Wenn Sie customerId setzen, müssen Sie auch customerEphemeralKeySecret setzen.

import { PaymentFlowEventsEnum, 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.createPaymentFlow({
  paymentIntentClientSecret: paymentIntent,
  customerEphemeralKeySecret: ephemeralKey,
  customerId: customer,
  merchantDisplayName: 'rdlabo',
});

2. presentPaymentFlow

Rufen Sie presentPaymentFlow erst nach einem erfolgreichen createPaymentFlow auf. Die zurückgegebene cardNumber ist ein maskierter Wert. Der Intent ist noch nicht bestätigt.

const presentResult = await Stripe.presentPaymentFlow();
console.log(presentResult); // { cardNumber: "●●●● ●●●● ●●●● ****" }

3. confirmPaymentFlow

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

4. addListener

Registrieren Sie Ergebnis-Listener einmal beim Anwendungsstart. Bevorzugen Sie nach der Neuerstellung einer Android-Activity Ereignisse gegenüber dem Promise, einschließlich des Ereignisses Created. Siehe Ereignis-Listener.

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

Referenz

• Die Zahlung in Ihrer eigenen UI abschließen (iOS)
• Die Zahlung in Ihrer eigenen UI abschließen (Android)