Utiliser iDEAL pour configurer de futurs paiements 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 { 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 lorsqu’un client crée un compte auprès de votre entreprise et associez-le à votre représentation interne de son compte. Vous pourrez ainsi récupérer et utiliser ultérieurement les informations enregistrées sur son moyen de paiement.

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

Créez un SetupIntent avec l’ID du client et réglez le paramètre payment_method_types sur ideal. Le SetupIntent suit les étapes du processus de configuration. Dans le cas d’iDEAL, ceci comprend l’obtention d’un mandat de prélèvement automatique SEPA auprès du client et le suivi de sa validité.

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

Dans votre application, recueillez le nom et le prénom de votre client, son adresse e-mail et le nom de sa banque(par exemple, abn_amro).

export default function IdealPaymentScreen() {
  const [name, setName] = useState();
  const [bankName, setBankName] = useState();
  const [email, setEmai] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Email"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="Bank name"
        onChange={(value) => setBankName(value.nativeEvent.text)}
      />
    </Screen>
  );
}

​​Pour traiter des paiements par prélèvement SEPA, vous devez faire accepter le mandat par votre client. 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.

Récupérez la clé secrète du client auprès du SetupIntent que vous avez créé, puis appelez leconfirmSetupIntent. Une vue Web s’affiche pour permettre au client de finaliser la configuration sur le site Web ou l’application de sa banque. Ensuite, la promesse aboutit avec le résultat du SetupIntent.

export default function IdealPaymentScreen() {
  const [name, setName] = useState();
  const [bankName, setBankName] = useState();
  const [email, setEmai] = useState();

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

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

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

    return <Screen>{/* ... */}</Screen>;
}

Lorsque vous devez à nouveau débiter votre client, créez un nouveau PaymentIntent. Pour obtenir l’ID du moyen de paiement Prélèvement automatique SEPA, récupérez le SetuptIntent précédent et développez le champ latest_attempt où vous trouverez l’ID generated_sepa_debit dans payment_method_details.

curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_attempt

Créez un PaymentIntent en utilisant les identifiants du prélèvement SEPA et du client.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

Utiliser vos clés API de test pour confirmer le SetupIntent. Après avoir confirmé, vous êtes redirigé vers une page de test avec des options pour valider ou non la configuration du moyen de paiement.

• Cliquez sur Autorisation du paiement test pour tester le cas où la configuration réussit. Le SetupIntent passe de requires_action à succeeded.
• Cliquez sur Échec du paiement test pour tester le cas où le client ne parvient pas à s’authentifier. Le SetupIntent passe de requires_action à requires_payment_method.

Tester votre intégration pour le prélèvement SEPA