Intégrer la Fiche client

Pour commencer, vous devez créer un compte Stripe. Inscrivez-vous maintenant.

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

Affichez vos 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 SetupIntent.

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

Créez deux endpoints sur votre serveur : l’un pour récupérer la clé éphémère d’un client et l’autre pour créer un SetupIntent afin d’enregistrer un nouveau moyen de paiement dans l’objet Customer.

1. Créez un endpoint pour renvoyer un ID de client et une clé éphémère associée. Vous pouvez consulter la version API utilisée par le SDK ici.

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

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

1. Créez un endpoint pour renvoyer un SetupIntent configuré avec l’ID du Client.

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

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

Si vous prévoyez uniquement d’utiliser le moyen de paiement pour des paiements ultérieurs lorsque votre client est dans le tunnel de paiement, définissez le paramètre usage sur on_session pour améliorer les taux d’autorisation.

Configurez ensuite la fiche client en fournissant les paramètres souhaités à CustomerSheetBeta.initialize.

import {CustomerSheetBeta} from '@stripe/stripe-react-native';

const {error} = await CustomerSheetBeta.initialize({
  setupIntentClientSecret: 'SETUP-INTENT',
  customerEphemeralKeySecret: 'EPHEMERAL-KEY',
  customerId: 'CUSTOMER-ID',
  headerTextForSelectionScreen: 'Manage your payment method',
  returnURL: 'my-return-url://',
});