Accepter un paiement par prélèvement automatique BECS en Australie

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

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 à la confirmation du paiement.

function PaymentScreen() {
  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="Pay" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Côté serveur

Un PaymentIntent est un objet qui représente votre intention d’encaisser un paiement auprès d’un client et qui suit le cycle de vie du processus de paiement étape par étape. Pour commencer, créez un PaymentIntent sur votre serveur et précisez le montant à encaisser ainsi que la devise aud (le prélèvement automatique BECS ne prend pas en charge les autres devises). Si vous disposez déjà d’une intégration utilisant l’API Payment Intents, ajoutez au_becs_debit à la liste des types de moyens de paiement pour votre PaymentIntent.

Pour enregistrer le compte de prélèvement automatique BECS en vue de le réutiliser, définissez le paramètre setup_future_usage sur off_session. Le prélèvement automatique BECS accepte uniquement la valeur off_session pour ce paramètre.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "setup_future_usage"="off_session" \
  -d "currency"="aud" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "payment_method_types[]"="au_becs_debit"

Après la création d’un PaymentIntent, Stripe renvoie un objet PaymentIntent contenant une propriété client_secret. Transmettez la clé secrète du client du côté client.

Côté client

Côté client, demandez un PaymentIntent auprès de votre serveur et sauvegardez la clé secrète du client qu’il contient.

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

  return { clientSecret, error };
};

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le confirmPayment. Une page Web s’affiche dans laquelle le client peut finaliser le paiement sur le site Web ou l’application de sa banque. L’intention de paiement est alors finalisée avec le résultat du paiement.

function PaymentScreen() {
  const { confirmPayment, loading } = useConfirmPayment();

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

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

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.Processing) {
        Alert.alert(
          'Processing',
          `The debit has been successfully submitted and is now processing.`
        );
      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
        Alert.alert(
          'Success',
          `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
        );
      } else {
        Alert.alert('Payment status:', paymentIntent.status);
      }
    }
  };

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

BECS Direct Debit is a delayed notification payment method, which means that funds aren’t immediately available. A BECS Direct Debit PaymentIntent typically remains in a processing state for 2 business days after submission to the BECS network. This submission happens once per day. Once the payment succeeds, the associated PaymentIntent status updates from processing to succeeded.

Les événements suivants sont envoyés lorsque le PaymentIntent change d’état :

Les paramètres setup_future_usage et customer ayant été définis, le PaymentMethod sera associé à l’objet Customer dès lors que le paiement passera à l’état processing. Cette association intervient quelle que soit l’issue du paiement, qu’il aboutisse ou qu’il échoue.

Lorsqu’une tentative de prélèvement automatique échoue, Stripe envoie un événement payment_intent.payment_failed contenant un objet PaymentIntent. L’attribut last_payment_error du PaymentIntent comprend un code et un message décrivant l’échec.

L’échec peut être temporaire ou permanent pour le mandat associé au PaymentIntent rejeté. En cas d’échec permanent, Stripe révoque le mandat pour éviter des coûts supplémentaires. Dans ce cas de figure, lorsque vous avez besoin que le paiement s’effectue, il est de votre responsabilité de contacter votre client pour établir un nouveau mandat en collectant à nouveau ses coordonnées bancaires.

Pour les codes d’échec renvoyés suivants, Stripe change l’état du mandat comme suit :

Nous vous recommandons d’utiliser des webhooks pour obtenir confirmation de l’aboutissement ou de l’échec du paiement et pour informer votre client que l’établissement du mandat et le paiement ont abouti ou qu’ils nécessitent une intervention supplémentaire.

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

Webhook events are triggered when using test account numbers. In a sandbox, PaymentIntents succeed and fail immediately, and as a result, the respective payment_intent.succeeded and payment_intent.payment_failed events trigger immediately as well. In live mode, the webhooks get triggered with the same delays as those of their related PaymentIntent successes and failures.