Écouter la saisie d'adresse
Utilisez l’Address Element pour recueillir les adresses locales et internationales de vos clients.
Configurer Stripe
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é API publique dans publishableKey
est requise. L’exemple suivant montre comment initialiser Stripe à l’aide du composant StripeProvider
.
import { StripeProvider } from '@stripe/stripe-react-native'; function App() { return ( <StripeProvider publishableKey=
> // Your app code here </StripeProvider> ); }"pk_test_TYooMQauvdEDq54NiTphI7jx"
Note
Utilisez vos clés API du mode test lors de vos activités de test et de développement, et vos clés du mode production pour la publication de votre application.
FacultatifConfigurer des suggestions de remplissage automatique de l'adresse pour Android
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.
Configurer l'Address Element
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'} />
Présenter l'Address Element et récupérer les détails de l'adresse
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); }} />