Crear una página de pagos
Personaliza el logotipo, las imágenes y los colores.
Soporte integrado para Apple Pay y Google Pay.
Mira la demostración para ver un ejemplo alojado.
Acepta un pago
Nota
Entra en el perfil de la plataforma para determinar si a tu empresa le convienen los cargos Direct o los cargos a un Destino.
Cargos a un Destino
En este ejemplo, la plataforma es un marketplace de alquiler de viviendas que tiene que crear pagos para los dueños que alquilan sus propiedades. También puedes usar los cargos a un Destino en otros tipos de negocios.
Crea una sesión de Checkout Client and Server
Una sesión de Checkout controla lo que tu cliente ve en el formulario de pago que se puede insertar, por ejemplo, las partidas, el importe y la moneda del pedido y los métodos de pago aceptados.
Agrega un botón para finalizar la compra en tu sitio web que llame a un punto de conexión del lado del servidor para crear una sesión de Checkout.
<html> <head> <title>Checkout</title> </head> <body> <form action="/create-checkout-session" method="POST"> <button type="submit">Checkout</button> </form> </body> </html>
En tu servidor, haz la siguiente llamada a la API de Stripe. Después de crear la sesión de Checkout, redirige a tu cliente a la URL recibida en la respuesta.
curl https://api.stripe.com/v1/checkout/sessions \ -u "
:" \ -d "line_items[0][price]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc\ -d "line_items[0][quantity]"=1 \ -d "payment_intent_data[application_fee_amount]"=123 \ -d "payment_intent_data[transfer_data][destination]"={{PRICE_ID}}\ -d mode=payment \ --data-urlencode success_url="https://example.com/success" \ --data-urlencode cancel_url="https://example.com/failure"{{CONNECTED_ACCOUNT_ID}}
payment_intent_data[transfer_data][destination]
: este argumento indica que se trata de un cargo a un Destino. Un cargo a un Destino es aquel que se procesa en la plataforma y por el cual los fondos se transfieren de manera inmediata y automática al saldo pendiente de la cuenta conectada. En nuestro ejemplo de alquiler de viviendas, queremos crear una experiencia en la que el cliente pague a través de la plataforma y esta le pague al propietario.line_items
: este argumento representa los artículos que compra el cliente. Estos artículos se muestran en la interfaz de usuario alojada por Stripe.success_url
: este argumento redirige al usuario después de completar el pago.cancel_url
: este argumento redirige al usuario después de hacer click en Cancelar.payment_intent_data[application_fee_amount]
: este argumento especifica el importe que tu plataforma tomará de la transacción. El importe total del cargo se transfiere de inmediato de la plataforma a la cuenta conectada especificada portransfer_data[destination]
después de la captura del cargo. Elapplication_fee_amount
se vuelve a transferir a la plataforma y se deduce la comisión de Stripe del importe de la plataforma.
Cuando se efectúan cargos a un destino, Checkout utiliza la configuración de marca de la cuenta de tu plataforma. Para obtener más información, consulta la sección Personalizar imagen de marca.
Nota
Esta sesión crea un cargo a un Destino. Si tienes que controlar el plazo de las transferencias o enviar los fondos de un solo pago a varias personas, utiliza cargos y envíos de fondos separados.
Completar el pedido Server-side
Una vez efectuado el pago, tendrás que gestionar cómo completar el pedido de tu lado. Por ejemplo, una empresa de alquiler de viviendas que exige el pago por adelantado conectará al propietario con el inquilino después de que se efectiviza el pago.
Precaución
No te bases solamente en el redireccionamiento al parámetro success_url
para completar los pedidos debido a lo siguiente:
- Algunos usuarios maliciosos podrían acceder directamente a la
success_url
y tener acceso a los bienes o servicios sin pagar. - Los clientes no siempre llegan a la
success_url
después de haber efectuado el pago, posiblemente porque cierran la pestaña del navegador antes de ser redirigidos.
Configura un punto de conexión de webhook (para eventos desde tu cuenta) en el Dashboard.
Crea un punto de conexión HTTP en tu servidor para controlar los pagos finalizados y permitir que los vendedores o proveedores de servicio puedan completar los pedidos. Asegúrate de reemplazar la clave secreta del punto de conexión que figura en el ejemplo (whsec_...
) con tu clave.
# Using Sinatra. require 'sinatra' require 'stripe' set :port, 4242 # Set your secret key. Remember to switch to your live secret key in production. # See your keys here: https://dashboard.stripe.com/apikeys Stripe.api_key =
# If you are testing your webhook locally with the Stripe CLI you # can find the endpoint's secret by running `stripe listen` # Otherwise, find your endpoint's secret in your webhook settings in # the Developer Dashboard endpoint_secret = 'whsec_...' post '/webhook' do payload = request.body.read sig_header = request.env['HTTP_STRIPE_SIGNATURE'] event = nil # Verify webhook signature and extract the event. # See https://stripe.com/docs/webhooks#verify-events for more information. begin event = Stripe::Webhook.construct_event( payload, sig_header, endpoint_secret ) rescue JSON::ParserError => e # Invalid payload. status 400 return rescue Stripe::SignatureVerificationError => e # Invalid Signature. status 400 return end if event['type'] == 'checkout.session.completed' session = event['data']['object'] handle_completed_checkout_session(session) end status 200 end def handle_completed_checkout_session(session) # Fulfill the purchase puts session.to_s end'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
Obtén más información en nuestra guía de cumplimiento de pedidos para Checkout.
Cómo probar webhooks a nivel local
Usa la CLI de Stripe para hacer pruebas de webhooks localmente.
En primer lugar, instala la CLI de Stripe en tu equipo, si aún no lo hiciste.
Para iniciar sesión, ejecuta
stripe login
en la línea de comandos y sigue las instrucciones.Por último, ejecuta
stripe listen --forward-to localhost:{PORT}/webhook
en una ventana de la terminal para permitir que el host local reciba un evento simulado en tu cuenta conectada y ejecutastripe trigger --stripe-account={{CONNECTED_STRIPE_ACCOUNT_ID}} checkout.session.completed
(o activa cualquier otro evento aceptado) en otra ventana.
Disputas
Por ser el comerciante a cargo del cobro, tu plataforma es responsable de las disputas. Asegúrate de conocer las prácticas recomendadas para responder a las disputas.
Crea una suscripción
Puedes crear un pago recurrente en una cuenta conectada con suscripciones. Las suscripciones se crean con cargos Direct. Si quieres, puedes especificar un application_fee_percent para dirigir un porcentaje del pago de cada factura hacia tu plataforma.
La página de Checkout usa la configuración de la marca de la cuenta conectada. Esto incluye el nombre, el ícono, el logotipo y el color de la empresa. Para obtener más información, visita la sección Personalizar imagen de marca.
Nota
Puedes incluir una combinación de partidas únicas y planes recurrentes en una sesión de Checkout. Si se especifica un application_fee_percent
, este se aplicará tanto a los ítems únicos como a los recurrentes.
Crea una sesión de Checkout Client and Server
La sesión de Checkout controla lo que tu cliente puede ver en la página de pagos alojada por Stripe, como las partidas, el importe y la moneda del pedido, y los métodos de pago aceptados.
Agrega un botón para finalizar la compra en tu sitio web que llame a un punto de conexión del lado del servidor a fin de crear una sesión de Checkout.
<html> <head> <title>Checkout</title> </head> <body> <form action="/create-checkout-session" method="POST"> <button type="submit">Checkout</button> </form> </body> </html>
En tu servidor, haz la siguiente llamada a la API de Stripe. Después de crear la sesión de Checkout, redirige a tu cliente a la URL recibida en la respuesta.
curl https://api.stripe.com/v1/checkout/sessions \ -u
: \ -d "line_items[][price]"="{{PRICE_ID}}" \ -d "line_items[][quantity]"=1 \ -d "subscription_data[application_fee_percent]"=10 \ -d "mode"="subscription" \ -d "success_url"="https://example.com/success" \ -d "cancel_url"="https://example.com/cancel" \ -H "Stripe-Account: {{CONNECTED_STRIPE_ACCOUNT_ID}}"sk_test_4eC39HqLyjWDarjtT1zdp7dc
Personaliza la imagen de marca
Tu plataforma y las cuentas conectadas con acceso al Dashboard de Stripe pueden usar la configuración de imagen de marca para personalizar la imagen de marca en la página de pagos. Cuando se efectúan cargos a un destino, Checkout usa la configuración de la marca de la cuenta de la plataforma. Para los cargos Direct y los cargos a un destino con el parámetro on_behalf_of
, Checkout usa la configuración de la marca de la cuenta conectada. Las plataformas pueden configurar los ajustes de la marca de las cuentas conectadas que tienen acceso al Dashboard de Express o que no tienen acceso a un Dashboard alojado por Stripe con la API Accounts.
La API account update acepta los siguientes parámetros para la imagen de marca:
icon
: aparece junto al nombre de la empresa en el encabezado de la página de Checkout.logo
: si se especifica, aparece en lugar del ícono y del nombre de la empresa en el encabezado de la página de Checkout.primary_color
: se utiliza como color de fondo en la página de Checkout.secondary_color
: se utiliza como color del botón en la página de Checkout.
curl https://api.stripe.com/v1/accounts/{{CONNECTED_STRIPE_ACCOUNT_ID}} \ -u "
:" \ -d "settings[branding][icon]"=file_123 \ -d "settings[branding][logo]"=file_456 \ --data-urlencode "settings[branding][primary_color]"="#663399" \ --data-urlencode "settings[branding][secondary_color]"="#4BB543"sk_test_4eC39HqLyjWDarjtT1zdp7dc
Habilitar métodos de pago
Visualiza tu configuración de métodos de pago y habilita los que quieras aceptar. Los pagos con tarjeta, Google Pay y Apple Pay están habilitados por defecto, pero puedes habilitarlos y deshabilitarlos según sea necesario.
Before the payment form is displayed, Stripe evaluates the currency, payment method restrictions, and other parameters to determine the list of supported payment methods. Payment methods that increase conversion and that are most relevant to the currency and customer’s location are prioritized. Lower priority payment methods are hidden in an overflow menu.