Express Checkout Element

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 front end.
• Integra Elements sin problemas reutilizando una instancia de Elements existente para ahorrar tiempo.

Prueba la demostración

En la siguiente demo, puede activar algunas de las opciones predefinidas para cambiar el color de fondo, el diseño, el tamaño y la recopilación de direcciones de envío de la interfaz de pago. En la versión demo se muestran Google Pay y Apple Pay únicamente en las plataformas disponibles. Los botones de Método de pago solo se muestran en los países admitidos.

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

Empieza con una guía

Crear un Express Checkout Element

This code creates an elements group with an Express Checkout Element and mounts it to the DOM.

const appearance = { /* appearance */ }
const options = { /* options */ }
const elements = stripe.elements({
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  appearance,
})
const expressCheckoutElement = elements.create('expressCheckout', options)
expressCheckoutElement.mount('#express-checkout-element')

Métodos de pago

El Express Checkout Element presenta métodos de pago en 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 divisa admitida.
• Algunos métodos de pago requieren acciones de configuración por parte del cliente. Por ejemplo, un cliente no verá un botón de Google Pay si no tiene configurado Google Pay.
• Registra tu dominio tanto en tu entorno de prueba como en tu 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

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

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 desbordamiento 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 monedero ofrece sus propios tipos.

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',

Aspecto

No puedes personalizar por completo la apariencia de los botones del 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 mediante variables con la API Appearance
• Temas de botones

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:

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 orden preferido.
• Si hay muy poco espacio en el diseño, es posible que los métodos de pago de baja relevancia aparezcan en un menú de desbordamiento. Personalízalo cuando aparezca el menú con la opción de diseño.
• 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, establece paymentMethods.applePay o paymentMethods.googlePay en always. Esto no hará que aparezcan en plataformas que no sean compatibles ni cuando el pago se realice en una divisa no admitida.