Botón de solicitud de pago
Precaución
El Payment Request Button Element muestra de manera dinámica las opciones de la billetera durante el proceso de pago, lo que te ofrece una sola integración para Apple Pay, Google Pay y Link. Alternativamente, puedes usar el Express Checkout Element para ofrecer varios botones de pago con un solo clic a tus clientes. Compara el botón Express Checkout Element y Payment Request.
Los clientes ven Apple Pay o Google Pay si los habilitaron en su dispositivo y según el navegador que utilicen. Si aparece Link, podría deberse a que los clientes:
- No tienen habilitado Apple Pay o Google Pay en su dispositivo.
- Usan Chrome con sesiones de Link activas y autenticadas.
Prerrequisitos
Antes de comenzar, debes hacer lo siguiente:
- Revisa los requisitos de cada tipo de botón de pago:
- Apple Pay requiere macOS 10.12.1 o iOS 10.1 o versiones posteriores.
- Los dispositivos compatibles admiten automáticamente Google Pay.
- **Registra y verifica tu dominio ** tanto en modo de prueba como en modo activo.
- Agrega un método de pago a tu navegador. Por ejemplo, puedes guardar una tarjeta en Chrome, agregar una tarjeta a tu cuenta de Google Pay o agregar una tarjeta a tu billetera para Safari.
- Brinda servicios a tu aplicación a través de HTTPS. Este es un requisito tanto en desarrollo como en producción. Una forma de empezar es usar un servicio como ngrok.
Configurar Stripe Elements
Nota
La demo en CodeSandbox te permite probar Stripe.js para React sin la necesidad de crear un nuevo proyecto.
Agrega Stripe.js y Elements a tu página
Para utilizar los componentes de tipo Element, ajusta el componente de tu página de finalización de compra en un proveedor Elements. Llama loadStripe
con tu clave publicable y especifica la Promise
devuelta en el proveedor Elements
.
import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe(
); function App() { return ( <Elements stripe={stripePromise}> <CheckoutForm /> </Elements> ); }; ReactDOM.render(<App />, document.getElementById('root'));'pk_test_TYooMQauvdEDq54NiTphI7jx'
Crear una instancia de paymentRequestLado del cliente
En el componente de tu formulario de compra, crea una instancia de stripe.paymentRequest con todas las opciones necesarias.
import React, {useState, useEffect} from 'react'; import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const [paymentRequest, setPaymentRequest] = useState(null); useEffect(() => { if (stripe) { const pr = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true, }); } }, [stripe]); // Use a traditional checkout form. return 'Insert your form or button component here.'; }
Nota
Usa el parámetro requestPayerName
para recopilar la dirección de facturación del pagador para Apple Pay. Puedes usar la dirección de facturación para hacer la verificación de domicilio y bloquear pagos fraudulentos. Todos los demás métodos de pago recopilan automáticamente la dirección de facturación, si está disponible.
Renderizar el Payment Request Button ElementLado del cliente
Verifica si tu cliente tiene un método de pago activo con canMakePayment. Si lo tiene, presenta el <PaymentRequestButtonElement>
. Si no lo tiene, no puedes renderizar el Element. En ese caso, te sugerimos mostrar un formulario de compra tradicional.
import React, {useState, useEffect} from 'react'; import {PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const [paymentRequest, setPaymentRequest] = useState(null); useEffect(() => { if (stripe) { const pr = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestPayerName: true, requestPayerEmail: true, }); // Check the availability of the Payment Request API. pr.canMakePayment().then(result => { if (result) { setPaymentRequest(pr); } }); } }, [stripe]); if (paymentRequest) { return <PaymentRequestButtonElement options={{paymentRequest}} /> } // Use a traditional checkout form. return 'Insert your form or button component here.'; }
Crear un PaymentIntentLado del servidor
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.
El PaymentIntent devuelto incluye unsecreto de cliente, que utilizas para completar el proceso de pago de forma segura en lugar de especificar todo el objeto PaymentIntent. Vuelve a enviar al cliente el secreto de cliente para que lo use en el siguiente paso.
Completar el pagoLado del cliente
Escucha el evento paymentmethod
para recibir un objeto PaymentMethod. Especifica el ID del PaymentMethod y el secreto de cliente del PaymentIntent en stripe.confirmCardPayment para completar el pago.
paymentRequest.on('paymentmethod', async (ev) => { // Confirm the PaymentIntent without handling potential next actions (yet). const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment( clientSecret, {payment_method: ev.paymentMethod.id}, {handleActions: false} ); if (confirmError) { // Report to the browser that the payment failed, prompting it to // re-show the payment interface, or show an error message and close // the payment interface. ev.complete('fail'); } else { // Report to the browser that the confirmation was successful, prompting // it to close the browser payment method collection interface. ev.complete('success'); // Check if the PaymentIntent requires any actions and, if so, let Stripe.js // handle the flow. If using an API version older than "2019-02-11" // instead check for: `paymentIntent.status === "requires_source_action"`. if (paymentIntent.status === "requires_action") { // Let Stripe.js handle the rest of the payment flow. const {error} = await stripe.confirmCardPayment(clientSecret); if (error) { // The payment failed -- ask your customer for a new payment method. } else { // The payment has succeeded -- show a success message to your customer. } } else { // The payment has succeeded -- show a success message to your customer. } } });
Precaución
El cliente puede descartar la interfaz de pagos en algunos navegadores incluso después de autorizar el pago. Esta posibilidad significa que podrías recibir un evento de cancelación en tu objeto PaymentRequest después de haber recibido un evento token
o paymentmethod
. Si utilizas el evento cancel
como un hook para cancelar el pedido del cliente, asegúrate también de rembolsar el pago que acabas de crear.
Prueba tu integración
Para probar tu integración, debes usar HTTPS y un navegador compatible. Si utilizas el paymentRequestButton
Element dentro de un iframe, el iframe debe tener el atributo permitido definido como igual a “payment *”.
Además, cada método de pago y cada navegador tiene requisitos específicos:
Recopilar información de envío
Para recopilar información de envío, primero debes incluir requestShipping: true
al crear la solicitud de pago.
En este punto, también puedes proporcionar una matriz de shippingOptions
, siempre que las opciones de envío no dependan de la dirección del cliente.
const paymentRequest = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 1099, }, requestShipping: true, // `shippingOptions` is optional at this point: shippingOptions: [ // The first shipping option in this list appears as the default // option in the browser payment interface. { id: 'free-shipping', label: 'Free shipping', detail: 'Arrives in 5 to 7 days', amount: 0, }, ], });
A continuación, escucha el evento shippingaddresschange
para detectar cuándo un cliente selecciona una dirección de envío. Usa la dirección para obtener opciones de envío válidas de tu servidor, actualizar el total o realizar otra lógica comercial. Los datos de la dirección en el evento shippingaddresschange
pueden ser anonimizados por el navegador para no divulgar información confidencial que no es necesaria para el cálculo del costo de envío.
El cliente debe suministrar shippingOptions
válidas en este punto para continuar con el proceso.
paymentRequest.on('shippingaddresschange', async (ev) => { if (ev.shippingAddress.country !== 'US') { ev.updateWith({status: 'invalid_shipping_address'}); } else { // Perform server-side request to fetch shipping options const response = await fetch('/calculateShipping', { data: JSON.stringify({ shippingAddress: ev.shippingAddress }) }); const result = await response.json(); ev.updateWith({ status: 'success', shippingOptions: result.supportedShippingOptions, }); } });
Mostrar ítems de factura
Usa displayItems
para mostrar PaymentItem
objetos y el desglose del precio en la interfaz de pago del navegador.
const pr = stripe.paymentRequest({ country: 'US', currency: 'usd', total: { label: 'Demo total', amount: 2000, }, displayItems: [ { label: 'Sample item', amount: 1000, }, { label: 'Shipping cost', amount: 1000, } ], });
Diseñar el botón
Usa los siguientes parámetros para personalizar Element:
const options = { paymentRequest, style: { paymentRequestButton: { type: 'default', // One of 'default', 'book', 'buy', or 'donate' // Defaults to 'default' theme: 'dark', // One of 'dark', 'light', or 'light-outline' // Defaults to 'dark' height: '64px', // Defaults to '40px'. The width is always '100%'. }, } } <PaymentRequestButtonElement options={options} />
Cómo usar tu propio botón
Si deseas diseñar tu propio botón en lugar de usar el paymentRequestButton
Element, puedes mostrar el botón personalizado en función del resultado de paymentRequest.canMakePayment (). Luego, usa paymentRequest.show () para mostrar la interfaz del navegador cuando se haga clic en el botón.
Cuando crees tu propio botón, sigue las de Apple Pay Pautas para la interfaz humana y las de Google Pay Pautas de marca.
Usar el Payment Request Button con Stripe Connect
Antes de crear la instancia de
PaymentRequest
, define la opciónstripeAccount
en la instancia de Stripe en el front-end:const stripe = Stripe(
, { apiVersion: "2024-04-10", stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID', });'pk_test_TYooMQauvdEDq54NiTphI7jx'Registra todos los dominios donde planeas mostrar el Payment Request Button.
Enlace para el Botón de Solicitud de Pago
Cuando llegan nuevos clientes a tu sitio, pueden usar Link en el botón de solicitud de pago para pagar con sus datos de pago guardados. Con Link, no necesitan ingresar manualmente su información de pago. Link requiere registro de dominio.
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.