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 installpara 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>; }
OpcionalGestiona la vinculación profunda
Cuando un cliente sale de tu aplicación (por ejemplo, para autenticarse en Safari o en su aplicación bancaria), proporciónale una forma de volver automáticamente a tu aplicación. Muchos tipos de métodos de pago requieren una URL de retorno. Si no proporcionas una, no podremos presentar a tus usuarios métodos de pago que requieran una URL de retorno, aunque los hayas habilitado.
Para proporcionar una URL de retorno:
- Registrar una URL personalizada. No se admiten enlaces universales.
- Configurar tu URL personalizada.
- Configura tu componente raíz para reenviar la URL al SDK de Stripe como se muestra a continuación.
Nota
Si utilizas Expo, configura tu esquema en el archivo app..
import { useEffect, useCallback } from 'react'; import { Linking } from 'react-native'; import { useStripe } from '@stripe/stripe-react-native'; export default function MyApp() { const { handleURLCallback } = useStripe(); const handleDeepLink = useCallback( async (url: string | null) => { if (url) { const stripeHandled = await handleURLCallback(url); if (stripeHandled) { // This was a Stripe URL - you can return or add extra handling here as you see fit } else { // This was NOT a Stripe URL – handle as you normally would } } }, [handleURLCallback] ); useEffect(() => { const getUrlAsync = async () => { const initialUrl = await Linking.getInitialURL(); handleDeepLink(initialUrl); }; getUrlAsync(); const deepLinkListener = Linking.addEventListener( 'url', (event: { url: string }) => { handleDeepLink(event.url); } ); return () => deepLinkListener.remove(); }, [handleDeepLink]); return ( <View> <AwesomeAppComponent /> </View> ); }
Para obtener más información sobre los esquemas de URL nativos, consulta la documentación para Android e iOS.
OpcionalAñade partidas al PaymentIntent
Opcionalmente, puedes aceptar los datos de la partida para proporcionar más señales de riesgo a Afterpay. Actualmente, esta función está disponible en versión beta privada. Para solicitar acceso a dicha función, contáctanos.
OpcionalSepara la autorización y la captura
A diferencia de la autorización y captura separadas para los pagos con tarjeta, Afterpay cobra al cliente la primera cuota del pago en el momento de la autorización. Tienes hasta 13 días después de la autorización para capturar el resto del pago. Si no registras el pago en este período, el cliente recibirá el reembolso de la primera cuota y no se le cobrará ninguna otra. En estos casos, Stripe también cancela el PaymentIntent y envía un evento payment_intent.canceled.
Si sabes que no puedes capturar el pago, te recomendamos que canceles el PaymentIntent en lugar de esperar a que transcurra el plazo de 13 días. La cancelación proactiva del PaymentIntent reembolsa inmediatamente la primera cuota a tu cliente, evitando cualquier confusión sobre los cargos en su extracto.
Indicarle a Stripe que autorice solamente 
Para indicar que quieres separar la autorización y la captura, establece capture_method en manual al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de Afterpay.
Una vez que la autorización se realiza correctamente, Stripe envía un evento payment_intent.amount_capturable_updated. Consulta nuestra guía de eventos para obtener ayuda.
Capturar los fondos 
Una vez que la autorización se realiza correctamente, el estado del PaymentIntent pasa a requires_. Para capturar los fondos autorizados, realiza una petición de captura del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más de ese importe, pero sí menos.
Opcional Cancela la autorización
Si necesitas cancelar una autorización, puedes cancelar el PaymentIntent.
OpcionalGestiona eventos posteriores al pago
Stripe envía un evento payment_intent.succeeded cuando se completa el pago. Utiliza el Dashboard, un webhook personalizado o una solución de socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.
Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las diferencias entre todos los métodos de pago aceptados.
- Gestiona eventos manualmente en el Dashboard - Utiliza el Dashboard para ver tus pagos de prueba en el Dashboard, enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos. 
- Crea un webhook personalizado - Crea un webhook personalizado para escuchar eventos y crear flujos de pago asíncronos personalizados. Prueba y depura tu integración de webhooks de forma local con la CLI de Stripe. 
- Integra una aplicación prediseñada - Gestiona eventos empresariales comunes, como la automatización o la comercialización y ventas, integrando una aplicación asociada. 
OpcionalPrueba la integración de Afterpay
Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de requires_ a succeeded.
Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en Error en el pago en modo de prueba. El PaymentIntent pasará de requires_ a requires_.
Para la captura manual de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.
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 no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. | 
| 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. |