Crear una página de pagos
Integra Apple Pay y Google Pay con código adicional.
Personaliza todos los componentes con CSS.
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.
Paso 1: Crea un PaymentIntent Server-side
curl https://api.stripe.com/v1/payment_intents \ -u "
:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=truesk_test_4eC39HqLyjWDarjtT1zdp7dc
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.
Stripe usa un objeto PaymentIntent para representar tu intención de cobrarle a un cliente, y hace el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.
Crea un PaymentIntent
en tu servidor con un importe y una moneda. Decide cuánto cobrar siempre del lado del servidor, que es un entorno de confianza, y no del lado del cliente. Esto impide que clientes maliciosos puedan elegir sus propios precios.
curl https://api.stripe.com/v1/payment_intents \ -u
: \ -d amount=1000 \ -d currency="usd" \ -d "automatic_payment_methods[enabled]"=true \ -d application_fee_amount="123" \ -d "transfer_data[destination]"=sk_test_4eC39HqLyjWDarjtT1zdp7dc{{CONNECTED_STRIPE_ACCOUNT_ID}}
En nuestro ejemplo de alquiler de viviendas, nuestro objetivo es crear un negocio en el que los clientes paguen el alquiler a través de nuestra plataforma, y nosotros les paguemos a los propietarios por alquilarles a los clientes. Para configurar este negocio, haz lo siguiente:
- Indica que el alquiler es un cargo a un Destino con
transfer_data[destination]
. - Especifica qué parte del importe del alquiler va a la plataforma con
application_fee_amount
.
Cuando hay un cargo en el alquiler, Stripe transfiere el importe total al saldo pendiente de la cuenta conectada (transfer_data[destination]
). Luego, transfiere el importe de la comisión (application_fee_amount
) a la cuenta de la plataforma, que es la parte de los ingresos que le corresponde por facilitar el alquiler. Por último, Stripe deduce las comisiones de Stripe del importe de la comisión de la plataforma. A continuación, un ejemplo de este flujo de fondos:
Nota
Este PaymentIntent crea un cargo a un Destino. Si tienes que controlar el plazo de las transferencias o transferir fondos de un pago único a varias personas, usa cargos y envíos de fondos separados.
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.
Recupera el secreto de cliente de un punto de conexión de tu servidor con la funcionalidad fetch
del navegador. Este método es más conveniente si tu lado del cliente es una aplicación de una sola página, especialmente, si fue diseñada con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se usa para el secreto de cliente:
get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end
Luego recupera el secreto de cliente con JavaScript del lado del cliente:
(async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })();
Paso 2: Recopila los datos de la tarjeta Client-side
Está todo listo para que recopiles información de la tarjeta del lado del cliente con Stripe Elements. Elements es un conjunto de componentes de interfaz de usuario prediseñados para recopilar y validar el número de tarjeta, el código postal y la fecha de vencimiento.
Un Stripe Element contiene un iframe que envía la información del pago a Stripe en modo seguro a través de una conexión HTTPS. La dirección de la página de finalización de compra también debe empezar con https:// en lugar de http:// para que funcione tu integración.
Puedes probar tu integración sin usar HTTPS. Habilítala cuando todo esté listo para aceptar pagos reales.
Configurar Stripe Elements
Stripe Elements se encuentra disponible automáticamente como función de Stripe.js. Incluye el script de Stripe.js en tu página de finalización de compra agregándolo al head
de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.
<head> <title>Checkout</title> <script src="https://js.stripe.com/v3/"></script> </head>
Crea una instancia de Elements con el siguiente JavaScript en tu página de finalización de compra:
// Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys var stripe = Stripe(
); var elements = stripe.elements();'pk_test_TYooMQauvdEDq54NiTphI7jx'
Agrega Elements a tu página de pago
Tu formulario de pago necesita incluir un lugar específico para Elements. Crea nodos DOM (contenedores) vacíos con ID únicos en tu formulario de pago y luego especifica esos ID en Elements.
<form id="payment-form"> <div id="card-element"> <!-- Elements will create input elements here --> </div> <!-- We'll put the error messages in this element --> <div id="card-errors" role="alert"></div> <button id="submit">Pay</button> </form>
Una vez cargado el formulario mencionado arriba, crea una instancia de un Element y móntalo en el contenedor Element:
// Set up Stripe.js and Elements to use in checkout form var elements = stripe.elements(); var style = { base: { color: "#32325d", } }; var card = elements.create("card", { style: style }); card.mount("#card-element");
El card
Element simplifica el formulario de pago y minimiza la cantidad de campos obligatorios insertando un único campo de entrada flexible que recopila todos los datos necesarios de la tarjeta y para la facturación en modo seguro. De lo contrario, combina cardNumber
, cardExpiry
y cardCvc
Elements en un formulario de tarjeta flexible de entrada múltiple.
Nota
Recopila siempre el código postal para aumentar las tasas de aceptación de tarjetas y disminuir el fraude.
El Card Element de una sola línea recopila y envía automáticamente el código postal del cliente a Stripe. Si creas un formulario de pago con Elements divididos (número de tarjeta, caducidad, CVC), agrega un campo de entrada separado para el código postal del cliente.
Para ver una lista completa de los tipos de Elements compatibles, consulta nuestra documentación de referencia sobre Stripe.js.
Elements validates user input as it’s typed. To help your customers catch mistakes, listen to change
events on the card
Element and display any errors:
card.on('change', ({error}) => { let displayError = document.getElementById('card-errors'); if (error) { displayError.textContent = error.message; } else { displayError.textContent = ''; } });
La validación del código postal depende del país de facturación del cliente. Utiliza nuestras tarjetas de prueba internacionales para experimentar con otros formatos de código postal.
Paso 3: Envía el pago a Stripe Client-side
En lugar de enviarle al cliente el objeto PaymentIntent completo, utiliza el secreto de cliente de Step 1. Esta clave es diferente de las claves de API utilizadas para autenticar las solicitudes de la API de Stripe.
El secreto de cliente debe ser administrado con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie excepto al cliente.
Para completar el pago cuando el usuario hace click, recupera el secreto de cliente del PaymentIntent que creaste en Step 1 y llama a stripe.confirmCardPayment con el secreto de cliente.
Especifica datos de facturación adicionales, como el nombre y la dirección del titular de la tarjeta, en el hash billing_details
. El card
Element envía automáticamente la información del código postal del cliente. Sin embargo, para combinar cardNumber
, cardCvc
y cardExpiry
Elements es necesario que especifiques el código postal en billing_details[address][postal_code]
.
var form = document.getElementById('payment-form'); form.addEventListener('submit', function(ev) { ev.preventDefault(); stripe.confirmCardPayment(clientSecret, { payment_method: { card: card, billing_details: { name: 'Jenny Rosen' } } }).then(function(result) { if (result.error) { // Show error to your customer (for example, insufficient funds) console.log(result.error.message); } else { // The payment has been processed! if (result.paymentIntent.status === 'succeeded') { // Show a success message to your customer // There's a risk of the customer closing the window before callback // execution. Set up a webhook or plugin to listen for the // payment_intent.succeeded event that handles any business critical // post-payment actions. } } }); });
Nota
stripe.confirmCardPayment
puede tardar varios segundos en completarse. Durante ese tiempo, deshabilita tu formulario para no reenviarlo y muestra un indicador de espera, por ejemplo, un indicador giratorio. Si recibes un mensaje de error, muéstraselo al cliente, rehabilita el formulario y oculta el indicador de espera.
Si el cliente debe autenticar la tarjeta, Stripe.js lo guía a través del proceso mostrándole un cuadro de diálogo. Puedes ver un ejemplo de esta experiencia utilizando el número de tarjeta de prueba ` con cualquier CVC, una fecha de vencimiento futura y cualquier código postal en la demo en la parte superior de la página.
Cuando el pago se completa con éxito, el valor de la propiedad status
del PaymentIntent devuelto es suceeded. Verifica el estado del PaymentIntent en el Dashboard o examinando la propiedad status del objeto. Si el pago no se efectúa correctamente, examina el error
devuelto para determinar el motivo.
Paso 4: Cumplimiento del 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.
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'] == 'payment_intent.succeeded' payment_intent = event['data']['object'] handle_successful_payment_intent(payment_intent) end status 200 end def handle_successful_payment_intent(payment_intent) # Fulfill the purchase puts payment_intent.to_s end'sk_test_4eC39HqLyjWDarjtT1zdp7dc'
Obtén más información en nuestra guía de cumplimiento de pedidos por pagos.
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}} payment_intent.succeeded
(o activa cualquier otro evento aceptado) en otra ventana.
Paso 5: 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.
Habilitar métodos de pago
Stripe enables certain payment methods for your connected accounts by default. You can change these defaults at any time in your Stripe Dashboard.
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.