Coletar endereços físicos e números de telefone

Primeiro, você precisa de uma conta Stripe. Cadastre-se agora.

O SDK do React Native é de código aberto e totalmente documentado. Internamente, ele utiliza os SDKs nativos para iOS e Android. Para instalar o SDK do React Native da Stripe, execute um dos seguintes comandos no diretório do seu projeto (dependendo de qual gerenciador de pacotes você usa):

yarn add @stripe/stripe-react-native

Em seguida, instale algumas outras dependências necessárias:

• Para iOS, vá até o diretório ios e execute pod install para garantir a instalação das dependências nativas necessárias.
• Para Android, você não precisa instalar mais dependências.

Inicialização da Stripe

Para inicializar a Stripe no aplicativo React Native, insira sua tela de pagamento com o componente StripeProvider ou use o método de inicialização initStripe. Somente a chave da API publicável em publishableKey é necessária. O exemplo a seguir mostra como inicializar Stripe usando o componente StripeProvider.

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

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

O preenchimento automático é habilitado por padrão no iOS, mas para habilitar as sugestões de preenchimento automático no Android, você precisa incluir a dependência do SDK do Google Places no build.gradle do seu aplicativo:

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

As sugestões de preenchimento automático de endereços exigem uma chave de API do Google Places. Siga o guia de configuração do SDK do Google Places para gerar sua chave de API.

Você pode configurar o Address Element com detalhes como exibir valores padrão, definir países permitidos, personalizar a aparência e assim por diante. Veja a lista de opções disponíveis para obter mais informações.

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

Recupere os detalhes do endereço definindo a propriedade visible como true e adicionando métodos de retorno de chamada para as propriedades 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);
  }}
/>