Enregistrer les informations de prélèvement automatique BECS en Australie en vue de futurs paiements

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 { 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>
  );
}

Pour que la réutilisation d’un compte de prélèvement automatique BECS soit possible pour de futurs paiements, celui-ci doit être associé à un objet Customer.

Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. 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 du moyen de paiement stockées.

Créez ou récupérez un objet Customer afin de l’associer à ce paiement. Pour créer un nouvel objet Customer, ajoutez le code ci-après sur votre serveur.

curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

Vous pouvez recueillir de manière sécurisée les informations de paiement par prélèvement automatique BECS en Australie avec AuBECSDebitForm, un composant intégré d’interface utilisateur fourni par le SDK. AuBECSDebitForm fournit une interface utilisateur permettant aux clients de saisir leur nom, leur adresse e-mail, leur numéro BSB et leur numéro de compte, en plus d’afficher les conditions de prélèvement automatique BECS en Australie.

Ajoutez à l’écran un composant AuBECSDebitForm avec le nom de votre entreprise comme propriété. Vous pouvez également personnaliser ce composant aux couleurs de votre application au moyen de la propriété formStyle. Collectez les informations du formulaire avec la propriété onComplete.

function BECSSetupFuturePaymentScreen() {
  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Côté serveur

Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de paiements ultérieurs. Le SetupIntent suivra les étapes de ce processus de configuration. Dans le cas d’un prélèvement automatique BECS, ces étapes prévoient notamment l’obtention d’un mandat auprès du client et le suivi de sa validité tout au long de son cycle de vie.

Créez un SetupIntent sur votre serveur avec payment_method_types défini sur au_becs_debit et spécifiez l’id  :

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="au_becs_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

Après la création d’un SetupIntent sur votre serveur, vous pouvez associer l’ID du SetupIntent au client de la session active dans le modèle de données de votre application. Vous pourrez ainsi récupérer l’information après avoir collecté un moyen de paiement.

L’objet SetupIntent renvoyé contient une propriété client_secret. Transmettez la clé secrète du client à l’application côté client pour continuer le processus de configuration.

Côté client

Côté client, demandez un SetupIntent auprès de votre serveur et sauvegardez la clé secrète du client.

const fetchSetupIntentClientSecret = async (customerEmail: string) => {
  const response = await fetch(`${API_URL}/create-setup-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: customerEmail,
      payment_method_types: ['au_becs_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

Récupérez la clé secrète du client dans le SetupIntent que vous avez créé, puis appelez confirmSetupIntent. Une vue Web s’affiche pour permettre au client de mener à bien la configuration sur le site Web ou l’application de sa banque.

function BECSSetupFuturePaymentScreen() {
  const { confirmSetupIntent } = useConfirmSetupIntent();

  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  const handlePayPress = async () => {
    const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'AuBecsDebit',
      paymentMethodData: {
        formDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Setup intent confirmation error', error.message);
    } else if (setupIntent) {
      Alert.alert(
        `Success: Setup intent created. Intent status: ${setupIntent.status}`
      );
    }
  };

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Testez votre formulaire en utilisant le numéro BSB de test 000-000 et l’un des numéros de compte de test ci-dessous lors de votre appel confirmSetupIntent.