Botón de solicitud de pagoObsoleto

The Payment Request Button Element dynamically displays wallet options during checkout, giving you a single integration for Apple Pay, Google Pay, and Link. Alternatively, you can use the Express Checkout Element to offer multiple one-click payment buttons to your customers. Compare the Express Checkout Element and Payment Request Button.

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.

Requisitos previos

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 tu dominio tanto en modo entorno 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.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

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(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

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.';
}

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 PaymentIntent

Lado del servidor

Stripe usa un objeto PaymentIntent para representar tu intención de cobrar a un cliente y hace el seguimiento de los intentos de cobro y de los cambios en el estado del pago en todo el 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.

Command Line

cURL

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card

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.

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.
    }
  }
});

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 podrían 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 objetos PaymentItem 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 click 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

Es posible que las plataformas Connect deban tomar más medidas al usar el Payment Request Button:

1. Si estás creando cargos Direct o agregando el token a un Customer en la cuenta conectada, debe configurar la opción stripeAccount en la instancia de Stripe del front-end:

   const stripe = Stripe(
   'pk_test_TYooMQauvdEDq54NiTphI7jx', {
     apiVersion: "2025-05-28.basil",
     stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

2. Si especificaste on_behalf_of cuando creaste la Payment o Setup Intent, debes pasar el mismo valor a la instancia paymentRequest con la opción onBehalfOf:

   const paymentRequest = stripe.paymentRequest({
     country: 'US',
     currency: 'usd',
     total: {
       label: 'Demo total',
       amount: 1099,
     },
     requestPayerName: true,
     requestPayerEmail: true,
     onBehalfOf: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

3. Registra todos los dominios donde planees mostrar el Payment Request Button.

1. Antes de crear la instancia de PaymentRequest, define la opción stripeAccount en la instancia de Stripe en el front-end:

   const stripe = Stripe(
   'pk_test_TYooMQauvdEDq54NiTphI7jx', {
     apiVersion: "2025-05-28.basil",
     stripeAccount: 'CONNECTED_STRIPE_ACCOUNT_ID',
   });

2. Registra todos los dominios donde planees mostrar el Payment Request Button.

Enlace para el Botón de Solicitud de Pago

When new customers come to your site, they can use Link in the Payment Request Button to pay with their saved payment details. With Link, they don’t need to manually enter their payment information. Link requires domain registration.

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.