Aller au contenu
rdlabo.devdocs

PaymentFlow

PaymentFlow sépare la collecte et la confirmation. presentPaymentFlow recueille le moyen de paiement et renvoie une carte en attente. confirmPaymentFlow confirme l’Intent plus tard, généralement après un écran de vérification.

Image provenant de Gyazo

Utilisez un PaymentIntent ou un SetupIntent. Créez ces objets sur votre serveur. Consultez Intégration serveur.

Prise en charge des plateformes

Plateforme PaymentFlow
iOS PaymentSheet.FlowController natif
Android PaymentSheet.FlowController natif
Web Modale de saisie de carte stripe-pwa-elements

Sur le Web, le plugin prend en charge paymentIntentClientSecret ou setupIntentClientSecret, ainsi que l’option facultative withZipCode. Les options réservées au natif, comme defaultBillingDetails, shippingDetails, billingDetailsCollectionConfiguration, enableApplePay, enableGooglePay, style et returnURL, sont ignorées sur le Web.

1. createPaymentFlow

Récupérez les secrets utilisables côté client depuis votre backend, puis appelez createPaymentFlow. Remplacez /your-intent-endpoint dans l’exemple par l’URL du backend présentée dans Intégration serveur. Fournissez soit paymentIntentClientSecret, soit setupIntentClientSecret. customerId et customerEphemeralKeySecret sont facultatifs ensemble. Si vous définissez customerId, vous devez également définir customerEphemeralKeySecret.

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

// Remplacez `/your-intent-endpoint` par votre backend décrit dans Intégration serveur.
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',
});

method createPaymentFlow(...)

Crée une instance de PaymentFlow. Utilisez PaymentFlow lorsque l’application doit d’abord recueillir les informations de paiement, puis les confirmer à une étape ultérieure.

createPaymentFlow(options: CreatePaymentFlowOption) => Promise<void>

interface CreatePaymentFlowOption

Propriété Type Description Valeur par défaut Depuis
paymentIntentClientSecret string Secret client du PaymentIntent à confirmer. Fournissez exactement l’un des deux paramètres : paymentIntentClientSecret ou setupIntentClientSecret. 3.0.2
setupIntentClientSecret string Secret client du SetupIntent utilisé pour enregistrer un moyen de paiement. Fournissez exactement l’un des deux paramètres : paymentIntentClientSecret ou setupIntentClientSecret. 3.0.2
defaultBillingDetails DefaultBillingDetails Coordonnées de facturation utilisées pour préremplir PaymentSheet. iOS et Android uniquement. https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios#set-default-billing-details 7.2.0
shippingDetails AddressDetails Coordonnées de livraison utilisées pour préremplir PaymentSheet. Android uniquement ; sur iOS, utilisez plutôt l’élément d’adresse de Stripe. https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=android#prefill-addresses 7.2.0
billingDetailsCollectionConfiguration BillingDetailsCollectionConfiguration Détermine les coordonnées de facturation recueillies par PaymentSheet. iOS et Android uniquement. https://docs.stripe.com/payments/mobile/collect-addresses?payment-ui=mobile&platform=ios#customize-billing-details-collection 7.2.0
customerEphemeralKeySecret string Secret de clé éphémère du client renvoyé par votre serveur. Utilisez-le avec customerId ; ne fournissez jamais un seul de ces deux paramètres. 3.0.0
customerId string Identifiant Stripe Customer associé à customerEphemeralKeySecret. 3.0.0
enableApplePay boolean Active Apple Pay dans le PaymentSheet natif. iOS uniquement. false 3.3.0
applePayMerchantId string Identifiant de commerçant Apple configuré pour l’application. Obligatoire lorsque enableApplePay vaut true ; ignoré sinon. 3.3.0
enableGooglePay boolean Active Google Pay dans le PaymentSheet natif. Android uniquement. false 3.2.0
GooglePayIsTesting boolean Utilise l’environnement de test Google Pay. Android uniquement. false 3.2.0
countryCode string Code de pays ISO 3166-1 à deux lettres utilisé par Apple Pay ou Google Pay. Ignoré si aucun des deux portefeuilles n’est activé. "US" 3.2.0
merchantDisplayName string Nom du commerçant affiché dans le PaymentSheet natif. "App Name" 3.0.0
returnURL string Schéma d’URL personnalisé permettant de revenir dans l’application après une authentification par redirection. iOS uniquement. "" 3.0.0
paymentMethodLayout 'automatic' | 'horizontal' | 'vertical' Disposition des moyens de paiement dans PaymentSheet sur iOS et Android. "automatic" 7.2.2
style 'alwaysLight' | 'alwaysDark' Personnalisation de l’apparence du PaymentSheet natif. iOS uniquement. undefined 3.0.0
withZipCode boolean Affiche le champ de code postal dans le formulaire Web de carte bancaire. Web uniquement. true 3.6.0
currencyCode string Code de devise ISO 4217 à trois lettres utilisé par Google Pay. Obligatoire lorsque Google Pay est activé pour un SetupIntent. "USD" 7.1.0

2. presentPaymentFlow

Appelez presentPaymentFlow uniquement après la réussite de createPaymentFlow. Le cardNumber renvoyé est masqué. L’Intent n’est pas encore confirmé.

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

method presentPaymentFlow()

Présente le PaymentFlow créé par createPaymentFlow() et se résout avec les quatre derniers chiffres de la carte sélectionnée.

presentPaymentFlow() => Promise<{ cardNumber: string; }>

Si le client annule, la Promise est rejetée ou l’événement Canceled est émis. N’appelez pas confirmPaymentFlow avant Created ou un résultat réussi de presentPaymentFlow.

3. confirmPaymentFlow

const confirmResult = await Stripe.confirmPaymentFlow();
if (confirmResult.paymentResult === PaymentFlowEventsEnum.Completed) {
  // Mettez uniquement l’interface à jour. Confirmez l’Intent par webhook avant d’exécuter la commande.
}

method confirmPaymentFlow()

Confirme les informations de paiement recueillies par presentPaymentFlow().

confirmPaymentFlow() => Promise<{ paymentResult: PaymentFlowResultInterface; }>

type alias PaymentFlowResultInterface

PaymentFlowEventsEnum.Completed | PaymentFlowEventsEnum.Canceled | PaymentFlowEventsEnum.Failed

Traitez Canceled comme une annulation et Failed comme une erreur. Aucun de ces résultats n’autorise à lui seul l’exécution d’une commande.

4. addListener

Enregistrez les écouteurs de résultat une seule fois au démarrage de l’application. Préférez les événements à la Promise après une recréation de l’Activity Android, y compris l’événement Created. Consultez Écouteurs d’événements.

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);
  }),
]);

enum PaymentFlowEventsEnum

Membre Valeur
Loaded 'paymentFlowLoaded'
FailedToLoad 'paymentFlowFailedToLoad'
Opened 'paymentFlowOpened'
Created 'paymentFlowCreated'
Completed 'paymentFlowCompleted'
Canceled 'paymentFlowCanceled'
Failed 'paymentFlowFailed'

Référence

payment-flow.ts
import { PaymentFlowEventsEnum, Stripe } from '@capacitor-community/stripe';

(async () => {
  await Stripe.addListener(PaymentFlowEventsEnum.Completed, () => {
    console.log('PaymentFlowEventsEnum.Completed');
  });

  // Replace `/your-intent-endpoint` with your backend from Server Integration.
  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;
  };

  // Prepare PaymentFlow with CreatePaymentFlowOption.
  await Stripe.createPaymentFlow({
    paymentIntentClientSecret: paymentIntent,
    // setupIntentClientSecret: setupIntent,
    customerEphemeralKeySecret: ephemeralKey,
    customerId: customer,
  });

  // Collect payment details. The Intent is not confirmed yet.
  const presentResult = await Stripe.presentPaymentFlow();
  console.log(presentResult); // { cardNumber: "●●●● ●●●● ●●●● ****" }

  // Confirm PaymentFlow. Completed.
  const confirmResult = await Stripe.confirmPaymentFlow();
  if (confirmResult.paymentResult === PaymentFlowEventsEnum.Completed) {
    // Update UI only. Fulfill orders from a verified server webhook.
  }
})();