Configurer de futurs paiements par carte

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 configurer une carte bancaire en vue de paiements futurs, vous devez l’associer à un client. Lorsque votre client ouvre un compte chez vous, créez un objet Customer, qui permet de réutiliser des moyens de paiement et d’assurer le suivi de plusieurs paiements.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

Lorsque la création aboutit, l’objet Customer est renvoyé. Vous pouvez l’examiner pour identifier l’id du client et stocker cette valeur dans votre base de données pour la récupérer ultérieurement.

Vous pouvez trouver ces clients sur la page Clients du Dashboard.

Un SetupIntent est un objet qui représente votre intention de configurer un moyen de paiement pour encaisser de futurs paiements. Le SetupIntent contient la clé secrète du client, une clé unique que vous devez transmettre à votre application.

Cette clé vous permet de réaliser diverses actions sur le client, comme confirmer la configuration et mettre à jour les informations du moyen de paiement, tout en masquant des données sensibles comme l’attribut customer. Vous pouvez également utiliser la clé secrète du client pour valider et authentifier les informations de la carte par l’intermédiaire des réseaux de cartes. La clé secrète du client est une information sensible : ne la consignez pas, ne l’intégrez pas dans une URL et ne l’exposez à personne d’autre qu’au client.

Côté serveur

Sur votre serveur, créez un endpoint qui crée lui-même un SetupIntent et renvoie la clé secrète du client à votre application.

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

If you only plan on using the card for future payments when your customer is present during the checkout flow, set the usage parameter to on_session to improve authorization rates.

Collectez en toute sécurité les informations de carte du client avec CardField, un composant d’interface utilisateur fourni par le SDK qui collecte le numéro de carte, la date d’expiration, le CVC et le code postal.

Ajoutez le composant CardField à votre page de paiement pour recueillir en toute sécurité les informations de carte de vos clients. Utilisez le rappel onCardChange pour vérifier les informations non sensibles concernant la carte, telles que la marque, et confirmer que les informations sont complètes.

import { CardField, useStripe } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={true}
        placeholders={{
          number: '4242 4242 4242 4242',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
    </View>
  );
}

Pour terminer la configuration, transmettez les informations de carte et de facturation du client à confirmSetupIntent. Vous pouvez accéder à cette méthode avec le hook useConfirmSetupIntent ou useStripe.

function PaymentScreen() {
  // ...

  const { confirmSetupIntent, loading } = useConfirmSetupIntent();

  // ...

  const handlePayPress = async () => {
    // Gather the customer's billing information (for example, email)
    const billingDetails: BillingDetails = {
      email: 'jenny.rosen@example.com',
    };
    // Create a setup intent on the backend
    const clientSecret = await createSetupIntentOnBackend();
    const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      //Handle the error
    }
    // ...
  };

  return (
    <View>
      // ...
      <Button onPress={handlePayPress} title="Save" loading={loading} />
    </View>
  );
}

Certains moyens de paiement requièrent des étapes d’authentification supplémentaires pour finaliser un paiement. Le SDK gère le flux de confirmation de paiement et d’authentification, ce qui peut impliquer d’afficher des écrans supplémentaires, nécessaires pour l’authentification. Pour tester le processus d’authentification, utilisez la carte de test 4000 0025 0000 3155 avec un CVC, un code postal et une date d’expiration postérieure à la date du jour.

Lorsque le SetupIntent réussit, l’ID PaymentMethod généré (dans setupIntent.paymentMethodID) est enregistré dans l’objet Customer fourni.

Au moment de débiter votre client hors session, utilisez les ID de client et de PaymentMethod afin de créer un PaymentIntent. Pour trouver une carte à débiter, listez les PaymentMethods associés à votre client.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Lorsque vous avez les identifiants Client et PaymentMethod, créez un PaymentIntent avec le montant et la devise du paiement. Réglez quelques autres paramètres pour effectuer un paiement hors session :

• Assignez la valeur true à off_session afin d’indiquer que le client n’est pas dans votre tunnel de paiement lors de cette tentative de paiement. Si une authentification est requise, le PaymentIntent générera une erreur.
• Assignez la valeur true à la propriété confirm du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
• Renseignez l’ID du PaymentMethod dans payment_method et l’ID du client dans customer.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d amount=1099 \
  -d currency=usd \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d off_session=true \
  -d confirm=true

Démarrer un flux de récupération

Si l’état de l’objet PaymentIntent est différent, le paiement n’a pas abouti et la requête échoue. Invitez votre client à revenir dans l’application (par e-mail, SMS ou notification Push, par exemple) afin de terminer le paiement. Nous vous recommandons de créer dans votre application un flux de récupération indiquant le motif de l’échec du paiement initial et permettant au client de réessayer.

Dans votre flux de récupération, récupérez le PaymentIntent à l’aide de sa clé secrète de client, puis vérifiez l’erreur lastPaymentError du PaymentIntent pour déterminer le motif de l’échec du paiement. Pour les erreurs de carte, vous pouvez présenter à l’utilisateur le dernier message d’erreur du paiement. Dans les autres cas, affichez un message d’échec générique.

function PaymentScreen() {
  // ...

  const {retrievePaymentIntent} = useStripe();

  // ...

  const handleRecoveryFlow = async () => {
    const {paymentIntent, error} = await retrievePaymentIntent(clientSecret);

    if (error) {
      Alert.alert(`Error: ${error.code}`, error.message);
    } else if (paymentIntent) {
      // Default to a generic error message
      const failureReason = 'Payment failed, try again.';
      if (paymentIntent.lastPaymentError.type === 'Card') {
        failureReason = paymentIntent.lastPaymentError.message;
      }
    }
  };

  return (
    <View>
      // ...
      <Button
        onPress={handleRecoveryFlow}
        title="Recovery flow"
        loading={loading}
      />
    </View>
  );
}

Permettre au client de réessayer

Votre flux de récupération doit permettre au client de mettre à jour ou supprimer sa carte enregistrée et de réessayer le paiement. Suivez les mêmes étapes que pour l’acceptation du paiement d’origine, à une différence près : confirmez l’objet PaymentIntent d’origine qui a échoué en réutilisant sa clé secrète de client plutôt que d’en créer une nouvelle.

Si le paiement échoue parce qu’il nécessite une authentification, réessayez avec l’objet PaymentMethod existant plutôt que d’en créer un nouveau.

function PaymentScreen() {
  // ...

  const {retrievePaymentIntent} = useStripe();

  // ...

  const handleRecoveryFlow = async () => {
    const {paymentIntent, error} = await retrievePaymentIntent(clientSecret);

    if (error) {
      Alert.alert(`Error: ${error.code}`, error.message);
    } else if (paymentIntent) {
      // Default to a generic error message
      let failureReason = 'Payment failed, try again.';
      if (paymentIntent.lastPaymentError.type === 'Card') {
        failureReason = paymentIntent.lastPaymentError.message;
      }

      // If the last payment error is authentication_required, let the customer
      // complete the payment without asking them to reenter their details.
      if (paymentIntent.lastPaymentError?.code === 'authentication_required') {
        // Let the customer complete the payment with the existing PaymentMethod
        const {error} = await confirmPayment(paymentIntent.clientSecret, {
          paymentMethodType: 'Card',
          paymentMethodData: {
            billingDetails,
            paymentMethodId: paymentIntent.lastPaymentError?.paymentMethod.id,
          },
        });

        if (error) {
          // handle error
        }
      } else {
        // Collect a new PaymentMethod from the customer
      }
    }
  };

  return (
    <View>
      // ...
      <Button
        onPress={handleRecoveryFlow}
        title="Recovery flow"
        loading={loading}
      />
    </View>
  );
}

À ce stade, vous devriez avoir une intégration qui :

1. Collecte les informations de carte bancaire sans débiter le client avec un SetupIntent
2. Débite la carte hors session et dispose d’un flux de récupération permettant de gérer les refus de paiement et les demandes d’authentification

Pour vérifier que votre intégration est prête, vous avez à votre disposition plusieurs cartes de test. Vous pouvez les utiliser en mode test avec n’importe quel CVC, code postal et date d’expiration non échue.

Voir la liste complète des cartes de test.