Accepter un paiement 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 PaymentIntent est un objet qui représente votre intention d’encaisser le paiement d’un client et qui suit le cycle de vie du processus de paiement étape par étape.

Côté serveur

Tout d’abord, créez un PaymentIntent sur votre serveur et spécifiez le montant à collecter et la devise usd. Si vous possédez déjà une autre intégration utilisant l’API Payment Intents, ajoutez us_bank_account à la liste des types de moyens de paiement de votre PaymentIntent. Précisez aussi l’ID de l’objet Customer.

Si vous souhaitez réutiliser le moyen de paiement dans le futur, fournissez le paramètre setup_future_usage avec la valeur off_session.

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/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d setup_future_usage=off_session \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]"=us_bank_account

Côté client

Un PaymentIntent contient une clé secrète du client. Au lieu de transmettre la totalité de l’objet PaymentIntent, 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 PaymentIntent 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>',
        product: '<PRODUCT_ID>',
      }),
    });
    const {clientSecret} = await response.json();

    return clientSecret;
  };

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

Plutôt que d’envoyer la totalité de l’objet PaymentIntent 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 collectBankAccountForPayment pour recueillir les coordonnées bancaires, créer un PaymentMethod, et rattacher ce PaymentMethod au PaymentIntent. Vous devez inclure le nom du titulaire du compte dans le paramètre billingDetails pour créer un PaymentMethod ACH Direct Debit.

import {collectBankAccountForPayment} 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 {paymentIntent, error} = await collectBankAccountForPayment(
      clientSecret,
      {
        paymentMethodType: 'USBankAccount',
        paymentMethodData: {
          billingDetails: {
            name: "John Doe",
          },
        },
      },
    );

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert('Payment status:', paymentIntent.status);
      if (paymentIntent.status === PaymentIntents.Status.RequiresConfirmation) {
        // The next step is to call `confirmPayment`
      } else if (
        paymentIntent.status === PaymentIntents.Status.RequiresAction
      ) {
        // The next step is to call `verifyMicrodepositsForPayment`
      }
    }
  };

  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 PaymentIntent.

Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), donnez-lui un moyen de revenir automatiquement dans votre application. De nombreux types de moyens de paiement nécessitent une URL de redirection. Si vous n’en fournissez pas, nous ne pourrons pas présenter à vos utilisateurs les moyens de paiement nécessitant une URL de redirection, même si vous les avez activés.

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 initier le paiement, vous devez obtenir l’autorisation 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 PaymentIntent. Utilisez confirmPayment pour confirmer l’intention de payement.

import {confirmPayment} 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, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'USBankAccount',
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.Processing) {
        // The debit has been successfully submitted and is now processing
      } else if (
        paymentIntent.status === PaymentIntents.Status.RequiresAction &&
        paymentIntent?.nextAction?.type === 'verifyWithMicrodeposits'
      ) {
        // The payment must be verified with `verifyMicrodepositsForPayment`
      } else {
        Alert.alert('Payment status:', paymentIntent.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 PaymentIntent présentant l’un des états suivants :

Après avoir confirmé le PaymentIntent, 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 confirmPayment effectué à l’étape précédente renvoie un PaymentIntent avec l’état requiresAction, le champ nextAction du PaymentIntent 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 verifyMicrodepositsForPayment après avoir récupéré les montants ou le code du libellé.

import { verifyMicrodepositsForPayment } 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 verifyMicrodepositsForPayment(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, paymentIntent} = await confirmPayment(clientSecret, {
  paymentMethodType: 'USBankAccount',
});

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

Dès que le compte bancaire a été vérifié, Stripe renvoie l’objet PaymentIntent avec l’état status défini sur Processing, et envoie un événement webhook payment_intent.processing.

La vérification peut échouer pour plusieurs raisons. L’échec peut se produire de manière synchrone comme une réponse d’erreur directe, ou de manière asynchrone à travers un événement webhook payment_intent.payment_failed (voir les exemples ci-après).

{
  "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"
  }
}

Le prélèvement automatique ACH est un moyen de paiement à notification différée. Ceci signifie que pour recevoir une notification du succès ou de l’échec d’un paiement, il faut compter jusqu’à quatre jours ouvrables après le déclenchement du prélèvement sur le compte du client.

Initialement, le PaymentIntent que vous créez présente l’état processing. Une fois le paiement abouti, l’état du PaymentIntent passe de processing à succeeded.

Nous vous recommandons d’utiliser des webhooks afin de confirmer que le paiement a réussi et d’informer le client que le paiement a été effectué. Vous pouvez également afficher les événements sur le Dashboard Stripe.

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.

Si votre domaine est {domain} et que votre nom d’utilisateur est {username}, utilisez le format d’e-mail suivant pour envoyer des e-mails de transaction de test : {username}+test_email@{domain}.

Par exemple, si votre domaine est example.com et que votre nom d’utilisateur est info, utilisez le format info+test_email@example.com pour tester les paiements ACH Direct Debit. Ce format garantit que les e-mails sont acheminés correctement. Si vous n’incluez pas le suffixe +test_email, nous n’enverrons pas l’e-mail.

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.