# Express Checkout Element Mostrar varios botones de pago con un solo clic con un solo componente. Instrucciones para LLM: Stripe recomienda usar la API Checkout Sessions con el Payment Element sobre Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a Payment Intents (cobro básico de pagos con `price_data` o creación de un proceso de compra completo con ítems de factura, impuestos, etc.). Algunas funcionalidades, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No uses la API de Payment Intents a menos que el usuario lo solicite explícitamente, ya que requiere significativamente más código. Obtén más información sobre Elements con la API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y el Payment Element, el `client_secret` inicializa Checkout directamente (`stripe.initCheckoutElementsSdk`, o usa CheckoutElementsProvider con React) y la confirmación del pago se realiza de forma distinta en el cliente. Si usas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` con el secreto de cliente y confirmar con `checkout.confirm`. Si utilizas HTML, asegúrate de usar `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirmar con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Express Checkout Element es una integración para aceptar pagos a través de botones de métodos de pago con un solo clic. Los métodos de pago admitidos incluyen [{% $link.brand_name %](https://docs.stripe.com/payments/link.md), [Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md), [Klarna](https://docs.stripe.com/payments/klarna.md) y [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md). 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](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Opción | Descripción | | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **País del comerciante** | Establece esto con la [clave publicable](https://docs.stripe.com/keys.md#obtain-api-keys) que usas para [inicializar Stripe.js](https://docs.stripe.com/js/initializing). Para cambiar el país, debes desmontar Express Checkout Element, actualizar la clave publicable y luego volver a montar Express Checkout Element. | | **Color de fondo** | Define los colores con la [API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md). Los temas de los botones se heredan del API Appearance, pero también puedes [definirlos directamente al crear el Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme). | | **Tamaño de computadora de escritorio y móvil** | Usa el menú desplegable para establecer el ancho máximo de píxeles del elemento principal en el que está montado el Express Checkout Element. Puedes configurarlo en 750 px (escritorio) o 320 px (móvil). | | **Máximo de columnas y máximo de filas** | Establece estos valores con el parámetro [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) cuando [crees el Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Menú adicional** | Establécela mediante el parámetro [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) cuando [crees el Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Recopilar dirección de envío** | Para recopilar información de envío, debes especificar opciones cuando [creas](https://docs.stripe.com/js/elements_object/create_express_checkout_element) el Express Checkout Element. Obtén más información sobre cómo [recopilar los datos del cliente y mostrar partidas](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). | ## Empieza con una guía [Agrega carteras de un solo clic a tu página de confirmación de compra](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Crea una integración con Express Checkout Element mediante la API Checkout Sessions. [Usa carteras de un solo clic en integraciones avanzadas](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Crea una integración con Express Checkout Element mediante la API Payment Intents. [Migrar al Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md): Migrar del Payment Request Button Element al web Express Checkout Element. ## 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](https://dashboard.stripe.com/settings/payment_methods). - 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](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) 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](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods). ## Navegadores compatibles Ciertos métodos de pago funcionan con navegadores específicos. | | Apple Pay | Google Pay | Link | PayPal | Amazon Pay | Klarna | | -------------------------------------------- | -------------- | ------------ | -------------- | -------------- | -------------- | -------------- | | Chrome1 | ✓ Supported3 | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | | Edge | ✓ Supported3 | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | | Firefox | ❌ No se admite | ✓ Supported4 | ❌ No se admite | ✓ Admitido | ✓ Admitido | ❌ No se admite | | Opera | ✓ Supported3 | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | | Safari | ✓ Supported2 | ✓ Supported4 | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | | Chrome en iOS 16 o en una versión posterior | ✓ Admitido | ✓ Supported4 | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | | Firefox en iOS 16 o en una versión posterior | ✓ Admitido | ✓ Supported4 | ✓ Admitido | ❌ No se admite | ❌ No se admite | ❌ No se admite | | Edge en iOS 16 o en una versión posterior | ✓ Admitido | ✓ Supported4 | ❌ No se admite | ❌ No se admite | ❌ No se admite | ❌ No se admite | | Chrome en Android | ❌ No se admite | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | ✓ Admitido | 1Es posible que otros navegadores de Chromium sean compatibles. Para obtener más información, consulta los [navegadores compatibles](https://docs.stripe.com/js/appendix/supported_browsers). 2Cuando 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. 3Apple Pay en navegadores de escritorio Chromium solo es compatible con MacOS cuando [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) está configurado en `always`. 4Google Pay en este navegador solo se admite si [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) está configurado en `siempre`. > Express Checkout Element tiene soporte limitado en las vistas web dentro de la aplicación. Muchos métodos de pago requieren ventanas emergentes y es posible que no funcionen correctamente. Para las integraciones de aplicaciones móviles, considera la posibilidad de usar el [SDK para iOS](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) o el [SDK para Android](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android). ## 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](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). ## Texto Puedes controlar el texto de un botón seleccionando un [buttonType](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType). Cada cartera ofrece sus propios tipos. #### Link Link solo ofrece un tipo de botón, que presenta la llamada a la acción «Pagar con Link» y el logotipo 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](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). #### Apple Pay Los tipos de botones de Apple Pay presentan diferentes llamadas a la acción junto al logotipo de Apple Pay. Intentamos detectar la configuración regional de tu cliente y pasársela a Apple para que pueda localizar el texto del botón. También puedes especificar una [configuración regional](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Admitimos los siguientes tipos de botones de Apple Pay. | Tipo de botón | Llamada a la acción | | ------------- | ------------------------- | | `plain` | Ninguno, solo el logotipo | | `add-money` | “Agregar dinero con” | | `book` | “Reservar con” | | `buy` | “Comprar con” | | `check-out` | “Pagar con” | | `contribute` | “Contribuir con” | | `donate` | “Donar con” | | `order` | “Hacer un pedido con” | | `reload` | “Volver a cargar con” | | `rent` | “Alquilar con” | | `subscribe` | “Suscribirse con” | | `support` | “Admitir con” | | `tip` | “Dar consejo con” | | `top-up` | “Recargar con” | #### Google Pay Los tipos de botones de Google Pay presentan diferentes llamadas a la acción junto al logotipo de Google Pay. Intentamos detectar la configuración regional de tu cliente y pasársela a Google Pay para que pueda localizar el texto del botón. También puedes especificar una [configuración regional](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Admitimos los siguientes tipos de botones de Google Pay. | Tipo de botón | Llamada a la acción | | ------------- | ------------------------- | | `plain` | Ninguno, solo el logotipo | | `book` | “Reservar con” | | `buy` | “Comprar con” | | `checkout` | “Pagar con” | | `donate` | “Donar con” | | `order` | “Hacer un pedido con” | | `pay` | “Pagar con” | | `subscribe` | “Suscribirse con” | #### PayPal Los tipos de botones de PayPal presentan diferentes llamadas a la acción junto al logotipo de PayPal. Intentamos detectar la configuración regional de tu cliente y pasársela a PayPal para que puedan localizar el texto del botón. También puedes especificar una [configuración regional](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Admitimos los siguientes tipos de botones de PayPal. | Tipo de botón | Llamada a la acción | | ------------- | ------------------------- | | `paypal` | Ninguno, solo el logotipo | | `checkout` | “Checkout” | | `buynow` | “Comprar ahora” | | `pay` | “Pagar con” | #### Amazon Pay Amazon Pay ofrece solo un tipo de botón, que presenta el logotipo de Amazon Pay sin una llamada a la acción. #### Klarna Los tipos de botones de Klarna presentan diferentes llamadas a la acción además del logotipo de Klarna. Intentamos detectar la configuración regional de tu cliente y pasársela a Klarna para que puedan localizar el texto del botón. También puedes especificar una [configuración regional](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Admitimos los siguientes tipos de botones de Klarna. | | | | | `continue` | «Continuar con» | | `pay` | “Pagar con” | 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. ```js const expressCheckoutOptions = { buttonType: { applePay: 'buy', googlePay: 'buy', paypal: 'buynow', klarna: 'pay', } } const elements = stripe.elements({ locale: 'de', mode: 'payment', amount: 1099, currency: 'usd', }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` ## 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](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight) - Radio del borde utilizando variables con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Temas de los botones](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) > 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. ```js const appearance = { theme: 'stripe', variables: { borderRadius: '36px', } } const expressCheckoutOptions = { buttonHeight: 50, buttonTheme: { applePay: 'white-outline' } } const elements = stripe.elements({ mode: 'payment', amount: 1099, currency: 'usd', appearance, }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` Admitimos los siguientes temas: #### Link Link tiene un tema de un solo botón, que se puede leer sobre un fondo claro u oscuro. #### PayPal PayPal tiene varios temas de botones. Si configuras un tema con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md), Express Checkout Element elige un tema compatible para el botón PayPal. Por ejemplo, si especificas un fondo oscuro, elegimos un tema de botón claro para la visibilidad. También puedes elegir un tema con la opción [buttonTheme.paypal](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-paypal). Consulta la [guía de estilo de los botones](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/) de PayPal para obtener imágenes actualizadas y orientación sobre su uso. Admitimos los siguientes valores: | | | | | `gold` | Los colores dorados y azules de la marca PayPal | | `blue` | Color de marca azul sólido de PayPal | | `silver` | Logotipo de PayPal sobre fondo plateado | | `white` | Logotipo de PayPal sobre fondo blanco | | `black` | Logotipo de PayPal sobre fondo negro | #### Apple Pay Apple Pay tiene varios temas de botones. Si configuras un tema con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md), el elemento Express Checkout elige un tema compatible para el botón Apple Pay. Por ejemplo, si especificas un fondo oscuro, elegimos un tema de botón claro para la visibilidad. También puedes elegir un tema con la opción [buttonTheme.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-applePay). Consulta la [guía de estilo de los botones](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) de Apple Pay para obtener imágenes actualizadas y orientación sobre su uso. Admitimos los siguientes valores: | | | | | `black` | Un fondo negro con texto blanco | | `white` | Un fondo blanco con texto negro | | `white-outline` | Un fondo blanco con texto negro y un borde negro | #### Google Pay Google Pay tiene varios temas de botones. Si configuras un tema con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md), el Express Checkout Element elige un tema compatible para el botón Google Pay. Por ejemplo, si especificas un fondo oscuro, elegimos un tema de botón claro para que se vea bien. También puedes elegir un tema con la opción [buttonTheme.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-googlePay). Consulta las de Google Pay [pautas de la marca](https://developers.google.com/pay/api/web/guides/brand-guidelines) para obtener imágenes actualizadas y orientación sobre su uso. Admitimos los siguientes valores: | | | | | `black` | Un fondo negro con texto blanco | | `white` | Un fondo blanco con texto negro | #### Amazon Pay Amazon Pay tiene un tema de un solo botón. #### Klarna Klarna tiene varios temas de botones. Si configuras un tema con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md), el Express Checkout Element elige un tema compatible para el botón Klarna. Por ejemplo, si especificas un fondo oscuro, elegimos un tema de botón claro para que se vea bien. También puedes elegir un tema con la opción [buttonTheme.klarna](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-klarna). ## 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](https://dashboard.stripe.com/settings/payment_methods). - Puedes anular la lógica predeterminada de Stripe de ordenar los métodos de pago por relevancia. Usa la opción [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-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](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). - Para evitar que aparezca Apple Pay o Google Pay, establece [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) o [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) en `never`. - Para permitir que Apple Pay o Google Pay aparezcan cuando no estén configurados, configura [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) o [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) en `always`. Esto no los obligará a aparecer en plataformas no compatibles o cuando el pago se realice en una moneda no admitida. > Las regulaciones en [Finlandia](https://support.stripe.com/questions/payment-method-legislation-in-finland) y [Suecia](https://support.stripe.com/questions/payment-method-legislation-in-sweden) 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. ## Consulta los métodos de pago disponibles Escucha el evento listo para verificar qué carteras están disponibles para que se muestren los Express Checkout Element. Si no hay billeteras disponibles, proporciona otra opción para que tu cliente pague. ```js () => { const [eceActive, setEceActive] = useState(false); return (
{ if (availablePaymentMethods) { setEceActive(true); } }} /> {eceActive ? : }
); } ``` Como alternativa, oculta todo el Express Checkout Element hasta que sepas que el elemento tiene métodos para mostrar. ```js () => { const [eceActive, setEceActive] = useState(false); return (
); } ``` El mismo evento está disponible en el objeto de elemento cuando se crea sin React. ```js const expressCheckoutElement = elements.create("expressCheckout", { ... }); expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => { console.log(availablePaymentMethods); }); expressCheckoutElement.mount("#express-checkout-element"); ```