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 librerías 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 el SDK de iOS nativo 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 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 mediante 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 tarjeta del lado del cliente de forma segura con CardField, un componente de interfaz de usuario proporcionado por el SDK, que guarda el número de tarjeta, la fecha de caducidad, el CVC y el código postal.

Añade 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
  }
};
// ...

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

Crear un nuevo PaymentIntent con el ID del PaymentMethod creado en tu cliente. Puedes confirmar el PaymentIntent estableciendo la propiedad confirm como true cuando se crea el PaymentIntent o llamando a confirm después de su creación. También se aceptan la autorización y la captura por separado para los pagos con tarjeta.

Si el pago requiere más acciones, como la autenticación mediante 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 mostrar un mensaje de error al usuario. Si el pago no requiere más autenticación, se crea un cargo y el estado del PaymentIntent pasa a 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 tarde, crea un Customer para almacenar el PaymentMethod y especifica los siguientes parámetros al crear el PaymentIntent:

• customer: establécelo en el ID del objeto Customer.
• setup_future_usage: establécelo en off_session para indicarle a Stripe que tienes intención de 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 complete las acciones solicitadas. Para obtener más información, observa el ejemplo de código sobre de cómo guardar tarjetas después de un pago.

Normalmente, un pago se hace efectivo después de que lo confirmas en el servidor, en el paso 4. Sin embargo, 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, especifica el secreto de cliente del PaymentIntent en 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 complete el pedido en tu back end y envíe el resultado de la ejecución a tu cliente.

Envía el ID del PaymentIntent a tu back-end y vuelve a confirmarlo en el plazo 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 un paso más de autenticación, tal como se hizo en el paso anterior. El código en sí no es opcional porque cualquier pago puede exigir este paso extra.

Utilizando el mismo punto de conexión que has configurado arriba, confirma el PaymentIntent nuevamente para finalizar el pago y tramitar el pedido. Asegúrate de que esta confirmación se produce en el plazo de una hora desde el 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 asegurarte de que la integración esté lista. Úsalas con cualquier CVC y con cualquier fecha de caducidad futura.

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