Enregistrer les coordonnées de prélèvement SEPA pour les paiements futurs

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 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. En associant l’ID de l’objet Customer à votre propre représentation interne de ce client, vous pourrez par la suite récupérer et utiliser les informations stockées concernant son moyen de paiement. Si votre client n’a pas créé de compte, il vous est toujours possible de lui créer un objet Customer sans attendre, que vous associerez ultérieurement à votre représentation interne de ce compte client.

Créez ou récupérez un objet Customer afin de l’associer à ces informations de paiement. Ajoutez le code suivant à votre serveur pour créer un objet Customer.

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

Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement de votre client en vue de paiements ultérieurs, et suit les étapes de cette configuration. Dans le cas d’un prélèvement SEPA, cet objet prévoit l’obtention d’un mandat auprès du client et la vérification de la validité de l’IBAN.

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

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

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 vaut acceptation du mandat. Le client ayant tacitement signé le mandat lorsqu’il a accepté ces conditions, vous devez communiquer ces dernières dans votre formulaire ou par e-mail.

export default function SepaSetupFuturePaymentScreen() {
  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 SetupIntent que vous avez créé, puis appelez confirmSetupIntent.

La clé secrète du client doit être manipulée avec prudence, car elle permet de mettre en œuvre la configuration. 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 SepaSetupFuturePaymentScreen() {
  const [iban, setIban] = useState('');
  const {confirmSetupIntent, loading} = useConfirmSetupIntent();

  const handlePayPress = async () => {
    const clientSecret = await createSetupIntentOnBackend(email);

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

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

    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 <Screen>{/* ... */}</Screen>;
}

Vous pouvez tester votre formulaire en utilisant les codes IBAN ci-dessous avec votre requête confirmSepaDebitSetup. Les informations de paiement sont collectées pour chaque IBAN, mais présentent un comportement différent lorsque le moyen de paiement est débité.

Testez les numéros IBAN