Acepta un pago de Afterpay o Clearpay
Descubre cómo aceptar Afterpay (también conocido como Clearpay en Reino Unido), un método de pago en EE. UU., CA, Reino Unido, AU y NZ.
Precaución
El contenido de esta sección se refiere a un producto heredado. En su lugar, debes usar la guía Aceptar un pago para el proceso de integración más reciente. Aunque Stripe sigue aceptando este producto, podría dejar de aceptarlo si el producto queda obsoleto.
Los usuarios de Stripe pueden utilizar la API Payment Intents, una ruta de integración única para crear pagos usando cualquier método aceptado, para aceptar pagos con Afterpay de clientes de los siguientes países:
- Australia
- Canadá
- Nueva Zelanda
- Reino Unido
- Estados Unidos
Afterpay es un método de pago de uso único y de notificación inmediata que requiere que el cliente autentique su pago. Se redirige a los clientes al sitio web de Afterpay, donde aceptan las condiciones del plan de pago en cuotas. Cuando el cliente acepta las condiciones, se garantizan los fondos y se transfieren a tu cuenta de Stripe. El cliente paga a Afterpay directamente a lo largo del tiempo.
Nota
Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la configuración de los métodos de pago.
Configurar StripeLado del servidorLado del cliente
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:
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):
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.
Nota
Recomendamos seguir la guía oficial de TypeScript para añadir compatibilidad con TypeScript.
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> ); }
Nota
Usa las claves de prueba de la API durante las pruebas y las tareas de desarrollo, y las claves del modo activo cuando publiques tu aplicación.
Crea un PaymentIntentLado del servidorLado del cliente
Un PaymentIntent es un objeto que representa tu intención de cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa.
Lado del servidor
Primero, crea un PaymentIntent
en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la API Payment Intents, añade afterpay_
a la lista de tipos de métodos de pago para tu PaymentIntent
.
Lado del cliente
El PaymentIntent devuelto incluye un secreto de cliente que puede utilizar el lado del cliente para completar el proceso de pago de forma segura en lugar de especificar el objeto PaymentIntent completo. En el lado del cliente, solicita un PaymentIntent desde tu servidor y almacena el secreto de cliente.
const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', payment_method_types: ['afterpay_clearpay'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };
Recopila los datos del método de pagoLado del cliente
Afterpay requiere que los datos de facturación estén presentes para que el pago se efectúe correctamente. En tu aplicación, recolecta los datos de facturación necesarios del cliente:
- Nombre completo (nombre y apellido)
- Dirección de correo electrónico
- Dirección de facturación completa
Además, aunque no se requieren datos de envío, pueden ayudar a mejorar las tasas de autenticación. Para recolectar los datos de envío, debes recolectar del cliente la siguiente información:
- Nombre completo
- Dirección de envío completa
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { const billingDetails: PaymentMethodCreateParams.BillingDetails = { email, phone: '+48888000888', addressCity: 'Houston', addressCountry: 'US', addressLine1: '1459 Circle Drive', addressLine2: 'Texas', addressPostalCode: '77063', name: 'Jenny Rosen', }; // Shipping details are optional but recommended to pass in. const shippingDetails: PaymentMethodCreateParams.ShippingDetails = { addressLine1: '1459 Circle Drive', addressCountry: 'US', addressPostalCode: '77063', name: 'Jenny Rosen', }; // ... }; return ( <Screen> <TextInput placeholder="E-mail" onChange={(value) => setEmail(value.nativeEvent.text)} /> </Screen> ); }
Envía el pago a StripeLado del cliente
Recupera el secreto de cliente del PaymentIntent que has creado y llama al confirmPayment
. Deberías seguir gestionando el secreto de cliente con cuidado, ya que sirve para completar el cargo. No lo registres, no lo insertes en URL ni lo expongas a nadie que no sea el cliente.
export default function AfterpayClearpayPaymentScreen() { const [email, setEmail] = useState(''); const handlePayPress = async () => { // ... const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'AfterpayClearpay', paymentMethodData: { billingDetails, // Shipping details are optional but recommended to pass in. shippingDetails, }, }); if (error) { Alert.alert(`Error code: ${error.code}`, error.message); } else if (paymentIntent) { Alert.alert( 'Success', `The payment was confirmed successfully! currency: ${paymentIntent.currency}`, ); } }; return <Screen>{/* ... */}</Screen>; }
Pagos fallidos
Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).
Siempre debes presentar más opciones de pago como card
en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el PaymentMethod se separa y el estado del objeto PaymentIntent pasa automáticamente a requires_
.
Para un PaymentIntent de Afterpay con un estado de requires_
, los clientes deben efectivizar el pago en el transcurso de las 3 horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3 horas, el PaymentMethod se separa y el estado del objeto del PaymentIntent pasa automáticamente a requires_
.
En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.
Códigos de error
Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:
Código de error | Acción recomendada |
---|---|
payment_ | Un error genérico indica que el proceso de compra de Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo. |
payment_ | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información. |
payment_ | El cliente nunca efectivizó el pago en la página del proceso de compra de Afterpay y la sesión de pago ha caducado. Stripe caduca automáticamente los Payment Intents que no se hayan autorizado correctamente 3 horas después de la creación del proceso de compra inicial. |
payment_ | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde. |
amount_ | Introduce un importe dentro de los límites de transacciones predeterminados de Afterpay para el país. |
amount_ | Introduce un importe dentro de los límites de transacciones predeterminados de Afterpay para el país. |