Aceptar un pago
Crea un formulario de pago o usa una página del proceso de compra prediseñada para comenzar a aceptar pagos en línea.
Crea una integración de pagos personalizada incrustando componentes de interfaz de usuario de usuario en tu sitio con Stripe Elements. Consulta la comparación de esta integración con los otros tipos de integración de Stripe.
El código del lado del cliente y del lado del servidor crea un formulario del proceso de compra que acepta varios métodos de pago.
Esfuerzo de integración
Tipo de integración
Combinar componentes de la interfaz de usuario en un flujo de pago personalizado
Personalización de la interfaz de usuario
Personalización a nivel CSS con la API Appearance
¿Te interesa utilizar Stripe Tax, los descuentos, los envíos o la conversión de divisas?
Estamos desarrollando una integración del Payment Element que gestiona los impuestos, los descuentos, los envíos y la conversión de divisas. Consulta la guía Crea una página del proceso de compra para obtener más información.
Configurar StripeLado del servidor
Primero, crea una cuenta de Stripe o inicia sesión.
Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:
Crear un PaymentIntentLado del servidor
Nota
Si quieres procesar el Payment Element sin crear primero un PaymentIntent, consulta Recolectar los datos de pago antes de crear un Intent.
El objeto PaymentIntent representa tu intención de cobrarle a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado a lo largo del proceso de pago.
Crea el PaymentIntent
Crea un PaymentIntent en tu servidor con un importe y una divisa. En la última versión de la API, especificar el parámetro automatic_payment_methods
es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Puedes administrar los métodos de pago desde el Dashboard. Stripe gestiona la devolución de los métodos de pago que cumplen los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pagos.
Stripe usa tu configuración de métodos de pago para mostrar los métodos de pago que has habilitado. Para ver cómo se muestran tus métodos de pago ante los clientes, introduce un ID de transacción o establece el importe y la divisa de un pedido en el Dashboard. Para anular los métodos de pago, enumera manualmente los que quieras habilitar usando el atributo payment_method_types.
En la última versión de la API, especificar el parámetro automatic_payment_methods
es opcional porque Stripe habilita su funcionalidad de forma predeterminada.
Nota
Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, y no del lado del cliente. De esta forma, se evita que los clientes malintencionados puedan elegir sus propios precios.
Recupera el secreto del cliente
El PaymentIntent incluye un secreto de cliente que el lado del cliente utiliza para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.
Recopilar datos de pagoLado del cliente
Recopila los datos de pago del lado del cliente con Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para varios métodos de pago.
El Payment Element contiene un iframe que envía la información del pago a Stripe de modo seguro a través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe porque algunos métodos de pago requieren redirigir a otra página para la confirmación del pago.
If you do choose to use an iframe and want to accept Apple Pay or Google Pay, the iframe must have the allow attribute set to equal "payment *"
.
Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con https://
en lugar de http://
. Puedes probar tu integración sin usar HTTPS, pero recuerda habilitarla cuando todo esté listo para aceptar pagos activos.
El Payment Element presenta un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario solicita automáticamente que el cliente complete todos los datos de pago necesarios.
Personalizar la apariencia
Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el objeto de apariencia en options
al crear el proveedor Elements
.
Recopila las direcciones
De forma predeterminada, el Payment Element solo recopila los detalles necesarios de la dirección de facturación. Para recopilar la dirección de facturación completa de un cliente (por ejemplo, para calcular el impuesto sobre bienes y servicios digitales) o la dirección de envío, usa el Address Element.
Solicitar token de comerciante de Apple Pay
Si has configurado tu integración para aceptar pagos de Apple Pay, te recomendamos que configures la interfaz de Apple Pay para devolver un token de comercio y habilitar las transacciones iniciadas por el comerciante (MIT). Solicita el tipo de token de comercio correspondiente en el Pago Element.
Enviar el pago a StripeLado del cliente
Usa stripe.confirmPayment para completar el pago con los datos de Payment Element. Proporciona una dirección return_url para esta función que indique a Stripe dónde redirigir al usuario después de que complete el pago. Si bien, antes de ser redirigido a la return_url
, puede que primero se redirija al usuario a un sitio intermedio, como una página de autorización del banco. Los pagos con tarjeta se redirigen de inmediato a la return_url
si el pago se ha hecho efectivo.
Si no quieres hacer redireccionamiento de pagos con tarjeta una vez que se completan los pagos, puedes configurar el redireccionamiento como if_required
. Esto solo redirige a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.
Asegúrate de que la return_url
corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la return_url
, proporcionamos los siguientes parámetros de consulta de URL:
Parámetro | Descripción |
---|---|
payment_intent | El identificador único del PaymentIntent . |
payment_intent_client_secret | El secreto de cliente del objeto PaymentIntent . |
Precaución
Si tienes herramientas que llevan a cabo el seguimiento de la sesión de navegador del cliente, es posible que tengas que añadir el dominio stripe.com
a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones, que te impiden hacer el seguimiento de la sesión completa.
Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el estado del PaymentIntent para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la return_url
; estos parámetros se mantendrán durante el proceso de redireccionamiento.
Administrar eventos posteriores al pagoLado del servidor
Stripe envía un evento payment_intent.succeeded cuando se completa el pago. Usa la herramienta webhook del Dashboard o sigue las indicaciones de la guía de webhooks para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.
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. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar diferentes tipos de métodos de pago con una sola integración.
Además de administrar el evento payment_intent.succeeded
, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element:
Evento | Descripción | Acción |
---|---|---|
payment_intent.succeeded | Se envía cuando un cliente completa correctamente un pago. | Envía al cliente una confirmación del pedido y completa el pedido. |
payment_intent.processing | Se envía cuando el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento payment_intent.succeeded o payment_intent.payment_failed . | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
payment_intent.payment_failed | Se envía cuando el cliente intenta realizar un pago, pero este falla. | Si un pago pasa de processing a payment_failed , ofrécele al cliente otro intento de pago. |
Prueba tu integración
Para probar tu integración de pagos personalizados:
- Crea una intención de pago y recupera el secreto del cliente.
- Completa los datos del pago con un método de la siguiente tabla.
- Introduce cualquier fecha futura como fecha de caducidad.
- Introduce cualquier número de 3 dígitos como CVC.
- Introduce cualquier código postal de facturación.
- Envía el pago a Stripe. Se redirigirá a tu
return_url
. - Ve al Dashboard y busca el pago en la página de pagos. Si tu pago se ha completado con éxito, lo verás en esa lista.
- Haz clic en el pago para ver más detalles, como la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido.
Obtén más información sobre cómo probar tu integración.
Consulta Pruebas para obtener información adicional para probar tu integración.
Comunica a tus clientes qué es Stripe
Stripe recoge información sobre las interacciones de los clientes con Elements para brindarte servicios, prevenir el fraude y mejorar sus servicios. Entre los datos recogidos, se incluyen el uso de cookies y direcciones IP para identificar qué Elements ha visto un cliente durante una sola sesión del proceso de compra. Tú eres responsable de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos de estas maneras. Para obtener más información, visita nuestro centro de privacidad.