Apple Pay

Obtén un ID de comerciante Apple solicitando un nuevo identificador en el sitio web de desarrolladores de Apple.

Fill out the form with a description and identifier. Your description is for your own records and you can modify it in the future. Stripe recommends using the name of your app as the identifier (for example, merchant.com.{{YOUR_APP_NAME}}).

Crea un certificado para que tu aplicación cifre los datos de pago.

Ve a Configuración de certificados de iOS en el Dashboard, haz clic en Agregar nueva aplicación y sigue la guía.

Descarga un archivo de solicitud de firma de certificado (CSR) para obtener un certificado seguro de Apple que te permita utilizar Apple Pay.

Se debe usar un archivo CSR para emitir exactamente un certificado. Si cambias tu ID de comerciante de Apple, debes ir a la Configuración de certificados de iOS en el Dashboard para obtener una nueva CSR y un nuevo certificado.

Agrega la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña Firma y funcionalidades y agrega la funcionalidad Apple Pay. En este paso, quizá se te solicite iniciar sesión en tu cuenta de desarrollador. Selecciona el ID de comerciante que creaste antes, y tu aplicación estará lista para aceptar Apple Pay.

Habilitar la funcionalidad Apple Pay en Xcode

En el componente StripeProvider, especifica el ID de comerciante Apple que solicitaste con éxito:

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

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

Antes de mostrar Apple Pay como opción de pago en tu aplicación, determina si el dispositivo del usuario acepta Apple Pay y si tiene una tarjeta añadida en su billetera:

import { PlatformPayButton, isPlatformPaySupported } from '@stripe/stripe-react-native';

function PaymentScreen() {
  const [isApplePaySupported, setIsApplePaySupported] = useState(false);

  useEffect(() => {
    (async function () {
      setIsApplePaySupported(await isPlatformPaySupported());
    })();
  }, [isPlatformPaySupported]);

  // ...

  const pay = async () => {
    // ...
  };

  // ...

  return (
    <View>
      {isApplePaySupported && (
        <PlatformPayButton
          onPress={pay}
          type={PlatformPay.ButtonType.Order}
          appearance={PlatformPay.ButtonStyle.Black}
          borderRadius={4}
          style={{
            width: '100%',
            height: 50,
          }}
        />
      )}
    </View>
  );
}

Lado del servidor

Crea un punto de conexión que genere un PaymentIntent con un atributo iamount y currency. Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, no del lado del cliente. Esto impide que clientes malintencionados puedan elegir sus propios precios.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "amount"=1099 \
  -d "currency"="usd"

Lado del cliente

Crea un método que solicite un PaymentIntent desde tu servidor:

function PaymentScreen() {
  // ...
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        some: 'value',
      }),
    });
    const { clientSecret } = await response.json();

    return clientSecret;
  };
  // ...
}

Resolución de problemas

Si estás viendo errores de la API de Stripe al intentar crear tokens, lo más probable es que tengas un problema con tu certificado de Apple Pay. Deberás generar un nuevo certificado y subirlo a Stripe, como se describe en esta página. Asegúrate de usar una solicitud de firma de certificado (CSR) obtenida de tu Dashboard y no una que hayas generado tú. Xcode a menudo almacena en caché incorrectamente los certificados antiguos, por lo que además de generar un nuevo certificado, Stripe también recomienda crear un nuevo ID de comerciante de Apple.

Si recibes el error:

No has agregado tu cuenta de comerciante de Apple a Stripe

es probable que tu aplicación esté enviando datos encriptados con un CSR/Certificado anterior (que no sea de Stripe). Asegúrate de que todos los certificados generados por CSR que no sean de Stripe se revoquen en tu ID de comerciante de Apple. Si esto no resuelve el problema, elimina el ID del comerciante en tu cuenta de Apple y vuelve a crearlo. Luego, crea un nuevo certificado basado en la misma CSR (proporcionada por Stripe) que se utilizó anteriormente. No es necesario que cargues este nuevo certificado en Stripe. Cuando termines, activa y desactiva las Credenciales de Apple Pay en tu aplicación para asegurarte de que se actualicen correctamente.

En tu propiedad PlatformPayButton’ ’s onPress, llama a confirmPlatformPayPayment para abrir una hoja de Apple Pay. Para mostrar los artículos del carrito del cliente en la hoja de pago, pasa los artículos como argumento.

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

function PaymentScreen() {
  // ... see above

  const pay = async () => {
    const clientSecret = await fetchPaymentIntentClientSecret()
    const { error } = await confirmPlatformPayPayment(
      clientSecret,
      {
        applePay: {
          cartItems: [
            {
              label: 'Example item name',
              amount: '14.00',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
            {
              label: 'Total',
              amount: '12.75',
              paymentType: PlatformPay.PaymentType.Immediate,
            },
          ],
          merchantCountryCode: 'US',
          currencyCode: 'USD',
          requiredShippingAddressFields: [
            PlatformPay.ContactField.PostalAddress,
          ],
          requiredBillingContactFields: [PlatformPay.ContactField.PhoneNumber],
        },
      }
    );
    if (error) {
      // handle error
    } else {
      Alert.alert('Success', 'Check the logs for payment intent details.');
      console.log(JSON.stringify(paymentIntent, null, 2));
    }
  };

  // ... see above
}