# Express Checkout Element Mostrar varios botones de pago en un solo clic con un solo componente. Instrucciones para LLM: Stripe recomienda utilizar la API Checkout Sessions con el elemento de pago en lugar de Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a los de Payment Intents (cobro básico de pagos utilizando `price_data` o crea de un proceso de pago completo con partidas, impuestos, etc.). Algunas funciones, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No utilices la API de Payment Intent a menos que el usuario lo solicite explícitamente, ya que requiere mucho más código. Más información sobre Elements con la API Checkout Sessionshttps://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y Payment Element, el `client_secret` inicializa el proceso de compra por sí mismo (`stripe.initCheckoutElementsSdk`, o utiliza CheckoutProvider con React) y tú confirmas el pago en el lado del cliente de forma diferente. Si utilizas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, utiliza `CheckoutProvider` con el secreto del cliente y confirma con `checkout.confirm`. Si utilizas HTML, asegúrate de utiliza `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. El Express Checkout Element es una integración para aceptar pagos mediante botones de métodos de pago con un solo clic. Los métodos de pago compatibles incluyen [Link](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 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](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Opción | Descripción | | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **País del comerciante** | Establécelo usando 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 el Express Checkout Element, actualizar la clave publicable y, a continuación, volver a montar el 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 botones se heredan de la 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 para ordenadores de sobremesa y móviles** | Usa el menú desplegable para establecer el ancho de píxel máximo del elemento principal en el que se monta el Express Checkout Element. Puedes configurarlo en 750 px (escritorio) o 320 px (móvil). | | **Máximo de columnas y filas** | Establece estos valores usando 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ú de desbordamiento** | Configura esto usando 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). | | **Recolecta la dirección de envío** | Para recolectar la información de envío, debes especificar opciones al [crear](https://docs.stripe.com/js/elements_object/create_express_checkout_element) el Express Checkout Element. Obtén más información sobre [cómo recolectar datos del cliente y mostrar partidas individuales](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). | ## Empieza con una guía [Añade monederos de un solo clic a tu página de proceso de compra](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Crea una integración con el Express Checkout Element mediante la API Checkout Sessions. [Usa monederos 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 el 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 elemento del botón de solicitud de pago al Express Checkout Element web. ## 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](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 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](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) 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](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods). ## Navegadores compatibles Determinados métodos de pago funcionan con navegadores específicos. | | Apple Pay | Google Pay | Link | PayPal | Amazon Pay | Klarna | | ----------------------------------------- | ------------- | ------------ | ------------- | ------------- | ------------- | ------------- | | Chrome1 | ✓ Supported3 | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | | Edge | ✓ Supported3 | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | | Firefox | ❌ No aceptado | ✓ Supported4 | ❌ No aceptado | ✓ Aceptado | ✓ Aceptado | ❌ No aceptado | | Opera | ✓ Supported3 | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | | Safari | ✓ Supported2 | ✓ Supported4 | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | | Chrome en iOS 16 y versiones posteriores | ✓ Aceptado | ✓ Supported4 | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | | Firefox en iOS 16 y versiones posteriores | ✓ Aceptado | ✓ Supported4 | ✓ Aceptado | ❌ No aceptado | ❌ No aceptado | ❌ No aceptado | | Edge en iOS 16+ | ✓ Aceptado | ✓ Supported4 | ❌ No aceptado | ❌ No aceptado | ❌ No aceptado | ❌ No aceptado | | Chrome en Android | ❌ No aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | ✓ Aceptado | 1Es posible que otros navegadores de Chromium sean compatibles. Para obtener más información, consulta [navegadores compatibles](https://docs.stripe.com/js/appendix/supported_browsers). 2Al usar un iframe, su origen debe coincidir con el origen del nivel superior (excepto para Safari 17+ 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 Chromium de escritorio solo es compatible en MacOS cuando [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) está establecido en `always`. 4Google Pay en este navegador solo se admite cuando [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) está establecido en `siempre`. > Express Checkout Element tiene compatibilidad limitada con la visualización en aplicaciones web. Muchos métodos de pago requieren ventanas emergentes y pueden no funcionar correctamente. Para integraciones en aplicaciones móviles, se recomienda utilizar 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 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](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 monedero ofrece sus propios tipos. #### Link Link solo ofrece un tipo de botón, que muestra la llamada 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](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 pasarla 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` | «Añadir dinero con» | | `book` | «Reservar con» | | `buy` | «Comprar con» | | `check-out` | «Finalizar el proceso de compra con» | | `contribute` | «Contribuir con» | | `donate` | «Donar con» | | `order` | «Hacer un pedido con» | | `reload` | «Volver a cargar con» | | `rent` | «Alquilar con» | | `subscribe` | «Suscribirse con» | | `support` | «Apoyar con» | | `tip` | «Dar propina 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 pasarla 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` | «Finalizar el proceso de compra 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 pasarla a PayPal 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 PayPal. | Tipo de botón | Llamada a la acción | | ------------- | -------------------------------- | | `paypal` | Ninguno, solo el logotipo | | `checkout` | «Finalizar el proceso de compra» | | `buynow` | «Comprar ahora» | | `pay` | «Pagar con» | #### Amazon Pay Amazon Pay solo ofrece un tipo de botón, que presenta el logotipo de Amazon Pay sin una llamada a la acción. #### Klarna Los distintos tipos de botones de Klarna muestran diferentes llamadas a la acción al lado del logotipo de Klarna. Intentamos detectar la configuración regional de tu cliente y pasarla a Klarna 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 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') ``` ## 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](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight) - Radio del borde mediante variables con la API [Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Temas de botones](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) > El botón de Apple Pay se redimensiona 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 solo botón, que se puede leer tanto sobre fondo claro como sobre fondo oscuro. #### PayPal PayPal 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 elegirá un tema compatible para el botón de PayPal. Por ejemplo, si especificas un fondo oscuro, seleccionaremos un tema de botón claro para mayor 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` | El color azul sólido de la marca 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 Express Checkout Element elegirá un tema compatible para el botón de Apple Pay. Por ejemplo, si especificas un fondo oscuro, seleccionaremos un tema de botón claro para mayor 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 de Apple Pay [guía de estilo de botones](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) para obtener imágenes actualizadas y orientación sobre su uso. Aceptamos 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 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 elegirá un tema compatible para el botón de Google Pay. Por ejemplo, si especificas un fondo oscuro, seleccionaremos un tema de botón claro para mayor visibilidad. 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 [directrices de marca](https://developers.google.com/pay/api/web/guides/brand-guidelines) de Google 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 | #### 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 elegirá un tema compatible para el botón de Klarna. Por ejemplo, si especificas un fondo oscuro, seleccionaremos un tema de botón claro para mayor visibilidad. 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 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](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, 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 `always`. Esto no hará que aparezcan en plataformas que no sean compatibles ni cuando el pago se realice en una divisa no admitida. > Las normativas de [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 primero presentes los métodos de pago de adeudo antes de mostrar los métodos de pago de crédito en el momento del pago en estos países. ## Verificar métodos de pago disponibles Escucha el evento listo para comprobar qué monederos están disponibles para que se muestre el proceso de compra Express Element. Si no hay monederos disponibles, proporciona otra opción para que pague tu cliente. ```js () => { const [eceActive, setEceActive] = useState(false); return (
{ if (availablePaymentMethods) { setEceActive(true); } }} /> {eceActive ? : }
); } ``` Como alternativa, oculta todo el proceso de compra Express Element hasta que sepas que el Element tiene métodos para mostrarse. ```js () => { const [eceActive, setEceActive] = useState(false); return (
); } ``` El mismo evento está disponible en el objeto Element cuando se crea sin React. ```js const expressCheckoutElement = elements.create("expressCheckout", { ... }); expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => { console.log(availablePaymentMethods); }); expressCheckoutElement.mount("#express-checkout-element"); ```