Enregistrer les informations pour les futurs paiements par prélèvement automatique ACH

Côté serveur

Pour cette intégration, votre serveur doit être doté d’endpoints qui communiquent avec l’API Stripe. Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre serveur :

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Côté client

Le SDK React Native est disponible en open source et fait l’objet d’une documentation complète. En interne, il utilise des SDK Android et iOS natifs. Pour installer le SDK React Native de Stripe, exécutez l’une des commandes suivantes dans le répertoire de votre projet (selon le gestionnaire de paquets que vous utilisez) :

yarn add @stripe/stripe-react-native

Ensuite, installez les autres dépendances nécessaires :

• Pour iOS, accédez au répertoire ** ios** et exécutez pod install pour vous assurer d’installer également les dépendances natives requises.
• Pour Android, il n’y a plus de dépendances à installer.

Initialisation de Stripe

Pour initialiser Stripe dans votre application React Native, wrappez votre écran de paiement avec le composant StripeProvider ou utilisez la méthode d’initialisation initStripe. Seule la clé publiable de l’API dans publishableKey est nécessaire. L’exemple suivant montre comment initialiser Stripe à l’aide du composant StripeProvider.

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise, ou récupérez l’objet Customer existant associé à cet utilisateur. L’association de l’ID de l’objet Customer à votre propre représentation interne d’un client vous permet de récupérer et d’utiliser ultérieurement les informations de paiement enregistrées. Ajoutez une adresse e-mail à l’objet Customer pour activer l’optimisation des utilisateurs connus de Financial Connections.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}}

Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de futurs paiements. Le SetupIntent suit les étapes de ce processus de configuration.

Créez un SetupIntent sur votre serveur en définissant payment_method_types sur us_bank_account, et indiquez l’id du client.

Côté serveur

Créez un SetupIntent sur votre serveur en définissant payment_method_types sur us_bank_account, et indiquez l’id du client.

Par défaut, lors de la collecte des coordonnées bancaires, Financial Connections est utilisé pour vérifier instantanément le compte de votre client. Une option de secours comprenant la saisie manuelle du numéro de compte et la vérification par microversement peut être utilisée. Consultez la documentation relative à Financial Connections pour savoir comment configurer Financial Connections et accéder à des données de compte supplémentaires de façon à optimiser votre intégration ACH. Par exemple, vous pouvez utiliser Financial Connections pour consulter le solde d’un compte avant d’initier le paiement ACH.

curl https://api.stripe.com/v1/setup_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]"=us_bank_account \
  -d "payment_method_options[us_bank_account][financial_connections][permissions][]"=payment_method \
  -d "payment_method_options[us_bank_account][financial_connections][permissions][]"=balances

Côté client

Un SetupIntent contient une clé secrète du client. Au lieu de transmettre la totalité de l’objet SetupIntent, vous pouvez utiliser la clé secrète du client dans votre application React Native pour finaliser le processus de paiement en toute sécurité. Dans votre application, demandez un SetupIntent auprès de votre serveur et sauvegardez sa clé secrète du client.

function PaymentScreen() {
  // ...

  const fetchIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        // This is an example request body, the parameters you pass are up to you
        customer: '<CUSTOMER_ID>',
      }),
    });
    const {clientSecret} = await response.json();

    return clientSecret;
  };

  return <View>...</View>;
}

Plutôt que d’envoyer la totalité de l’objet SetupIntent au client, utilisez sa clé secrète provenant de l’étape précédente. Il ne s’agit pas de vos clés API qui authentifient les requêtes de l’API de Stripe.

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

Utilisez collectBankAccountForSetup pour recueillir les coordonnées bancaires, créer un PaymentMethod, et rattacher ce PaymentMethod au SetupIntent. Vous devez inclure le nom du titulaire du compte dans le paramètre billingDetails pour créer un PaymentMethod ACH Direct Debit.

import {collectBankAccountForSetup} from '@stripe/stripe-react-native';

export default function MyPaymentScreen() {
  const [name, setName] = useState('');

  const handleCollectBankAccountPress = async () => {
    // Fetch the intent client secret from the backend.
    // See `fetchIntentClientSecret()`'s implementation above.
    const {clientSecret} = await fetchIntentClientSecret();

    const {setupIntent, error} = await collectBankAccountForSetup(
      clientSecret,
      {
        paymentMethodType: 'USBankAccount',
        paymentMethodData: {
          billingDetails: {
            name: "John Doe",
          },
        },
      },
    );

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (setupIntent) {
      Alert.alert('Setup status:', setupIntent.status);
      if (setupIntent.status === SetupIntents.Status.RequiresConfirmation) {
        // The next step is to call `confirmSetup`
      } else if (setupIntent.status === SetupIntents.Status.RequiresAction) {
        // The next step is to call `verifyMicrodepositsForSetup`
      }
    }
  };

  return (
    <PaymentScreen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <Button
        onPress={handleCollectBankAccountPress}
        title="Collect bank account"
      />
    </PaymentScreen>
  );
}

Cela charge une fenêtre modale sur la page qui gère la collecte et la vérification des informations du compte bancaire. Une fois le chargement terminé, le PaymentMethod est automatiquement rattaché au SetupIntent.

When a customer exits your app (for example to authenticate in Safari or their banking app), provide a way for them to automatically return to your app. Many payment method types require a return URL. If you don’t provide one, we can’t present payment methods that require a return URL to your users, even if you’ve enabled them.

Pour fournir une URL de redirection :

1. Enregistrez une URL personnalisée. Les liens universels ne sont pas pris en charge.
2. Configurez votre URL personnalisée.
3. Configurez votre composant racine pour qu’il transfère l’URL au SDK de Stripe, comme illustré ci-dessous.

import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

Pour plus d’informations sur les schémas d’URL natifs, consultez la documentation Android et iOS.

Avant de pouvoir mener à bien le SetupIntent et enregistrer les informations du moyen de paiement, vous devez obtenir l’autorisation de paiement auprès de votre client. Pour ce faire, présentez-lui les conditions du mandat et demandez-lui de les accepter.

Pour vous conformer aux règles de la Nacha, vous devez obtenir l’autorisation d’initier le paiement auprès de votre client. Pour ce faire, présentez-lui les conditions du mandat et demandez-lui de les accepter. Pour en savoir plus, consultez la page sur les mandats.

Lorsque le client accepte les conditions du mandat, vous devez confirmer le SetupIntent. Utilisez confirmSetup pour confirmer l’intention de payement.

import {confirmSetup} from '@stripe/stripe-react-native';

export default function MyPaymentScreen() {
  const [name, setName] = useState('');

  const handleCollectBankAccountPress = async () => {
    // See above
  };

  const handlePayPress = async () => {
    // use the same clientSecret as earlier, see above
    const {error, setupIntent} = await confirmSetup(clientSecret, {
      type: 'USBankAccount',
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (setupIntent) {
      if (setupIntent.status === SetupIntents.Status.Processing) {
        // The debit has been successfully submitted and is now processing
      } else if (
        setupIntent.status === SetupIntents.Status.RequiresAction &&
        setupIntent?.nextAction?.type === 'verifyWithMicrodeposits'
      ) {
        // The payment must be verified with `verifyMicrodepositsForPayment`
      } else {
        Alert.alert('Payment status:', setupIntent.status);
      }
    }
  };

  return (
    <PaymentScreen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <Button
        onPress={handleCollectBankAccountPress}
        title="Collect bank account"
      />
      <Button onPress={handlePayPress} title="Pay" />
    </PaymentScreen>
  );
}

Sauf échec de l’opération, Stripe renvoie un objet SetupIntent présentant l’un des états suivants :

Après avoir confirmé le SetupIntent, un e-mail de confirmation du mandat et les coordonnées bancaires recueillies doivent être envoyés à votre client. Par défaut, Stripe gère cette étape, mais vous pouvez choisir d’envoyer des notifications personnalisées si vous préférez.

Tous les clients ne peuvent pas instantanément vérifier leur compte bancaire. Stripe envoie alors automatiquement un microversement au compte bancaire. Ce versement peut apparaître après un à deux jours ouvrables sur le relevé bancaire en ligne du client. Ce versement peut prendre une des deux formes suivantes :

• Code de libellé : Stripe envoie un microversement unique de 0,01 USD sur le compte bancaire du client avec un descriptorCode unique à 6 chiffres qui commence par SM. Votre client utilise cette chaîne pour vérifier son compte bancaire.
• Montant : Stripe envoie deux microversements distincts sur le compte bancaire du client avec un code de libellé indiquant ACCTVERIFY. Votre client utilise les montants de ces versements pour vérifier son compte bancaire.

Si l’appel confirmSetup effectué à l’étape précédente renvoie un SetupIntent avec l’état requiresAction, le champ next_action du SetupIntent contient des informations utiles à la vérification.

nextAction: {
  type: 'verifyWithMicrodeposits';
  redirectUrl: "https://payments.stripe.com/…",
  microdepositType: "descriptor_code";
  arrivalDate: "1647586800";
}

Si vous avez fourni une adresse e-mail de facturation, Stripe l’utilise pour notifier votre client de la date d’arrivée prévue des versements. L’e-mail envoyé inclut un lien vers la page de vérification hébergée par Stripe, sur laquelle il peut confirmer les montants des versements et effectuer la vérification.

Lorsque vous savez que le payement a l’état requiresActionet que nextAction est de type verifyWithMicrodeposits, vous pouvez finaliser la vérification d’un compte bancaire de deux manières différentes :

1. Contrôlez directement les versements dans votre application en appelant verifyMicrodepositsForSetup après avoir récupéré les montants ou le code du libellé.

import { verifyMicrodepositsForSetup } from '@stripe/stripe-react-native';

export default function MyPaymentScreen() {
  const [verificationText, setVerificationText] = useState('');

  return (
    <TextInput
      placeholder="Descriptor code or comma-separated amounts"
      onChange={(value) => setVerificationText(value.nativeEvent.text)} // Validate and store your user's verification input
    />
    <Button
      title="Verify microdeposit"
      onPress={async () => {
        const { paymentIntent, error } =
          await verifyMicrodepositsForSetup(secret, {
            // Provide either the descriptorCode OR amounts, not both
            descriptorCode: verificationText,
            amounts: verificationText,
          });

        if (error) {
          Alert.alert(`Error code: ${error.code}`, error.message);
        } else if (paymentIntent) {
          Alert.alert('Payment status:', paymentIntent.status);
        }
      }}
    />
  );
}

1. Utilisez la page de vérification hébergée par Stripe que nous vous fournissons automatiquement. Pour cela, utilisez l’URL nextAction[redirectUrl] dans l’objet nextAction (voir ci-dessus) pour rediriger votre client vers la procédure de vérification.

const {error, setupIntent} = await confirmSetup(clientSecret, {
  type: 'USBankAccount',
});

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else if (setupIntent) {
  if (
    setupIntent.status === SetupIntents.Status.RequiresAction &&
    setupIntent?.nextAction?.type === 'verifyWithMicrodeposits'
  ) {
    // Open the Stripe-hosted verification page
    Linking.openURL(setupIntent.nextAction.redirectUrl);
  } else {
    Alert.alert('Payment status:', setupIntent.status);
  }
}

Lorsque le compte bancaire est vérifié avec succès, Stripe renvoie l’objet SetupIntent avec l’état status défini sur Succeeded, et envoie un événement webhook setup_intent.succeeded.

La vérification peut échouer pour plusieurs raisons. L’échec peut survenir de manière synchrone en tant que réponse d’erreur directe, ou de manière asynchrone via un événement webhook setup_intent.setup_failed (voir les exemples suivants).

{
  "error": {
    "code": "payment_method_microdeposit_verification_amounts_mismatch",
    "message": "The amounts provided do not match the amounts that were sent to the bank account. You have {attempts_remaining} verification attempts remaining.",
    "type": "invalid_request_error"
  }
}

Découvrez comment tester des scénarios avec des vérifications instantanées à l’aide de Financial Connections.

Envoyer des e-mails de transaction dans un environnement de test

Une fois que vous avez collecté les coordonnées bancaires et accepté un mandat, envoyez les courriels de confirmation du mandat et de vérification du microversement dans un environnement de bac à sable.

If your domain is {domain} and your username is {username}, use the the following email format to send test transaction emails: {username}+test_email@{domain}.

For example, if your domain is example.com and your username is info, use the format info+test_email@example.com for testing ACH Direct Debit payments. This format ensures that emails route correctly. If you don’t include the +test_email suffix, we won’t send the email.

Numéros de comptes de test

Stripe fournit plusieurs numéros de compte de test et les tokens correspondants que vous pouvez utiliser pour vous assurer que votre intégration pour les comptes bancaires saisis manuellement est prête à passer en mode production.

Avant d’effectuer les transactions de test, vous devez vérifier tous les comptes de test pour lesquels le paiement aboutit ou échoue automatiquement. Pour ce faire, utilisez les codes de libellé ou les montants de microversements de test ci-dessous.

Tester des codes de libellé et des montants de microversements

Pour simuler différents scénarios, utilisez ces montants de microversements ou ces codes de libellé 0.01.

Comportement de règlement des tests

Les transactions de test sont réglées instantanément et ajoutées à votre solde de test disponible. Ce comportement diffère de celui du mode production, où les transactions peuvent prendre plusieurs jours pour être réglées dans votre solde disponible.

Lorsque le SetupIntent aboutit, un nouvel objet PaymentMethod est créé et associé à un objet Customer. Vous pouvez les utiliser pour effectuer des paiements futurs sans devoir demander au client d’indiquer à nouveau son compte bancaire.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "payment_method_types[]"="us_bank_account" \
  -d "confirm"="true"