Aceptar un pago
Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos.
Para crear una integración de pagos personalizada, integra componentes de interfaz de usuario (IU) en tu sitio con Stripe Elements. Consulta cómo esta integración se compara con otros tipos de integración de Stripe.
El código del lado del cliente y del lado del servidor crea un formulario de finalización de compra que acepta varios métodos de pago.
Esfuerzo de integración
Tipo de integración
Combina 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 usar Stripe Tax, los descuentos, los envíos o la conversión de monedas?
Estamos desarrollando una integración de Payment Element que gestiona los impuestos, los descuentos, los envíos y la conversión de monedas. Para obtener más información, consulta la guía Crear una página de finalización de compra.
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 PaymentIntentServer-side
Nota
Si deseas procesar el Payment Element antes de crear un PaymentIntent, consulta Obtener 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 de estado a lo largo del proceso de pago.
Crear el PaymentIntent
Crea un PaymentIntent en tu servidor con un importe y una moneda. 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 elegibles en función de factores como el importe de la transacción, la moneda y el flujo de pagos.
Stripe usa tu configuración de métodos de pago para mostrar los métodos de pago que habilitaste. 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 moneda 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. Esto impide que clientes maliciosos puedan elegir sus propios precios.
Recuperar el secreto de cliente
El PaymentIntent incluye un secreto de cliente que el lado del cliente usa 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 pagoClient-side
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 para diversos métodos de pago.
El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura a través de una conexión HTTPS. Evita colocar el Payment Element dentro de 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 de finalización 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 renderiza un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario le pide automáticamente al cliente que complete todos los datos de pago necesarios.
Personaliza el aspecto
Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el objeto de aspecto en options
al crear el proveedor Elements
.
Recopila las direcciones
De forma predeterminada, el Payment Element solo recopila los datos 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.
Solicita un token de comerciante de Apple Pay
Si configuraste tu integración para aceptar pagos de Apple Pay, te recomendamos que configures la interfaz de Apple Pay para devolver un token de comerciante a fin de habilitar las transacciones iniciadas por el comerciante (MIT). Solicita el tipo de token de comerciante correspondiente en el Payment Element.
Enviar el pago a StripeClient-side
Usa stripe.confirmPayment para completar el pago con los datos de Payment Element. Especifica una dirección return_url para esta función que le indique a Stripe adónde redirigir al usuario después de que completa el pago. Primero, el usuario puede ser redirigido a un sitio intermedio, como una página de autorización del banco y luego a la dirección return_url
. Los pagos con tarjeta son redirigidos a la return_url
enseguida si el pago se efectúa correctamente.
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.
Make sure the return_url
corresponds to a page on your website that provides the status of the payment. When Stripe redirects the customer to the return_url
, we provide the following URL query parameters:
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 hacen el seguimiento de la sesión de navegador del cliente, es posible que tengas que agregar 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 toda la sesión.
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.
Gestionar eventos posteriores al pagoServer-side
Stripe sends a payment_intent.succeeded event when the payment completes. Use the Dashboard webhook tool or follow the webhook guide to receive these events and run actions, such as sending an order confirmation email to your customer, logging the sale in a database, or starting a shipping workflow.
Listen for these events rather than waiting on a callback from the client. On the client, the customer could close the browser window or quit the app before the callback executes, and malicious clients could manipulate the response. Setting up your integration to listen for asynchronous events is what enables you to accept different types of payment methods with a single integration.
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 un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento payment_intent.succeeded o payment_intent.payment_failed en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. |
payment_intent.payment_failed | Enviado cuando un cliente intenta un pago, pero el pago 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.
- Ingresa una fecha futura como fecha de vencimiento.
- Ingresa cualquier número de 3 dígitos como CVC.
- Ingresa un código postal de facturación.
- Envía el pago a Stripe. Se te redirigirá a tu
return_url
. - Ve al Dashboard y busca el pago en la página Pagos. Si tu pago se efectuó correctamente, 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.
Cuéntales a tus clientes qué es Stripe
Stripe recopila información sobre las interacciones de los clientes con Elements para proporcionarte servicios, mejorarlos y prevenir el fraude. Esto incluye el uso de cookies y direcciones IP para identificar qué Elements vio un cliente durante una sola sesión de finalización de compra. Tienes la responsabilidad de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos para dichos fines. Si deseas obtener más información, visita nuestro centro de privacidad.