Accepter un paiement par prélèvement SEPA

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

Pour réutiliser un compte de prélèvement automatique SEPA à l’occasion de paiements ultérieurs, le compte en question doit être associé à un objet Customer.

Vous devez créer 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 permettra de récupérer et d’utiliser ultérieurement les informations du moyen de paiement stockées.

Créez ou récupérez un client afin de l’associer à ce paiement. Ajoutez le code suivant à votre serveur pour créer le nouveau client.

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

Côté serveur

Un PaymentIntent est un objet qui représente votre intention d’encaisser le paiement d’un client et 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 eur (le prélèvement automatique SEPA fonctionne uniquement avec celle-ci). Si vous avez déjà créé une intégration à l’aide de l’API Payment Intents, ajoutez sepa_debit à la liste des types de moyens de paiement pour votre PaymentIntent. Précisez l’ID du client.

Pour enregistrer le compte de prélèvement automatique SEPA en vue de le réutiliser, définissez le paramètre setup_future_usage sur off_session. Le prélèvement automatique SEPA 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 "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "payment_method_types[]"="sepa_debit" \
  -d "metadata[integration_checker]"="sepa_debit_accept_a_payment"

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({
      email,
      currency: 'eur',
      payment_method_types: ['sepa_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

Recueillez l’IBAN du client dans votre formulaire de paiement et affichez le texte d’autorisation standard suivant afin que votre client puisse signer le mandat de manière tacite.

Affichez le texte d’autorisation standard suivant afin que votre client puisse signer le mandat de manière tacite.

Remplacez Rocket Rides par le nom de votre entreprise.

​​La configuration d’un moyen de paiement ou la confirmation d’un PaymentIntent vaut acceptation du mandat. Le client ayant tacitement signé le mandat, vous devez communiquer ces conditions dans votre formulaire ou par e-mail.

export default function SepaPaymentScreen() {
  const [email, setEmail] = useState('');
  const [iban, setIban] = useState('');

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        keyboardType="email-address"
        onChange={(value) => setEmail(value.nativeEvent.text)}
        style={styles.input}
      />
      <TextInput
        placeholder="Iban"
        onChange={(value) => setIban(value.nativeEvent.text.toLowerCase())}
        style={styles.input}
      />
      <Button
        variant="primary"
        onPress={handlePayPress}
        title="Save IBAN"
        loading={loading}
      />
    </Screen>
  );
}

Récupérez la clé secrète du client auprès du PaymentIntent que vous avez créé, puis appelez le confirmPayment.

La clé secrète du client doit être utilisée avec prudence, car elle peut servir à réaliser 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.

export default function SepaPaymentScreen() {
  const [iban, setIban] = useState('');
  const {confirmPayment, loading} = useConfirmPayment();

  const handlePayPress = async () => {
    const {
      clientSecret,
      error: clientSecretError,
    } = await fetchPaymentIntentClientSecret();

    if (clientSecretError) {
      Alert.alert(`Error`, clientSecretError);
      return;
    }

    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name: 'Jenny Rosen',
      email: 'jenny.rosen@example.com',
    };

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'SepaDebit',
      paymentMethodData: {
        billingDetails,
        iban,
      },
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, 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 <Screen>{/* ... */}</Screen>;
}

Le prélèvement automatique SEPA étant un moyen de paiement à notification différée, les fonds ne sont pas disponibles immédiatement. Une fois le paiement envoyé, l’état du PaymentIntent passe de requires_confirmation à processing. À la réussite du paiement, l’état du PaymentIntent passe de processing à succeeded.

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

Nous vous recommandons d’utiliser des webhooks afin de confirmer que le paiement a abouti et pour signaler au client que le paiement a été effectué.

Veuillez noter que, 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 survient quelle que soit l’issue du paiement (succès ou échec).

Pour tester votre formulaire, utilisez les numéros de compte de test pour les prélèvements automatiques SEPA dans votre requête confirmSepaDebitPayment request.