Recopila las direcciones físicas y los números de teléfono

Primero, necesitas una cuenta de Stripe. Inscríbete ahora.

El SDK para React Native es de código abierto y está totalmente documentado. Internamente, utiliza los SDK nativos de iOS y Android. Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (según el administrador de paquetes que utilices):

yarn add @stripe/stripe-react-native

A continuación, instala otras dependencias necesarias:

• Para iOS, navega hasta el directorio ios y ejecuta pod install para asegurarte de instalar también las dependencias nativas necesarias.
• Para Android, no es necesario instalar más dependencias.

Inicialización de Stripe

Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente StripeProvider o usa el método de inicialización initStripe. Solo se requiere la clave publicable de la API en publishableKey. El siguiente ejemplo muestra cómo inicializar Stripe usando el componente StripeProvider.

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

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

La función para autocompletar está habilitada de forma predeterminada en iOS, pero para habilitar estas sugerencias en Android, debes incluir la dependencia del SDK de Google Places en el build.gradle de tu aplicación:

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

Las sugerencias para autocompletar direcciones requieren una clave de API de Google Places. Sigue la guía de configuración del SDK de Google Places para generar tu clave API.

Puedes configurar el Address Element con detalles como mostrar valores predeterminados, establecer países permitidos, personalizar el aspecto, etc. Consulta la lista de opciones disponibles para obtener más información.

<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 los datos de la dirección estableciendo la propiedad visible en true y agregando métodos de devolución de llamada para las propiedades onSubmit y 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);
  }}
/>