Express Checkout Element

Mostrar varios botones de pago con un solo clic con un solo componente.

Experiencia de usuario del proceso de compra que muestra los botones de Apple Pay, Link y PayPal

The Express Checkout Element is an integration for accepting payments through one-click payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and Amazon Pay.

Con esta integración, puedes hacer lo siguiente:

Ordena dinámicamente los botones de pago en función de la ubicación del cliente.
Agrega botones de pago sin cambios en el frontend.
Integra Elements sin problemas reutilizando una instancia de Elements existente para ahorrar tiempo.

Prueba la demostración

En la siguiente demostración, puedes activar algunas de las opciones predefinidas para cambiar el color de fondo, el diseño, el tamaño y la recopilación de la dirección de envío de la interfaz de pago. En la demostración, solo se muestra Google Pay y Apple Pay en las plataformas disponibles. Los botones de los Payment Methods solo se muestran en los países admitidos.

Si no ves la demostración, prueba a ver esta página en un navegador compatible.

Opción	Descripción
Merchant country	Set this using the publishable key that you use to initialize Stripe.js. To change the country, you must unmount the Express Checkout Element, update the publishable key, then re-mount the Express Checkout Element.
Background color	Set colors using the Elements Appearance API. Button themes are inherited from the Appearance API but you can also define them directly when you create the Element.
Desktop and mobile size	Use the dropdown to set the max pixel width of the parent element that the Express Checkout Element is mounted to. You can set it to 750px (Desktop) or 320px (Mobile).
Max columns and max rows	Set these values using the layout parameter when you Create the Express Checkout Element.
Overflow menu	Set this using the layout parameter when you Create the Express Checkout Element.
Collect shipping address	To collect shipping information, you must pass options when creating the Express Checkout Element. Learn more about collecting customer details and displaying line items.

Empieza con una guía

Agrega carteras de un solo clic a tu página de confirmación de compra

Crea una integración con Express Checkout Element mediante la API Checkout Sessions.

Usa carteras de un solo clic en integraciones avanzadas

Crea una integración con Express Checkout Element mediante la API Payment Intents.

Migrar al Express Checkout Element

Migrar del Payment Request Button Element al web Express Checkout Element.

Ver la referencia sobre Stripe.js

Métodos de pago

El Express Checkout Element presenta métodos de pago con un solo clic que están activos, son compatibles y están configurados.

Algunos métodos de pago requieren activación en el Dashboard.
Los métodos de pago solo están disponibles cuando el cliente utiliza un navegador compatible y paga en una moneda compatible.
Algunos métodos de pago requieren acciones de configuración por parte del cliente. Por ejemplo, el cliente no verá un botón de Google Pay si no tiene configurado Google Pay.
Registra tu dominio tanto en el entorno de prueba como en el modo activo.

El elemento clasifica los métodos de pago según su relevancia para el cliente.

Para controlar estos comportamientos, puedes personalizar los métodos de pago.

Navegadores compatibles

Ciertos métodos de pago funcionan con navegadores específicos.

	Apple Pay	Google Pay	Link	PayPal	Amazon Pay	Klarna
Chrome¹
Edge
Firefox
Opera
Safari	²
Chrome en iOS 16 o en una versión posterior
Firefox en iOS 16 o en una versión posterior
Edge en iOS 16 o en una versión posterior

¹Es posible que otros navegadores de Chromium sean compatibles. Para obtener más información, consulta navegadores compatibles.

²Cuando uses un iframe, su origen debe coincidir con el origen de nivel superior (excepto para Safari 17 y versiones posteriores al especificar el atributo allow="payment"). Dos páginas tienen el mismo origen si el protocolo, el host (nombre completo del dominio) y el puerto (si se especifica) son los mismos para ambas páginas.

Diseño

De forma predeterminada, cuando el Express Checkout Element muestra varios botones, organiza los botones en una cuadrícula en función del espacio disponible y muestra un menú de contenido adicional si es necesario.

Puedes anular este valor predeterminado y especificar un diseño de cuadrícula tú mismo con la opción diseño.

Texto

Puedes controlar el texto de un botón seleccionando un buttonType. Cada cartera ofrece sus propios tipos.

Link solo ofrece un tipo de botón, que presenta el llamado a la acción “Pagar con Link” y el logotipo de Link.

Intentamos detectar la configuración regional de tu cliente y la usamos para localizar el texto del botón. También puedes especificar una configuración regional.

Este código de ejemplo incluye la llamada a la acción “Comprar” o “Comprar ahora” para los botones que lo admiten. Luego, especifica la configuración regional de para obtener sus equivalentes alemanes.

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

Appearance

No puedes personalizar completamente el aspecto de los botones de Express Checkout Element porque cada método de pago establece su propio logotipo y colores de marca. Puedes personalizar las siguientes opciones:

Altura del botón
Radio del borde utilizando variables con la API Appearance
Temas de los botones

Nota

El botón de Apple Pay cambia de tamaño automáticamente cuando el radio del borde aumenta más allá de un cierto umbral. Si modificas el radio del borde predeterminado, asegúrate de probarlo con todos los métodos de pago activos.

Este código de ejemplo configura un grupo de elementos con un tema claro y un radio de borde de 36px, hace que los botones tengan 50px de altura y anula el tema para usar la versión de contorno blanco del botón de Apple Pay.

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

Admitimos los siguientes temas:

Link tiene un tema de un solo botón, que se puede leer sobre un fondo claro u oscuro.

Personalizar métodos de pago

No puedes especificar qué métodos de pago mostrar. Por ejemplo, no puedes forzar la aparición de un botón de Google Pay si el dispositivo de tu cliente no es compatible con Google Pay.

Pero puedes personalizar el comportamiento de los métodos de pago de varias maneras, por ejemplo:

Puedes activar o desactivar los métodos de pago desde el Dashboard.
Puedes anular la lógica predeterminada de Stripe de ordenar los métodos de pago por relevancia. Usa la opción paymentMethodOrder para establecer tu pedido preferido.
Si hay muy poco espacio en el diseño, es posible que aparezcan métodos de pago de baja relevancia en un menú de contenido adicional. Personaliza cuando aparezca el menú con la opción disposición.
Para evitar que aparezca Apple Pay o Google Pay, establece paymentMethods.applePay o paymentMethods.googlePay en never.
Para permitir que Apple Pay o Google Pay aparezcan cuando no estén configurados, configura paymentMethods.applePay o paymentMethods.googlePay en always. Esto no los obligará a aparecer en plataformas no compatibles o cuando el pago se realice en una moneda no admitida.

Consideraciones regionales
Finlandia
Suecia

Las regulaciones en Finlandia y Suecia exigen que presentes los métodos de pago de débito antes de mostrar los métodos de pago de crédito al momento de finalizar las compras en estos países.