Express Checkout Element

Express Checkout Element es una integración para aceptar pagos a través de botones de métodos de pago con un clic. Los métodos de pago admitidos incluyen Link, Apple Pay, Google Pay, PayPal, Klarna y 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.

Empieza con una guía

Métodos de pago

El Express Checkout Element presenta métodos de pago con un 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.

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.

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

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 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.