Collecter les adresses physiques et les numéros de téléphone

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 requises :

• 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, vous n’avez plus besoin d’installer de dépendances.

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() {
  return (
    <StripeProvider
      publishableKey=
"pk_test_TYooMQauvdEDq54NiTphI7jx"
    >
      // Your app code here
    </StripeProvider>
  );
}

Sur iOS, la saisie semi-automatique est activée par défaut. Pour activer les suggestions de saisie semi-automatique sur Android, vous devez inclure la dépendance SDK Google Places dans le fichier build.gradle de votre application :

dependencies {
    implementation 'com.google.android.libraries.places:places:2.6.0'
}

Les suggestions de saisie semi-automatique d’adresse nécessitent une clé API Google Places. Suivez le guide de configuration du SDK Google Places pour générer votre clé API.

Vous pouvez configurer l’Address Element en ajoutant des détails tels que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, etc. Reportez-vous à la liste des options disponibles pour obtenir de plus amples informations.

<AddressSheet
  appearance={{
    colors: {
      primary: '#F8F8F2',
      background: '#272822'
    }
  }}
  defaultValues={{
    phone: '111-222-3333',
    address: {
      country: 'United States',
      city: 'San Francisco',
    },
  }}
  additionalFields={{
    phoneNumber: 'required',
  }}
  allowedCountries={['US', 'CA', 'GB']}
  primaryButtonTitle={'Use this address'}
  sheetTitle={'Shipping Address'}
  googlePlacesApiKey={'(optional) YOUR KEY HERE'}
/>

Récupérez les informations de l’adresse en définissant la propriété visible sur true et en ajoutant des méthodes de rappel pour les propriétés onSubmit et onError :

<AddressSheet
  visible={true}
  onSubmit={async (addressDetails) => {
    // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);

    // Handle result and update your UI
  }}
  onError={(error) => {
    if (error.code === AddressSheetError.Failed) {
      Alert.alert('There was an error.', 'Check the logs for details.');
      console.log(err?.localizedMessage);
    }
   // Make sure to set `visible` back to false to dismiss the address element.
    setAddressSheetVisible(false);
  }}
/>