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.
Incrusta un formulario de pago prediseñado en tu sitio con Stripe Checkout. Consulta la comparación de esta integración con los otros tipos de integración de Stripe.
Esfuerzo de integración
Tipo de integración
Incrusta un formulario de pago prediseñado en tu sitio
Personalización de la interfaz de usuario
Usa la configuración de imagen de marca en el Dashboard de Stripe para hacer coincidir el proceso de compra con el diseño de tu sitio.
Configurar StripeLado del servidor
Primero, regístrate para obtener una cuenta de Stripe.
Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:
Crear una sesión de CheckoutLado del servidor
Desde tu servidor, crea una sesión de Checkout y establece el ui_mode en embedded
. Puedes configurar la sesión de Checkout con partidas individuales que desees incluir y opciones como la divisa.
Para redirigir a los clientes a una página personalizada que alojas en tu sitio web, especifica la URL de esa página en el parámetro return_url . Incluye la variable de plantilla {CHECKOUT_SESSION_ID}
en la URL para recuperar el estado de la sesión en la página de retorno. Checkout sustituye automáticamente la variable con el ID de la sesión de Checkout antes de redirigir a los clientes.
Más información sobre configurar la página de retorno y otras opciones para personalizar el comportamiento de redireccionamiento.
Después de crear la sesión de Checkout, usa el client_secret
devuelto en la respuesta para activar Checkout.
Montar CheckoutLado del cliente
Checkout renders in an iframe that securely sends payment information to Stripe over an HTTPS connection.
Error habitual
Avoid placing Checkout within another iframe because some payment methods require redirecting to another page for payment confirmation.
Personaliza la apariencia
Personaliza Checkout para que coincida con el diseño de tu sitio configurando el color de fondo, el color del botón, el radio del borde y las fuentes en la configuración de la imagen de marca de tu cuenta.
Por defecto, Checkout se muestra sin márgenes externos. Te recomendamos que utilices un elemento contenedor, como un div, para aplicar el margen que desees (por ejemplo, 16 px en todos los lados).
Mostrar una página de retorno
Después de que el cliente intente realizar el pago, Stripe lo redirige a una página de retorno que alojas en tu sitio. Cuando creaste la sesión de Checkout, especificaste la URL de la página de retorno en el parámetro return_url. Obtén más información sobre otras opciones para personalizar el comportamiento de redireccionamiento.
Al renderizar tu página de retorno, recupera el estado de la sesión de Checkout utilizando el ID de la sesión de Checkout en la URL. Maneja el resultado según el estado de la sesión de la siguiente manera:
complete
: el pago se ha realizado correctamente. Usa la información de la sesión de Checkout para renderizar una página de pago realizado correctamente.open
: el pago ha fallado o se ha cancelado. Vuelve a activar Checkout para que tu cliente pueda volver a intentarlo.
const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page }
Métodos de pago basados en el redireccionamiento
Durante el pago, algunos métodos de pago redirigen al cliente a una página intermedia, como una página de autorización bancaria. Cuando completan esa página, Stripe los redirige a tu página de retorno.
Más información sobre métodos de pago basados en redireccionamientos y comportamiento de redireccionamiento.
Prueba tu integración
Para probar la integración de tu formulario de pago integrado:
- Crea una sesión de Checkout integrada y monta Checkout en tu página.
- 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.
- Haz clic en Pagar. Se te redireccionará 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 tu pago para ver más detalles, como un resumen de Checkout con 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.