Physische Adressen und Telefonnummern erfassen

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

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.

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'}
/>

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