Aprenda a incrustar un formulario de pago personalizado WooshPay en su sitio web o aplicación. El código del lado del cliente y del servidor crea un formulario de pago con elementos para completar un pago utilizando varios métodos de pago.
Flujo de pagos #
Para utilizar el SDK WooshPay hay que seguir algunos pasos:
Crear una PaymentIntent #
Añada un punto final en su servidor que cree un PaymentIntent. Una PaymentIntent realiza un seguimiento del ciclo de vida del pago del cliente, controlando cualquier intento de pago fallido y asegurándose de que al cliente sólo se le cobra una vez. Devuelve el secreto de cliente de la PaymentIntent (número de PaymentIntent en este caso) en la respuesta para finalizar el pago en el cliente. Habilitamos las tarjetas por defecto.
Cargar wooshpay.js #
Utilice wooshpay.js para cumplir con la normativa PCI, asegurándose de que los datos de pago se envían directamente a WooshPay sin afectar a su servidor. Cargue siempre wooshpay.js desde js.wooshpay.com para seguir cumpliendo la normativa. No incluya el script en un paquete ni lo aloje usted mismo.
Inicializar elementos WooshPay #
Inicialice la biblioteca WooshPay Elements UI con el secreto del cliente. Elements gestiona los componentes de interfaz de usuario necesarios para recopilar los datos de pago.
Completar el pago en el cliente #
Completar el pago
Llame a confirmarPago()
pasando el PaymentElement y una return_url para indicar a dónde debe redirigir WooshPay al usuario una vez completado el pago. Para los pagos que requieren autenticación, WooshPay muestra un modal para la autenticación 3D Secure o redirige al cliente a una página de autenticación dependiendo del método de pago. Una vez que el cliente ha completado el proceso de autenticación, se le redirige a la página de autenticación. URL_de_retorno
.
Gestión de errores #
Si hay algún error inmediato (por ejemplo, la tarjeta de su cliente es rechazada), wooshpay.js devuelve un error. Muestra ese mensaje de error a tu cliente para que pueda volver a intentarlo.
Mostrar un mensaje sobre el estado del pago #
Cuando WooshPay redirige al cliente al URL_de_retorno
El payment_intent_client_secret
es añadido por wooshpay.js. Utilícelo para recuperar el PaymentIntent y determinar qué mostrar a su cliente.
Demostración #
Puede descargarlo desde aquí Descarga de la demo del SDK de JS