Überwachen Sie die Adresseingabe
Verwenden Sie das Address Element, um lokale und internationale Adressen für Ihre Kund/innen zu erfassen.
Stripe einrichten
Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.
Das React Native SDK ist Open Source und vollständig dokumentiert. Intern werden native iOS- und Android-SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):
yarn add @stripe/stripe-react-native
Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:
- Navigieren Sie für iOS zum Verzeichnis ios und führen Sie
pod install
aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Abhängigkeiten installieren. - Für Android müssen Sie keine weiteren Abhängigkeiten installieren.
Stripe-Initialisierung
Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente StripeProvider
oder verwenden Sie die Initialisierungsmethode initStripe
. Nur der veröffentlichbare API-Schlüssel in publishableKey
ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente StripeProvider
initialisiert wird.
import { StripeProvider } from '@stripe/stripe-react-native'; function App() { return ( <StripeProvider publishableKey=
> // Your app code here </StripeProvider> ); }"pk_test_TYooMQauvdEDq54NiTphI7jx"
Notiz
Verwenden Sie Ihre API-Schlüssel für den Test-Modus beim Testen und Entwickeln Ihrer App und Ihre Live-Modus-Schlüssel beim Veröffentlichen Ihrer App.
OptionalVorschläge zur automatischen Vervollständigung von Adressen für Android einrichten
Die automatische Vervollständigung ist standardmäßig unter iOS aktiviert, aber um Autovervollständigungsvorschläge unter Android zu aktivieren, müssen Sie die Google Places SDK-Abhängigkeit in der Datei build.gradle
Ihrer App berücksichtigen:
dependencies { implementation 'com.google.android.libraries.places:places:2.6.0' }
Für Vorschläge zur automatischen Vervollständigung von Adressen ist ein Google Places-API-Schlüssel erforderlich. Befolgen Sie die Einrichtungsanleitung für das Google Places SDK, um Ihren API-Schlüssel zu generieren.
Address Element konfigurieren
Sie können das Address Element mit Details wie der Anzeige von Standardwerten, der Festlegung zulässiger Länder, der Anpassung des Erscheinungsbilds usw. konfigurieren. Weitere Informationen finden Sie in der Liste der verfügbaren Optionen.
<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'} />
Address Element vorlegen und Adressdaten abrufen
Rufen Sie die Adressdetails ab, indem Sie die Eigenschaft visible
auf true
festlegen und Callback-Methoden für die Eigenschaften onSubmit
und onError
hinzufügen:
<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); }} />