Raccogliere gli indirizzi fisici e i numeri di telefono

Innanzitutto, devi creare un account Stripe. Registrati ora.

L’SDK React Native è open source e completamente documentato. Internamente, utilizza gli SDK nativi per iOS e Android. Per installare l’SDK React Native di Stripe, esegui uno dei seguenti comandi nella directory del progetto (a seconda del gestore di pacchetti utilizzato):

yarn add @stripe/stripe-react-native

Poi, installa alcune altre dipendenze necessarie:

• Per iOS, vai alla directory ios ed esegui pod install per assicurarti di installare anche le dipendenze native necessarie.
• Per Android, non devi installare altre dipendenze.

Inizializzazione di Stripe

Per inizializzare Stripe nell’app React Native, esegui il wrapping della schermata di pagamento con il componente StripeProvider oppure utilizza il metodo di inizializzazione initStripe. È richiesta solo la chiave pubblicabile dell’API in publishableKey. L’esempio seguente spiega come inizializzare Stripe utilizzando il componente StripeProvider.

import { StripeProvider } from '@stripe/stripe-react-native';

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

Il completamento automatico è abilitato per impostazione predefinita su iOS, ma per abilitare i suggerimenti di completamento automatico su Android, devi includere la dipendenza di Google Places SDK nel file build.gradle dell’app:

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

I suggerimenti di completamento automatico dell’indirizzo richiedono una chiave API Google Places. Segui la guida alla configurazione di Google Places SDK per generare la tua chiave API.

Puoi configurare Address Element con informazioni quali la visualizzazione dei valori predefiniti, l’impostazione dei Paesi consentiti, la personalizzazione dell’aspetto e così via. Per ulteriori informazioni, consulta l’elenco delle opzioni disponibili.

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

Recupera i dettagli dell’indirizzo impostando la proprietà visible su true e aggiungendo metodi di callback per le proprietà onSubmit e 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);
  }}
/>