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

Primero, necesitas una cuenta de Stripe. Regístrate ahora.

El SDK para React Native es de fuente abierta y está completamente 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 (en función del administrador de paquetes que utilices):

yarn add @stripe/stripe-react-native

A continuación, instala otras dependencias necesarias:

• Para iOS, navega hasta el directorio de ios y ejecuta pod install para asegurarte de instalar también las dependencias nativas necesarias.
• Para Android, no necesitas 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 mediante 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 de autocompletar está habilitada de forma predeterminada en iOS, pero para habilitar las sugerencias de autocompletado en Android, debes incluir la dependencia del SDK de Google Places en el archivo 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 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 la visualización de los valores predeterminados, la configuración de los países permitidos, la personalización de la apariencia, 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 añadiendo 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);
  }}
/>