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

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

La trousse SDK de React Native est à code source libre et possède une documentation complète. À l’interne, elle utilise les trousses SDK natives iOS et Android. Pour installer la trousse 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, vous n’avez pas besoin d’installer d’autres dépendances.

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 { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey=
"pk_test_TYooMQauvdEDq54NiTphI7jx"
    >
      // Your app code here
    </StripeProvider>
  );
}

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

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

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

Vous pouvez configurer l’Address Element avec des informations telles que l’affichage des valeurs par défaut, la définition des pays autorisés, la personnalisation de l’apparence, et plus encore. Pour en savoir plus, consultez la liste des options disponibles.

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