Acepta pagos con tarjeta sin webhooks

Lado del servidor

Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu servidor:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Lado del cliente

El SDK para React Native es de código abierto y está plenamente documentado. Internamente, utiliza SDK para iOS nativo 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 de ios y ejecuta pod install para asegurarte de instalar también las dependencias nativas necesarias.
• Para Android, no hay más dependencias para instalar.

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 { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

Recopila los datos de la tarjeta del cliente de manera segura con CardField, un componente de interfaz de usuario (IU) proporcionado por el SDK que recopila el número de tarjeta, la fecha de vencimiento, el CVC y el código postal.

Agrega el componente CardField a tu pantalla de pago para recopilar los datos de la tarjeta de tus clientes de forma segura. Usa la devolución de llamada de onCardChange para examinar la información no confidencial de la tarjeta, como por ejemplo la marca, y comprobar si los datos están al completo.

import { CardField, useStripe } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={true}
        placeholders={{
          number: '4242 4242 4242 4242',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
    </View>
  );
}

Ejecuta tu aplicación y asegúrate de que en la página de finalización de compra, aparezca el componente CardField.

Cuando tu cliente esté listo para finalizar el proceso de compra, crea un PaymentMethod con los datos recopilados por el componente CardField.

import { CardField, useStripe } from '@stripe/stripe-react-native';
function PaymentScreen() {
  const { createPaymentMethod, handleNextAction } = useStripe();
  const pay = () => {
    // Gather customer billing information (for example, email)
    const billingDetails: CreatePaymentMethod.BillingDetails = {
      email: 'email@stripe.com',
      phone: '+48888000888',
      addressCity: 'Houston',
      addressCountry: 'US',
      addressLine1: '1459  Circle Drive',
      addressLine2: 'Texas',
      addressPostalCode: '77063',
    };
    // Create payment method
    const { paymentMethod, error } = await createPaymentMethod({
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails,
      }
    });
  };
  // ...
}

Si el PaymentMethod se creó correctamente, envía su ID a tu servidor.

// ...
const pay = () => {
  // ...
  // Send the PaymentMethod to your server to create a PaymentIntent
  const response = await fetch(`/pay`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ paymentMethodId: paymentMethod.id }),
  });
  const { error, requires_action, payment_intent_client_secret } = await response.json();
  if (error) {
    // Error creating or confirming PaymentIntent
    Alert.alert('Error', paymentIntentError);
    return;
  }
  if (payment_intent_client_secret && !requires_action) {
    // Payment succeeded
    Alert.alert('Success', 'The payment was confirmed successfully!');
  }
  if (payment_intent_client_secret && requires_action) {
    // ...continued below
  }
};
// ...

Configura un punto de conexión en tu servidor para recibir la solicitud. Este punto de conexión también se utilizará más adelante para gestionar las tarjetas que requieran un paso adicional de autenticación.

Crea un nuevo PaymentIntent con la ID del PaymentMethod creado en el cliente. Puedes confirmar el PaymentIntent estableciendo la propiedad confirm como “true” al crear el PaymentIntent o llamando a confirm después de su creación. También se admite Separar la autorización de la captura con pagos con tarjeta.

Si el pago requiere otras acciones, como autenticación con 3D Secure, el estado del PaymentIntent se establecerá en requires_action. Si el pago falla, el estado vuelve a ser requires_payment_method y debes mostrarle un mensaje de error al usuario. Si el pago no requiere ninguna autenticación adicional, se crea un cargo y el estado del PaymentIntent se establece en succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Si quieres guardar la tarjeta para volver a utilizarla más adelante, crea un objeto Customer para almacenar el PaymentMethod y especifica estos otros parámetros al crear el PaymentIntent:

• cliente. Establecido en el ID del objeto Customer.
• setup_future_usage. Establecido en off_session para indicarle a Stripe que planeas reutilizar este PaymentMethod para pagos fuera de la sesión sin la presencia del cliente. Si se define esta propiedad, el PaymentMethod se guarda en el objeto Customer después de la confirmación del PaymentIntent y de que el usuario completa las acciones solicitadas. Para obtener más detalles, echa una ojeada al ejemplo de código acerca de cómo guardar tarjetas después de un pago.

Normalmente, un pago se efectiviza después de que lo confirmas en el servidor, en el paso 4. No obstante, algunos flujos de pago requieren una acción más por parte del cliente, como la autenticación con 3D Secure.

​​Para los casos que requieren acciones siguientes, el estado del PaymentIntent es requires_action. En el cliente, pasa el secreto de cliente del PaymentIntent a handleNextAction. El controlador nativo presenta una vista y guía al cliente a través del flujo de autenticación. Después de gestionar las acciones necesarias de lado del cliente, el estado del PaymentIntent cambia a requires_confirmation. Esto permite que tu integración cumpla con el pedido en tu back-end y envíe el resultado de la entrega al cliente.

Envía el ID del PaymentIntent a tu back-end y vuelve a confirmarlo en el término de una hora para finalizar el pago. De lo contrario, el intento de pago fallará y volverá a requires_payment_method.

// ...
const pay = () => {
  // ...
  // If PaymentIntent requires action, call handleNextAction
  if (payment_intent_client_secret && requires_action) {
    const { error, paymentIntent } = await handleNextAction(payment_intent_client_secret);
    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
        if (
          paymentIntent.status === PaymentIntents.Status.RequiresConfirmation
        ) {
          // Confirm the PaymentIntent again on your server
          const response = await fetch(`/pay`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ payment_intent_id: paymentIntent.id }),
          });
          const { error, success } = await response.json();
          if (error) {
            // Error during confirming Intent
            Alert.alert('Error', error);
          } else if (success) {
            Alert.alert('Success', 'The payment was confirmed successfully!');
          }
        } else {
          // Payment succedeed
          Alert.alert('Success', 'The payment was confirmed successfully!');
        }
      }
  }
};
// ...

Este código solo se ejecuta cuando un pago requiere autenticación adicional, tal como se hizo en el paso anterior. El código en sí no es opcional porque cualquier pago puede requerir este paso extra.

Utilizando el mismo punto de conexión que configuraste arriba, confirma el PaymentIntent nuevamente para finalizar el pago y completar el pedido. Cerciórate de que esta confirmación se produzca en el término de una hora a partir del intento de pago. De lo contrario, el pago fallará y volverá a requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Dispones de varias tarjetas de prueba que puedes usar en un entorno de prueba para verificar que la integración esté lista. Úsalas con cualquier CVC y una fecha de vencimiento futura.

Para ver la lista completa de tarjetas de prueba, consulta nuestra guía sobre pruebas.