Accepter un paiement

Tout d’abord, il vous faut un compte Stripe. Inscrivez-vous.

Côté serveur

Pour cette intégration, votre serveur doit être doté de points de terminaison qui communiquent avec l’API Stripe. Utilisez les bibliothèques officielles pour accéder à l’API Stripe à partir de 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

La trousse SDK de React Native est un logiciel libre très bien documenté. À l’interne, elle utilise les trousses SDK pour iOS natif et pour Android. Pour installer la trousse SDK de React Native, exécutez l’une des commandes suivantes dans le répertoire de votre projet (qui dépend du gestionnaire de progiciel 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 la fonctionnalité 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, enveloppez votre écran de paiement avec le composant StripeProvider ou utilisez la méthode d’initialisation initStripe. Seule la clé publiable de l’API est requise dans l’objet publishableKey. 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>
  );
}

Accédez aux paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un PaymentIntent.

Par défaut, Stripe active les cartes et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des modes de paiement pour en savoir plus sur la prise en charge des produits et des modes de paiement, et notre page de tarification pour prendre connaissance des frais que nous appliquons.

Cette intégration utilise trois objets de l’API Stripe :

1. PaymentIntent : Pour représenter votre intention d’encaisser le paiement d’un client, Stripe utilise cet objet qui suit les tentatives de débit et les changements d’état du paiement tout au long du processus.

2. (Facultatif) Client : Pour configurer un mode de paiement pour les paiements futurs, vous devrez l’associer à un client. Créez un objet Customer lorsque votre client crée un compte auprès de votre entreprise. Si votre client effectue un paiement en tant qu’invité, vous pourrez créer un objet Customer avant le paiement, puis l’associer ultérieurement à votre représentation interne du compte du client.

3. (Facultatif) Clé éphémère du client : L’objet Customer contient des informations sensibles qu’il n’est pas possible de récupérer directement à partir d’une application. Une clé éphémère permet d’accorder à la trousse SDK un accès temporaire à l’objet Customer.

Pour des raisons de sécurité, votre application ne peut pas créer ces objets. Ajoutez plutôt un point de terminaison sur votre serveur qui :

1. Récupère l’objet Customer ou en crée un nouveau.
2. Crée une clé éphémère pour l’objet Customer.
3. Création d’un PaymentIntent avec les paramètres amount, currency, customer. Vous pouvez également inclure le paramètre automatic_payment_methods. Stripe active sa fonctionnalité par défaut dans la dernière version de l’API.
4. Renvoi de la clé secrète du client du Payment Intent, de l’objet secret de la clé éphémère, de l’id du client et de votre clé publiable à votre application.

Les modes de paiement présentés aux clients lors du processus de paiement sont également compris dans le PaymentIntent. Les modes de paiement peuvent être récupérés par Stripe à partir de vos paramètres Dashboard, ou vous pouvez les ajouter manuellement. Quelle que soit l’option que vous choisissez, sachez que la devise transmise dans le PaymentIntent filtre les modes de paiement présentés au client. Par exemple, si vous transmettez eur dans le PaymentIntent et que vous avez activé OXXO dans le Dashboard, OXXO ne sera pas présenté au client, car OXXO ne prend pas en charge les paiements eur.

À moins que votre intégration ne nécessite du code pour la présentation des modes de paiement, Stripe vous recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les modes de paiement et d’autres paramètres pour déterminer la liste des modes de paiement pris en charge. Les modes de paiement qui augmentent le taux de conversion et qui sont les plus pertinents pour la devise et le lieu de résidence du client sont priorisés.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-05-28.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

Avant d’afficher le Payment Element mobile, votre page de paiement doit :

• Présenter les produits commandés et le montant total des achats
• Collecter les éventuelles informations de livraison requises
• Inclure un bouton de paiement pour afficher l’interface utilisateur de Stripe

Au cours du processus de paiement de votre application, effectuez une demande réseau auprès du point de terminaison de l’application dorsale que vous avez créé à l’étape précédente, puis appelez initPaymentSheet à partir du hook useStripe.

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Lorsque votre client touche le bouton Paiement, appelez presentPaymentSheet() pour ouvrir le formulaire de paiement. Une fois la transaction finalisée, le formulaire se ferme et la promesse aboutit avec le résultat facultatif StripeError<PaymentSheetError>.

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

En l’absence d’erreur, informez l’utilisateur que l’opération est terminée (par exemple, en affichant un écran de confirmation de commande).

Si vous définissez allowsDelayedPaymentMethods à true, les modes de paiement à notification différée, comme les comptes bancaires américains, seront acceptés. Pour ces modes de paiement, l’état final du paiement n’est pas connu à la fin de la PaymentSheet. À la place, il réussit ou échoue plus tard. Si vous prenez en charge ces types de modes de paiement, informez le client que sa commande est confirmée et ne la traitez (par exemple, n’expédiez son produit) qu’une fois le paiement reçu.

Lorsqu’un client quitte votre application (par exemple, pour s’authentifier dans Safari ou dans son application bancaire), fournissez-lui un moyen d’y revenir automatiquement. De nombreux types de modes de paiement nécessitent une URL de redirection. Si vous ne la fournissez pas, nous ne pourrons pas présenter à vos utilisateurs des modes de paiement nécessitant une URL de redirection, même si vous les avez activés.

Pour fournir une URL de redirection :

1. Enregistrer une URL personnalisée. Les liens universels ne sont pas pris en charge.
2. Configurer votre URL personnalisée.
3. Configurez votre composant racine pour qu’il transfère l’URL à la trousse SDK Stripe, comme illustré ci-dessous.

import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

De plus, définissez le returnURL lorsque vous appelez la méthode initPaymentSheet :

await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});

Pour en savoir plus sur les schémas d’URL natifs, consultez la documentation Android ou iOS.

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide sur les webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par courriel à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Écoutez ces événements plutôt que d’attendre un rappel de votre client. Du côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant même l’exécution du rappel, et des clients malveillants pourraient manipuler la réponse. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule intégration.

En plus de gérer l’événement payment_intent.succeeded, nous vous recommandons de gérer les autres événements suivants lorsque vous encaissez des paiements à l’aide du Payment Element :

Consultez la section Test pour obtenir des informations supplémentaires sur la manière de tester votre intégration.