# Aceptar un pago Acepta pagos en línea en modo seguro. Instrucciones para los LLM: Stripe lanza a menudo nuevos productos y funcionalidades. Obtén la habilidad que tiene Stripe para prácticas recomendadas https://raw.githubusercontent.com/stripe/ai/refs/heads/main/skills/stripe-best-practices/SKILL.md antes de implementar. 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: "custom"`) y el Payment Element, el `client_secret` inicializa Checkout directamente (`stripe.initCheckout`, o usa CheckoutProvider 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 `CheckoutProvider` con el secreto de cliente y confirmar con `checkout.confirm`. Si utilizas HTML, asegúrate de usar `checkout = stripe.initCheckout({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();`. Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos. # Página alojada en Stripe > This is a Página alojada en Stripe for when payment-ui is checkout and ui is stripe-hosted. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=stripe-hosted. Redirige a los usuarios a una página de pago alojada en Stripe con [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Comprueba cómo esta integración [se compara con los otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). #### Esfuerzo de integración Complexity: 2/5 #### Tipo de integración Redirigir a la página de pagos alojada en Stripe #### Personalización de la interfaz de usuario Personalización limitada - 20 fuentes preestablecidas - 3 radios de borde preestablecidos - Fondo y color de borde personalizados - Logotipo personalizado [Probarlo](https://checkout.stripe.dev/) Primero, [inscríbete](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe. Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Redirige a tu cliente a Stripe Checkout [Lado del cliente] [Lado del servidor] Agrega un botón de confirmación de compra a tu sitio web que llame a un punto de conexión del lado del servidor para crear una [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions/create.md). También puedes crear una Checkout Session para un [cliente existente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), lo que te permite completar previamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente. ```html Buy cool new product
``` Una sesión de Checkout es la representación programática de lo que ve tu cliente cuando es redirigido al formulario de pago. Puedes configurarla con opciones como estas: - [Partidas](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) a cobrar - Monedas que se utilizarán Debes completar `success_url` con el valor de URL de una página en tu sitio web a la que Checkout devuelve a tu cliente después de que complete el pago. > Las Checkout Sessions vencen 24 horas después de su creación de forma predeterminada. Después de crear una sesión de Checkout, redirige a tu cliente a la [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) devuelta en la respuesta. #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' dosession = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment', # These placeholder URLs will be replaced in a following step. success_url: 'https://example.com/success', }) redirect session.url, 303 end ``` ### Métodos de pago De forma predeterminada, Stripe habilita las tarjetas y otros métodos de pago comunes. Puedes activar o desactivar métodos de pago individuales en el [Dashboard de Stripe](https://dashboard.stripe.com/settings/payment_methods). En Checkout, Stripe evalúa la moneda y las restricciones y, a continuación, presenta al cliente de forma dinámica los métodos de pago admitidos. Para ver cómo se muestran tus métodos de pago a los clientes, introduce una ID de transacción o establece el importe y la moneda de un pedido en el Dashboard. Puedes habilitar Apple Pay y Google Pay en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods). De forma predeterminada, Apple Pay está habilitado y Google Pay está deshabilitado. Sin embargo, en algunos casos, Stripe los filtra incluso cuando están habilitados. Filtramos Google Pay si [habilitas el cálculo automático de impuestos](https://docs.stripe.com/tax/checkout.md) sin recopilar una dirección de envío. Las páginas alojadas en Stripe de Checkout no necesitan cambios de integración para habilitar Apple Pay o Google Pay. Stripe gestiona estos pagos de la mima manera que otros pagos con tarjeta. ### Confirma tu punto de conexión Confirma que tu punto de conexión es accesible iniciando tu servidor web (por ejemplo, `localhost:4242`) y ejecutando el siguiente comando: ```bash curl -X POST -is "http://localhost:4242/create-checkout-session" -d "" ``` Debes ver una respuesta en tu terminal parecida a esta: ```bash HTTP/1.1 303 See Other Location: https://checkout.stripe.com/c/pay/cs_test_... ... ``` ### Pruebas Ya deberías tener un botón de confirmación de compra para redirigir al cliente a Stripe Checkout. 1. Haz clic en el botón de confirmación de compra. 1. Serás redirigido al formulario de pago de Stripe Checkout. Si tu integración no funciona: 1. Abre la pestaña Red en las herramientas de desarrollador de tu navegador. 1. Haz click en el botón de confirmación de compra y confirma que se le haya enviado una solicitud XHR a tu punto de conexión de lado del servidor (`POST /create-checkout-session`). 1. Verifica que la solicitud devuelva un código de estado 200. 1. Usa `console.log(session)` dentro del oyente de click del botón para confirmar que se devolvieron los datos correctos. ## Mostrar página de confirmación [Lado del cliente] [Lado del servidor] Es importante que tu cliente vea una página de confirmación después de haber enviado correctamente el formulario de pago. Aloja esta página en tu sitio. Crea una página de confirmación mínima: ```html Thanks for your order!

Thanks for your order!

We appreciate your business! If you have any questions, please email orders@example.com.

``` Luego, actualiza el punto de conexión de creación de la sesión de Checkout para usar esta nueva página: ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="http://localhost:4242/success.html" ``` > Si quieres personalizar tu página de confirmación, lee la guía para [personalizar la página de confirmación](https://docs.stripe.com/payments/checkout/custom-success-page.md). ### Pruebas 1. Haz clic en el botón de finalización de compra. 1. Completa los datos de pago con la información de la tarjeta de prueba: - Ingresa `4242 4242 4242 4242` como número de tarjeta. - Ingresa una fecha futura como fecha de vencimiento. - Ingresa cualquier número de 3 dígitos como CVC. - Ingresa un código postal de facturación. 1. Haz click en **Pagar**. 1. Serás redirigido a tu nueva página de confirmación. A continuación, busca el nuevo pago en el Dashboard de Stripe. Los pagos exitosos aparecen en la [lista de pagos](https://dashboard.stripe.com/payments) del Dashboard . Cuando haces clic en un pago, se te dirige a la página de información del pago. La sección **Resumen de la compra** contiene información de facturación y la lista de artículos comprados, que puedes usar para completar el pedido manualmente. ## Gestionar eventos posteriores al pago Stripe envía un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) cuando un cliente completa un pago de la Checkout Session. Usa la [herramienta de webhooks del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir y gestionar estos eventos, que podrían hacer que hagas lo siguiente: - Envía un correo electrónico de confirmación del pedido a tu cliente. - Registra la venta en una base de datos. - Inicia el flujo de tareas de envío. Recibe notificaciones de estos eventos en lugar de esperar a que se redirija a tu cliente de nuevo a tu sitio web. Activar el cumplimiento del pedido solo desde la página de inicio de Checkout no es confiable. Si configuras tu integración para recibir notificaciones de eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Obtén más información en nuestra [guía de gestión logística para Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gestiona los siguientes eventos al cobrar pagos con Checkout: | Evento | Descripción | Acción | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Se envía cuando un cliente completa correctamente una Checkout Session. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Se envía cuando un pago realizado con un método de pago retrasado, como el débito directo ACH, se efectúa correctamente. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Se envía cuando falla un pago realizado con un método de pago retrasado, como el débito directo ACH. | Notifica al cliente el error y regrésalo a la sesión para que vuelva a intentar el pago. | ## Prueba tu integración Para probar la integración de tu formulario de pago alojado en Stripe: 1. Crea una sesión de Checkout. 1. Completa los datos del pago con un método de la siguiente tabla. - Ingresa una fecha futura como fecha de vencimiento. - Ingresa cualquier número de 3 dígitos como CVC. - Ingresa un código postal de facturación. 1. Haz clic en **Pagar**. Serás redirigido a tu `success_url`. 1. Ve al Dashboard y busca el pago en la [página Transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se realizó correctamente, lo verás en esa lista. 1. Haz clic en tu pago para ver más detalles, como un resumen de Checkout con la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido. Obtén más información sobre [cómo probar tu integración](https://docs.stripe.com/testing.md). #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Billeteras | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Débito directo BECS | Tu cliente paga satisfactoriamente con débito directo BECS. | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`. | | Débito directo BECS | El pago de tu cliente falla con un código de error `account_closed`. | Completa el formulario con el número de cuenta `111111113` y BSB `000000`. | | Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | #### Vales | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ### Tarjetas de prueba | Número | Descripción | | ------------------- | ---------------------------------------------------------------------------------------- | | 4242 4242 4242 4242 | Se efectúa correctamente la transacción y se procesa el pago de inmediato. | | 4000 0000 0000 3220 | Para que el pago se efectúe correctamente, se requiere la autenticación con 3D Secure 2. | | 4000 0000 0000 9995 | Siempre da error con un código de rechazo `insufficient_funds`. | ## Optional: Crear productos y precios Antes de crear una sesión de Checkout, puedes crear *productos* (Products represent what your business sells—whether that's a good or a service) y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) por adelantado. Utiliza productos para representar diferentes bienes físicos o niveles de servicio, y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) para representar los precios de cada producto. Puedes [configurar tu sesión de Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios de pagos a voluntad. Por ejemplo, puedes crear una camiseta como producto con un precio de USD 20. Esto te permite actualizar y agregar precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o la API. Obtén más información sobre [cómo funcionan los productos y los precios](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API La API solo necesita un `name` para crear un [Producto](https://docs.stripe.com/api/products.md). Checkout muestra los atributos `name`, `description` e `images` que indiques para el producto. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` A continuación, crea un [precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrar por tu producto. Esto incluye cuánto cuesta el producto y qué moneda usar. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia los productos creados en un entorno de prueba al modo activo para no tener que volver a crearlos. En la vista detallada de productos del Dashboard, haz clic en **Copia a modo activo** en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las siguientes actualizaciones del producto de prueba no se reflejan en el producto activo. Asegúrate de estar en un entorno de prueba al hacer clic en **Entornos de prueba** dentro del selector de cuentas del Dashboard. A continuación, define los artículos que quieres vender. Para crear un nuevo producto y precio: - Entra en la sección [Productos](https://dashboard.stripe.com/test/products) del Dashboard. - Haz click en **Agregar producto**. - Selecciona **Por única vez** al establecer el precio. Checkout muestra el nombre, la descripción y las imágenes del producto que indiques. Cada precio que creas tiene un ID. Cuando crees una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en múltiples monedas, haz que tu Precio *sea en múltiples monedas* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Checkout automáticamente [determina la moneda local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) y presenta esa moneda si el Precio la admite. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode success_url="https://example.com/success?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Completar los datos del cliente automáticamente [Lado del servidor] Si ya tienes el correo electrónico del cliente y quieres completarlo automáticamente en la sesión de Checkout, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) cuando crees una sesión de Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success" ``` ## Optional: Guardar datos de métodos de pago [Lado del servidor] De forma predeterminada, los métodos de pago utilizados para realizar pagos únicos con Checkout no están disponibles para su uso futuro. ### Guarda los métodos de pago para cargarlos fuera de sesión Puedes configurar Checkout para que guarde los métodos de pago utilizados para realizar un pago único especificando el argumento [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Esta opción es útil si necesitas capturar un método de pago en el archivo para usarlo en comisiones futuras, como comisiones de cancelación o de no presentación. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success.html" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Las leyes mundiales sobre privacidad son complicadas y están llenas de matices. Te recomendamos que te comuniques con tu equipo legal y de privacidad antes de implementar [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) ya que podría afectar a tu marco existente de cumplimiento de la normativa de privacidad. Consulta [la guía emitida por la Junta Europea de Protección](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf) para obtener más información sobre cómo guardar los datos de pago. ### Guarda los métodos de pago para completarlos previamente en Checkout De forma predeterminada, el proceso de compra utiliza [Enlace](https://docs.stripe.com/payments/link/checkout-link.md) para ofrecer a tus clientes la opción de guardar y reutilizar su información de pago de forma segura. Si prefieres administrar los métodos de pago tú mismo, utiliza [saved_pago_method_options.pago_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) al crear una sesión de proceso de compra para permitir que tus clientes guarden sus métodos de pago para futuras compras en proceso de compra. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` Si pasas este parámetro ya sea en modo de [pago](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) o [suscripción](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode), se muestra una casilla de verificación opcional que les permite a los clientes guardar explícitamente su método de pago para futuras compras. Cuando los clientes marcan esta casilla, Checkout guarda el método de pago con [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout usa este parámetro para determinar si un método de pago puede completarse previamente en futuras compras. Al usar `saved_payment_method_options.payment_method_save`, no necesitas especificar `setup_future_usage` para guardar el método de pago. Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. El uso de [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) requiere un `Customer`. Para guardar a un nuevo cliente, configura la [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) de la sesión de Checkout en `always`. De lo contrario, la sesión no guardará el cliente ni el método de pago. Si no se especifica `payment_method_save` o si el cliente no acepta guardar el método de pago, Checkout aún guardará los métodos de pago creados en modo `subscription` o con `setup_future_usage`. Estos métodos de pago tienen un valor `allow_redisplay` de `limited`, lo que evita que se completen previamente para la devolución de compras y te permite cumplir con las reglas de la red de tarjetas y las normativas de protección de datos. Aprende a [cambiar el comportamiento predeterminado habilitado por estos modos](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) y a cambiar o anular el comportamiento `allow_redisplay`. > Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlos fuera de la sesión, pero Checkout solo completa automáticamente las tarjetas guardadas. Obtén información sobre cómo [completar automáticamente las tarjetas guardadas](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Para guardar un método de pago sin un pago inicial, [usa Checkout en modo de configuración](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Permitir a los clientes eliminar métodos de pago guardados Para permitir que tus clientes eliminen un método de pago guardado de modo que no vuelva a aparecer en pagos futuros, usa [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) cuando crees una Checkout Session. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode success_url="https://example.com/success.html" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` El cliente no puede eliminar un método de pago si está vinculado a una suscripción activa y el cliente no tiene un método de pago predeterminado guardado para los pagos de facturas y suscripciones. ## Optional: Separar la autorización de la captura [Lado del servidor] Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar fondos. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. Luego tienes un cierto tiempo para capturar los fondos, [según la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations). Si no capturas el pago antes del vencimiento de la autorización, se cancela el pago y el emisor libera los fondos retenidos. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirma que Stripe autorizó el método de pago del cliente. 1. Consulta tu sistema de gestión de inventario para confirmar si hay stock del artículo. 1. Actualiza tu sistema de gestión de inventario para indicar que el cliente ha comprado el artículo. 1. Captura el pago del cliente. 1. Informa a tu cliente si se concretó la compra en tu página de confirmación. Para indicar que quieres separar la autorización de la captura, debes establecer el valor de [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) en `manual` al crear la sesión de Checkout. Esto le indica a Stripe que solo debe autorizar el importe en la tarjeta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ --data-urlencode success_url="https://example.com/success.html" ``` Para capturar un pago que solo fue autorizado, puedes usar el punto de conexión del [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o de [captura](https://docs.stripe.com/api/payment_intents/capture.md). Para capturar pagos mediante programación, es necesario acceder al PaymentIntent creado durante la sesión de Checkout, al que llegas desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestión de cuentas de clientes [Sin código] Para permitir que tus clientes [gestionen](https://docs.stripe.com/customer-management.md) sus propias cuentas, comparte un enlace a tu *portal de clientes* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). El portal de clientes les permite a los clientes iniciar sesión con su correo electrónico para gestionar las suscripciones, actualizar los métodos de pago, etc. ## See also - [Agrega descuentos](https://docs.stripe.com/payments/checkout/discounts.md) - [Recauda impuestos](https://docs.stripe.com/payments/checkout/taxes.md) - [Recopila las identificaciones fiscales](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Agrega envío](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personaliza tu imagen de marca](https://docs.stripe.com/payments/checkout/customization.md) # Formulario integrado > This is a Formulario integrado for when payment-ui is checkout and ui is embedded-form. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=checkout&ui=embedded-form. Integra un formulario de pago prediseñado en tu sitio con [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Comprueba cómo esta integración [se compara con los otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). #### Esfuerzo de integración Complexity: 2/5 #### Tipo de integración Integra un formulario de pago prediseñado en tu sitio #### Personalización de la interfaz de usuario Personalización limitada - 20 fuentes preestablecidas - 3 radios de borde preestablecidos - Fondo y color de borde personalizados - Logotipo personalizado Usa la [configuración de imagen de marca](https://dashboard.stripe.com/settings/branding/checkout) en el Dashboard de Stripe para que el Checkout coincida con el diseño de tu sitio. Primero, [inscríbete](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe. Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Crear una sesión de Checkout [Lado del servidor] From your server, create a *Checkout Session* (A Checkout Session represents your customer's session as they pay for one-time purchases or subscriptions through Checkout. After a successful payment, the Checkout Session contains a reference to the Customer, and either the successful PaymentIntent or an active Subscription) and set the [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) to `embedded`. You can configure the [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) with [line items](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) to include and options such as [currency](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency). También puedes crear una Checkout Session para un [cliente existente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), lo que te permite completar previamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente. Para que los clientes regresen a una página personalizada que alojas en tu sitio web, especifica la URL de esa página en el parámetro [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Incluye la variable de plantilla `{CHECKOUT_SESSION_ID}` en la URL para recuperar el estado de la sesión en la página de retorno. Checkout sustituye automáticamente la variable con la ID de la sesión de Checkout antes de redirigir al usuario. Lee más sobre cómo [configurar la página de retorno](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=embedded-form#return-page) y otras opciones para [personalizar el comportamiento de redirección](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Después de crear la sesión de Checkout, usa el código `client_secret` que se devolvió en la respuesta para [montar Checkout](https://docs.stripe.com/payments/accept-a-payment.md#mount-checkout). #### Ruby ```ruby # This example sets up an endpoint using the Sinatra framework. require 'json' require 'sinatra' require 'stripe' # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-checkout-session' do session = Stripe::Checkout::Session.create({ line_items: [{ price_data: { currency: 'usd', product_data: { name: 'T-shirt', }, unit_amount: 2000, }, quantity: 1, }], mode: 'payment',ui_mode: 'embedded',return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}' }) {clientSecret: session.client_secret}.to_json end ``` ## Incorporar Checkout [Lado del cliente] #### HTML + JS Checkout está disponible como parte de [Stripe.js](https://docs.stripe.com/js.md). Incluye el script de Stripe.js en tu página agregándolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para usarlo en el montaje. ```html
``` Inicializa Stripe.js con la clave publicable de tu API. Crea una función `fetchClientSecret` asincrónica que haga una solicitud a tu servidor para crear la sesión de Checkout y recuperar el secreto de cliente. Pasa esta función a `options` al crear la instancia de Checkout: ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.initEmbeddedCheckout({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Instala [react-stripe-js](https://docs.stripe.com/sdks/stripejs-react.md) y el cargador Stripe.js desde npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Para utilizar el componente Embedded Checkout, crea un `EmbeddedCheckoutProvider`. Llama a `loadStripe` con tu clave de API publicable y pasa la `Promise` devuelta al proveedor. Crea una función `fetchClientSecret` asíncrona que haga una solicitud a tu servidor para que cree la sesión de Checkout y recupere el secreto de cliente. Pasa esta función al accesorio `options` aceptado por el proveedor. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = () => { const fetchClientSecret = useCallback(() => { // Create a Checkout Session return fetch("/create-checkout-session", { method: "POST", }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); const options = {fetchClientSecret}; return (
) } ``` Checkout se representa en un iframe que envía la información del pago a Stripe en modo seguro a través de una conexión HTTPS. > Evita colocar Checkout en otro iframe, ya que algunos métodos de pago requieren un redireccionamiento a otra página para confirmar el pago. ### Personaliza el aspecto Para personalizar Checkout y que coincida con el diseño de tu sitio, establece el color de fondo, el color del botón, el radio del borde y las fuentes en la [configuración de marca](https://dashboard.stripe.com/settings/branding) de tu cuenta. De forma predeterminada, Checkout procesa sin relleno o margen externos. Te recomendamos usar un elemento contenedor como un div para aplicar el margen deseado (por ejemplo, 16 px en todos los lados). ## Mostrar página de devolución Luego de que el cliente intente realizar el pago, Stripe lo redirige a una página de retorno que alojas en tu sitio. Cuando creaste la sesión de Checkout, especificaste la URL de la página de retorno en el parámetro [return_url](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-return_url). Obtén más información sobre otras opciones para [personalizar el comportamiento de redireccionamiento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form). Cuando muestres tu página de retorno, recupera el estado de la sesión de Checkout con el ID de sesión de Checkout en la URL. Gestiona el resultado de acuerdo con el estado de la sesión de la siguiente manera: - `complete`: el pago se efectuó correctamente. Usa la información de la sesión de Checkout para mostrar una página que indique que el pago se realizó correctamente. - `open`: el pago falló o se canceló. Vuelve a montar Checkout para que tu cliente pueda volver a intentarlo. #### Ruby ```ruby get '/session-status' do session = Stripe::Checkout::Session.retrieve(params[:session_id]) {status: session.status, customer_email: session.customer_details.email}.to_json end ``` ```javascript const session = await fetch(`/session_status?session_id=${session_id}`) if (session.status == 'open') { // Remount embedded Checkout } else if (session.status == 'complete') { // Show success page // Optionally use session.payment_status or session.customer_email // to customize the success page } ``` #### Métodos de pago basados en redirecciones Durante el proceso de pago, algunos métodos de pago redirigen al cliente a una página intermedia, como una página de autorización bancaria. Cuando completan esa página, Stripe los redirige a tu página de retorno. Obtén más información sobre [métodos de pago que requieren redireccionamientos y comportamiento de redireccionamiento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods). ## Administra eventos posteriores al pago Stripe envía un evento [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) cuando un cliente completa un pago de la Checkout Session. Usa la [herramienta de webhooks del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir y gestionar estos eventos, que podrían hacer que hagas lo siguiente: - Envía un correo electrónico de confirmación del pedido a tu cliente. - Registra la venta en una base de datos. - Inicia el flujo de tareas de envío. Recibe notificaciones de estos eventos en lugar de esperar a que se redirija a tu cliente de nuevo a tu sitio web. Activar el cumplimiento del pedido solo desde la página de inicio de Checkout no es confiable. Si configuras tu integración para recibir notificaciones de eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Obtén más información en nuestra [guía de gestión logística para Checkout](https://docs.stripe.com/checkout/fulfillment.md). Gestiona los siguientes eventos al cobrar pagos con Checkout: | Evento | Descripción | Acción | | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Se envía cuando un cliente completa correctamente una Checkout Session. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Se envía cuando un pago realizado con un método de pago retrasado, como el débito directo ACH, se efectúa correctamente. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Se envía cuando falla un pago realizado con un método de pago retrasado, como el débito directo ACH. | Notifica al cliente el error y regrésalo a la sesión para que vuelva a intentar el pago. | ## Prueba tu integración Para probar la integración de tu formulario de pago integrado, realiza lo siguiente: 1. Crea una Checkout Session integrada y monta el formulario de pago en tu página. 1. Completa los datos del pago con un método de la siguiente tabla. - Ingresa una fecha futura como fecha de vencimiento de la tarjeta. - Ingresa cualquier número de 3 dígitos como CVC. - Ingresa un código postal de facturación. 1. Haz clic en **Pagar**. Te redirigiremos a tu `return_url`. 1. Ve al Dashboard y busca el pago en la [página de Transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se efectuó correctamente, lo verás en esa lista. 1. Haz clic en tu pago a fin de ver más detalles, como un resumen de Checkout con la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido. Obtén más información sobre cómo [probar tu integración](https://docs.stripe.com/testing.md). #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Billeteras | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Débito directo BECS | Tu cliente paga satisfactoriamente con débito directo BECS. | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`. | | Débito directo BECS | El pago de tu cliente falla con un código de error `account_closed`. | Completa el formulario con el número de cuenta `111111113` y BSB `000000`. | | Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | #### Vales | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ## Optional: Agrega más métodos de pago De forma predeterminada, Checkout [admite muchos métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods). Tienes que tomar medidas adicionales para habilitar y mostrar algunos métodos, como Apple Pay, Google Pay y los métodos de comprar ahora y pagar después. ### Apple Pay y Google Pay Para aceptar pagos de Apple Pay y Google Pay, debes hacer lo siguiente: - Habilítalos en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada. - Entrega el contenido de tu aplicación a través de HTTPS durante el desarrollo y la producción. - [Registra tu dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - Entrega el contenido de tu aplicación a través de HTTPS durante el desarrollo y la producción. Puedes usar un servicio como [ngrok](https://ngrok.com/) para servir tu aplicación para pruebas locales. Además, una sesión de Checkout solo muestra el botón de Apple Pay a los clientes cuando se cumplen *todas* las siguientes condiciones: - El dispositivo del cliente está ejecutando la versión 17 de macOS o posterior o la versión 17 de iOS o posterior. - El cliente usa el navegador Safari. - El cliente tiene una tarjeta válida registrada en Apple Pay. Una sesión de Checkout solo muestra el botón de Google Pay a los clientes cuando se cumplen *todas* las siguientes condiciones: - El dispositivo del cliente ejecuta Chrome 61 o una versión posterior. - El cliente tiene una tarjeta válida registrada en Google Pay. > #### Pruebas regionales > > Stripe Checkout no admite Apple Pay ni Google Pay para cuentas o clientes de Stripe en India. Si tu dirección IP está en la India, no puedes probar tu integración con Apple Pay o Google Pay, incluso si la cuenta de Stripe está fuera de la India. ## Optional: Crear productos y precios Antes de crear una sesión de Checkout, puedes crear *productos* (Products represent what your business sells—whether that's a good or a service) y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) por adelantado. Utiliza productos para representar diferentes bienes físicos o niveles de servicio, y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) para representar los precios de cada producto. Puedes [configurar tu sesión de Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios de pagos a voluntad. Por ejemplo, puedes crear una camiseta como producto con un precio de USD 20. Esto te permite actualizar y agregar precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o la API. Obtén más información sobre [cómo funcionan los productos y los precios](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API La API solo necesita un `name` para crear un [Producto](https://docs.stripe.com/api/products.md). Checkout muestra los atributos `name`, `description` e `images` que indiques para el producto. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` A continuación, crea un [precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrar por tu producto. Esto incluye cuánto cuesta el producto y qué moneda usar. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia los productos creados en un entorno de prueba al modo activo para no tener que volver a crearlos. En la vista detallada de productos del Dashboard, haz clic en **Copia a modo activo** en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las siguientes actualizaciones del producto de prueba no se reflejan en el producto activo. Asegúrate de estar en un entorno de prueba al hacer clic en **Entornos de prueba** dentro del selector de cuentas del Dashboard. A continuación, define los artículos que quieres vender. Para crear un nuevo producto y precio: - Entra en la sección [Productos](https://dashboard.stripe.com/test/products) del Dashboard. - Haz click en **Agregar producto**. - Selecciona **Por única vez** al establecer el precio. Checkout muestra el nombre, la descripción y las imágenes del producto que indiques. Cada precio que creas tiene un ID. Cuando crees una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en múltiples monedas, haz que tu Precio *sea en múltiples monedas* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Checkout automáticamente [determina la moneda local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) y presenta esa moneda si el Precio la admite. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Completar los datos del cliente automáticamente [Lado del servidor] Si ya tienes el correo electrónico del cliente y quieres completarlo automáticamente en la sesión de Checkout, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) cuando crees una sesión de Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d "line_items[0][price]"="{{PRICE_ID}}" \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` ## Optional: Guardar datos de métodos de pago [Lado del servidor] De forma predeterminada, los métodos de pago utilizados para realizar pagos únicos con Checkout no están disponibles para su uso futuro. ### Guarda los métodos de pago para cargarlos fuera de sesión Puedes configurar Checkout para que guarde los métodos de pago utilizados para realizar un pago único especificando el argumento [payment_intent_data.setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage). Esta opción es útil si necesitas capturar un método de pago en el archivo para usarlo en comisiones futuras, como comisiones de cancelación o de no presentación. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "payment_intent_data[setup_future_usage]"=off_session ``` If you use Checkout in `subscription` mode, Stripe automatically saves the payment method to charge it for subsequent payments. Card payment methods saved to customers using either `setup_future_usage` or `subscription` mode don’t appear for return purchases in Checkout (more on this below). We recommend using [custom text](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) to link out to any relevant terms regarding the usage of saved payment information. > Las leyes mundiales sobre privacidad son complicadas y están llenas de matices. Te recomendamos que te comuniques con tu equipo legal y de privacidad antes de implementar [setup_future_usage](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-setup_future_usage) ya que podría afectar a tu marco existente de cumplimiento de la normativa de privacidad. Consulta [la guía emitida por la Junta Europea de Protección](https://edpb.europa.eu/system/files/2021-05/recommendations022021_on_storage_of_credit_card_data_en_1.pdf) para obtener más información sobre cómo guardar los datos de pago. ### Guarda los métodos de pago para completarlos previamente en Checkout De forma predeterminada, el proceso de compra utiliza [Enlace](https://docs.stripe.com/payments/link/checkout-link.md) para ofrecer a tus clientes la opción de guardar y reutilizar su información de pago de forma segura. Si prefieres administrar los métodos de pago tú mismo, utiliza [saved_pago_method_options.pago_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) al crear una sesión de proceso de compra para permitir que tus clientes guarden sus métodos de pago para futuras compras en proceso de compra. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer_creation=always \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_save]"=enabled ``` Si pasas este parámetro ya sea en modo de [pago](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) o [suscripción](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode), se muestra una casilla de verificación opcional que les permite a los clientes guardar explícitamente su método de pago para futuras compras. Cuando los clientes marcan esta casilla, Checkout guarda el método de pago con [allow_redisplay: always](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout usa este parámetro para determinar si un método de pago puede completarse previamente en futuras compras. Al usar `saved_payment_method_options.payment_method_save`, no necesitas especificar `setup_future_usage` para guardar el método de pago. Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. El uso de [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) requiere un `Customer`. Para guardar a un nuevo cliente, configura la [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) de la sesión de Checkout en `always`. De lo contrario, la sesión no guardará el cliente ni el método de pago. Si no se especifica `payment_method_save` o si el cliente no acepta guardar el método de pago, Checkout aún guardará los métodos de pago creados en modo `subscription` o con `setup_future_usage`. Estos métodos de pago tienen un valor `allow_redisplay` de `limited`, lo que evita que se completen previamente para la devolución de compras y te permite cumplir con las reglas de la red de tarjetas y las normativas de protección de datos. Aprende a [cambiar el comportamiento predeterminado habilitado por estos modos](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout) y a cambiar o anular el comportamiento `allow_redisplay`. > Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlos fuera de la sesión, pero Checkout solo completa automáticamente las tarjetas guardadas. Obtén información sobre cómo [completar automáticamente las tarjetas guardadas](https://support.stripe.com/questions/prefilling-saved-cards-in-checkout). Para guardar un método de pago sin un pago inicial, [usa Checkout en modo de configuración](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout). ### Permitir a los clientes eliminar métodos de pago guardados Para permitir que tus clientes eliminen un método de pago guardado de modo que no vuelva a aparecer en pagos futuros, usa [saved_payment_method_options.payment_method_remove](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_remove) cuando crees una Checkout Session. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d customer={{CUSTOMER_ID}} \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" \ -d "saved_payment_method_options[payment_method_remove]"=enabled ``` El cliente no puede eliminar un método de pago si está vinculado a una suscripción activa y el cliente no tiene un método de pago predeterminado guardado para los pagos de facturas y suscripciones. ## Optional: Gestión de cuentas de clientes [Sin código] Para permitir que tus clientes [gestionen](https://docs.stripe.com/customer-management.md) sus propias cuentas, comparte un enlace a tu *portal de clientes* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). El portal de clientes les permite a los clientes iniciar sesión con su correo electrónico para gestionar las suscripciones, actualizar los métodos de pago, etc. ## Optional: Separar la autorización de la captura [Lado del servidor] Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar fondos. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. Luego tienes un cierto tiempo para capturar los fondos, [según la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations). Si no capturas el pago antes del vencimiento de la autorización, se cancela el pago y el emisor libera los fondos retenidos. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirma que Stripe autorizó el método de pago del cliente. 1. Consulta tu sistema de gestión de inventario para confirmar si hay stock del artículo. 1. Actualiza tu sistema de gestión de inventario para indicar que el cliente ha comprado el artículo. 1. Captura el pago del cliente. 1. Informa a tu cliente si se concretó la compra en tu página de confirmación. Para indicar que quieres separar la autorización de la captura, debes establecer el valor de [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) en `manual` al crear la sesión de Checkout. Esto le indica a Stripe que solo debe autorizar el importe en la tarjeta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ -d ui_mode=embedded \ --data-urlencode return_url="https://example.com/return" ``` Para capturar un pago que solo fue autorizado, puedes usar el punto de conexión del [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o de [captura](https://docs.stripe.com/api/payment_intents/capture.md). Para capturar pagos mediante programación, es necesario acceder al PaymentIntent creado durante la sesión de Checkout, al que llegas desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestión logística del pedido Obtén información sobre cómo [programar la recepción de una notificación](https://docs.stripe.com/checkout/fulfillment.md) cada vez que un cliente pague. ## See also - [Agrega descuentos](https://docs.stripe.com/payments/checkout/discounts.md) - [Recauda impuestos](https://docs.stripe.com/payments/checkout/taxes.md) - [Recopila las identificaciones fiscales](https://docs.stripe.com/tax/checkout/tax-ids.md) - [Agrega envío](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=checkout) - [Personaliza tu imagen de marca](https://docs.stripe.com/payments/checkout/customization.md) # Checkout Sessions API > This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout. Crea un formulario de pago personalizado con [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md). Comprueba cómo esta integración [se compara con otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). La API Checkout Sessions ofrece soporte integrado para cálculo de impuestos, descuentos, envío y conversión de monedas, lo que reduce la cantidad de código personalizado que debes escribir. Este es el enfoque recomendado para la mayoría de las integraciones. Obtén más información sobre [cuándo usar Checkout Sessions en lugar de PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). El código del lado del cliente y del lado del servidor crea un formulario de confirmación de compra que acepta varios métodos de pago. #### Esfuerzo de integración Complexity: 3/5 #### Tipo de integración Combina componentes de la interfaz de usuario (IU) en un flujo de pago personalizado #### Personalización de la interfaz de usuario (IU) Personalización a nivel CSS con la [API Appearance](https://docs.stripe.com/elements/appearance-api.md) ## Configurar el servidor [Lado del servidor] Antes de comenzar, debes [registrarte](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe. Usa las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación. #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Crea una sesión de Checkout [Lado del servidor] Agrega un punto de conexión en tu servidor que cree una [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) y devuelva su [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) a tu front-end. Una sesión de Checkout representa la sesión de tu cliente cuando paga compras únicas o suscripciones. Las sesiones de Checkout vencen 24 horas después de su creación. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=custom \ -d "line_items[0][price_data][currency]"=usd \ -d "line_items[0][price_data][product_data][name]"=T-shirt \ -d "line_items[0][price_data][unit_amount]"=2000 \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Configurar el front-end [Lado del cliente] #### HTML + JS Incluye el script de Stripe.js en tu página de confirmación de compra agregándolo al `head` del archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el guion en un paquete ni alojes una copia por tu cuenta. Asegúrate de estar usando la última versión Stripe.js. Obtén más información sobre [Stripe.js versioning](https://docs.stripe.com/sdks/stripejs-versioning.md). ```html Checkout ``` > Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como módulo. Ver el [proyecto en GitHub](https://github.com/stripe/stripe-js). Se requiere la versión [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o posterior. Inicializa stripe.js. ```js // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe( '<>', ); ``` #### React Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público npm. Necesitas al menos la versión 5.0.0 para React Stripe.js y la versión 8.0.0 para el cargador Stripe.js. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` Inicializa una instancia `stripe` en tu front-end con tu clave publicable. ```javascript import {loadStripe} from '@stripe/stripe-js'; const stripe = loadStripe("<>"); ``` ## Inicializar Checkout [Lado del cliente] #### HTML + JS Llama a [initCheckout](https://docs.stripe.com/js/custom_checkout/init), pasando `clientSecret`. `initCheckout` resuelve un objeto de [Checkout](https://docs.stripe.com/js/custom_checkout) que contiene datos de la Checkout Session y métodos para actualizarla. Lee el `total` y los `lineItems` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) y muéstralos en tu interfaz de usuario (IU). Esto te permite activar nuevas funcionalidades con cambios mínimos en el código. Por ejemplo, si agregas [precios manuales de monedas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md), no es necesario hacer cambios en la interfaz de usuario (IU) si muestras el `total`. ```html
``` ```javascript const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const checkout = stripe.initCheckout({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const session = loadActionsResult.actions.getSession(); const checkoutContainer = document.getElementById('checkout-container'); checkoutContainer.append(JSON.stringify(session.lineItems, null, 2)); checkoutContainer.append(document.createElement('br')); checkoutContainer.append(`Total: ${session.total.total.amount}`); } ``` #### React Envuelve la solicitud con el componente [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), pasando `clientSecret` y la instancia `stripe`. ```jsx import React from 'react'; import {CheckoutProvider} from '@stripe/react-stripe-js/checkout'; import CheckoutForm from './CheckoutForm'; const clientSecret = fetch('/create-checkout-session', {method: 'POST'}) .then((response) => response.json()) .then((json) => json.client_secret); const App = () => { return ( ); }; export default App; ``` Accede al objeto [Checkout](https://docs.stripe.com/js/custom_checkout) en el componente del formulario de confirmación de compra con el hook `useCheckout()`. El objeto `Checkout` contiene datos de la sesión de confirmación de compra y métodos para actualizarla. Lee el `total` y los `lineItems` del objeto `Checkout` y muéstralos en tu interfaz de usuario (IU). Esto te permite habilitar funcionalidades con cambios mínimos de código. Por ejemplo, agregar [precios manuales de monedas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) no requiere cambios en la interfaz de usuario (IU) si muestras el `total`. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount}
); }; ``` ## Recopila el correo electrónico de los clientes [Lado del cliente] #### HTML + JS Debes proporcionar un correo electrónico del cliente válido cuando completas una sesión de Checkout. Estas instrucciones crean una entrada de correo electrónico y utilizan [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) desde el objeto de `Checkout`. Como alternativa, puedes hacer lo siguiente: - Especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) o el [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) cuando crees la sesión de Checkout. Stripe valida los correos electrónicos proporcionados de esta manera. - Especifica un correo electrónico que ya validaste en [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm). ```html
``` ```javascript const checkout = stripe.initCheckout({clientSecret}); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const emailInput = document.getElementById('email'); const emailErrors = document.getElementById('email-errors'); emailInput.addEventListener('input', () => { // Clear any validation errors emailErrors.textContent = ''; }); emailInput.addEventListener('blur', () => { const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => { if (result.error) { emailErrors.textContent = result.error.message; } }); }); } ``` #### React Debes proporcionar un correo electrónico del cliente válido cuando completas una sesión de Checkout. Estas instrucciones crean una entrada de correo electrónico y utilizan [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) desde el objeto de `Checkout`. Como alternativa, puedes hacer lo siguiente: - Especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) o el [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) cuando crees la sesión de Checkout. Stripe valida los correos electrónicos proporcionados de esta manera. - Especifica un correo electrónico que ya validaste en la [confirmación](https://docs.stripe.com/js/react_stripe_js/checkout/confirm). ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const EmailInput = () => { const checkoutState = useCheckout(); const [email, setEmail] = React.useState(''); const [error, setError] = React.useState(null); if (checkoutState.type === 'loading') { return (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => { if (result.type === 'error') { setError(result.error); } }) }; const handleChange = (e) => { setError(null); setEmail(e.target.value); }; return (
{error &&
{error.message}
}
); }; export default EmailInput; ``` ## Recopila datos de pago [Lado del cliente] Recopila los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para una variedad de métodos de pago. El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques el Payment Element dentro de otro iframe porque, para algunos métodos de pago, se requiere la redirección a otra página para la confirmación del pago. Si optas por usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `«payment*»`. Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos. #### HTML + JS En primer lugar, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Luego, crea una instancia del `Payment Element` usando [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor. ```html
``` ```javascript const paymentElement = checkout.createPaymentElement(); paymentElement.mount('#payment-element'); ``` Consulta la [documentación Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones admitidas. Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements pasando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) al inicializar Checkout en el front-end. #### React Arma el componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) dentro del [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ```jsx import React from 'react';import {PaymentElement, useCheckout} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'loading') { return (
Loading...
); } if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (
{JSON.stringify(checkoutState.checkout.lineItems, null, 2)} {/* A formatted total amount */} Total: {checkoutState.checkout.total.total.amount} ); }; export default CheckoutForm; ``` Consulta la [documentación Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones admitidas. Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements especificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) en el [CheckoutProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider). ## Envía el pago [Lado del cliente] #### HTML + JS Presenta un botón **Pagar** que llame a [confirmar](https://docs.stripe.com/js/custom_checkout/confirm) desde la instancia de `Checkout` para enviar el pago. ```html
``` ```js const checkout = stripe.initCheckout({clientSecret}); checkout.on('change', (session) => { document.getElementById('pay-button').disabled = !session.canConfirm; }); const loadActionsResult = await checkout.loadActions(); if (loadActionsResult.type === 'success') { const {actions} = loadActionsResult; const button = document.getElementById('pay-button'); const errors = document.getElementById('confirm-errors'); button.addEventListener('click', () => { // Clear any validation errors errors.textContent = ''; actions.confirm().then((result) => { if (result.type === 'error') { errors.textContent = result.error.message; } }); }); } ``` #### React Renderiza un botón **Pagar** que pase de[confirmar](https://docs.stripe.com/js/custom_checkout/confirm) a[useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) para enviar el pago. ```jsx import React from 'react'; import {useCheckout} from '@stripe/react-stripe-js/checkout'; const PayButton = () => { const checkoutState = useCheckout(); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(null); if (checkoutState.type !== "success") { return null; } const handleClick = () => { setLoading(true);checkoutState.checkout.confirm().then((result) => { if (result.type === 'error') { setError(result.error) } setLoading(false); }) }; return (
{error &&
{error.message}
}
) }; export default PayButton; ``` ## Prueba tu integración 1. Navega a tu página de finalización de compra. 1. Completa los datos de pago con un método de pago de la siguiente tabla. Para pagos con tarjeta: - Ingresa una fecha futura como fecha de vencimiento. - Ingresa cualquier número de 3 dígitos como CVC. - Ingresa un código postal de facturación. 1. Envía el pago a Stripe. 1. Ve al Dashboard y busca el pago en la [página Transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se realizó correctamente, lo verás en esa lista. 1. Haz clic en tu pago para ver más detalles, como la información de facturación y la lista de artículos comprados. Puedes utilizar esta información para [completar el pedido](https://docs.stripe.com/checkout/fulfillment.md). #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Billeteras | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Débito directo BECS | Tu cliente paga satisfactoriamente con débito directo BECS. | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`. | | Débito directo BECS | El pago de tu cliente falla con un código de error `account_closed`. | Completa el formulario con el número de cuenta `111111113` y BSB `000000`. | | Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | #### Vales | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ## Optional: Crear productos y precios Antes de crear una sesión de Checkout, puedes crear *productos* (Products represent what your business sells—whether that's a good or a service) y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) por adelantado. Utiliza productos para representar diferentes bienes físicos o niveles de servicio, y *precios* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) para representar los precios de cada producto. Puedes [configurar tu sesión de Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios de pagos a voluntad. Por ejemplo, puedes crear una camiseta como producto con un precio de USD 20. Esto te permite actualizar y agregar precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o la API. Obtén más información sobre [cómo funcionan los productos y los precios](https://docs.stripe.com/products-prices/how-products-and-prices-work.md). #### API La API solo necesita un `name` para crear un [Producto](https://docs.stripe.com/api/products.md). Checkout muestra los atributos `name`, `description` e `images` que indiques para el producto. ```curl curl https://api.stripe.com/v1/products \ -u "<>:" \ -d name=T-shirt ``` A continuación, crea un [precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrar por tu producto. Esto incluye cuánto cuesta el producto y qué moneda usar. ```curl curl https://api.stripe.com/v1/prices \ -u "<>:" \ -d product="{{PRODUCT_ID}}" \ -d unit_amount=2000 \ -d currency=usd ``` #### Dashboard > Copia los productos creados en un entorno de prueba al modo activo para no tener que volver a crearlos. En la vista detallada de productos del Dashboard, haz clic en **Copia a modo activo** en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las siguientes actualizaciones del producto de prueba no se reflejan en el producto activo. Asegúrate de estar en un entorno de prueba al hacer clic en **Entornos de prueba** dentro del selector de cuentas del Dashboard. A continuación, define los artículos que quieres vender. Para crear un nuevo producto y precio: - Entra en la sección [Productos](https://dashboard.stripe.com/test/products) del Dashboard. - Haz click en **Agregar producto**. - Selecciona **Por única vez** al establecer el precio. Checkout muestra el nombre, la descripción y las imágenes del producto que indiques. Cada precio que creas tiene un ID. Cuando crees una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en múltiples monedas, haz que tu Precio *sea en múltiples monedas* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Checkout automáticamente [determina la moneda local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) y presenta esa moneda si el Precio la admite. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d ui_mode=custom \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Completar automáticamente los datos de los clientes [Lado del servidor] Si ya tienes el correo electrónico del cliente y quieres completarlo automáticamente en la sesión de Checkout, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) cuando crees una sesión de Checkout. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ --data-urlencode customer_email="customer@example.com" \ -d ui_mode=custom \ -d mode=payment \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}" ``` ## Optional: Guardar datos de métodos de pago Aprende a [aceptar un pago y a guardar los datos de pago de tus clientes](https://docs.stripe.com/payments/save-during-payment.md) para futuras compras. ## Optional: Escucha los cambios de la sesión de Checkout ### Escucha los cambios de la sesión de Checkout Puedes escuchar los cambios en la [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions.md) agregando un oyente de eventos en el evento `change` con [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event). #### HTML + JS ```javascript checkout = stripe.initCheckout({ clientSecret: promise, elementsOptions: { appearance }, }); checkout.on('change', (session) => { // Handle changes to the checkout session }); ``` #### React ```jsx import React from 'react'; import { useCheckout } from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'success') { checkoutState.checkout.on('change', (session) => { // Handle changes to the checkout session }); } }; ``` ## Optional: Recopila las direcciones de facturación y envío ## Reopilar una dirección de facturación De forma predeterminada, una Checkout Session recopila los detalles mínimos de facturación necesarios para el pago a través del Payment Element. ### Cómo usar el Billing Address Element Puedes recopilar direcciones de facturación completas con el Billing Address Element. Primero, especifica [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) cuando crees la Checkout Session. #### HTML + JS Crea un elemento DOM contenedor para montar el Billing Address Element. Luego, crea una instancia del Billing Address Element con [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) y móntalo llamando a [element.mount](https://docs.stripe.com/js/element/mount), y proporciona un selector CSS o el elemento DOM contenedor. ```html
``` ```javascript const billingAddressElement = checkout.createBillingAddressElement(); billingAddressElement.mount('#billing-address'); ``` El Billing Address Element admite las siguientes opciones: - [contactos](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [pantalla](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) #### React Arme el componente `BillingAddressElement` dentro del `CheckoutProvider`. ```jsx import React from 'react'; import {BillingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` El Billing Address Element admite los siguientes accesorios: - [contactos](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts) - [pantalla](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display) ### Uso de un formulario personalizado Puedes crear tu propio formulario para recopilar direcciones de facturación. - Si tu página de confirmación de compra tiene un paso de recopilación de direcciones distinto antes de la confirmación, llama a [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) cuando tu cliente envíe la dirección. - De lo contrario, puedes enviar la dirección cuando tu cliente haga clic en el botón «pagar» pasando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) para [confirmar](https://docs.stripe.com/js/custom_checkout/confirm). ### Recopila direcciones de facturación parcial Para recopilar direcciones de facturación parciales, como solo el país y el código postal, especifica [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection). Cuando recopiles direcciones de facturación parciales, debes [recopilar direcciones manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). De forma predeterminada, el Payment Element recopila automáticamente los datos mínimos de facturación necesarios para el pago. Para evitar la doble recopilación de datos de facturación, especifica [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) cuando crees el Payment Element. Si solo tienes la intención de recopilar un subconjunto de datos de facturación (como el nombre del cliente), especifica `never` solo en los campos que pretendes recopilar tú mismo. ## Recopilar una dirección de envío Para recopilar la dirección de envío de un cliente, especifica el parámetro [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) cuando crees la Checkout Session. Cuando recopilas una dirección de envío, también debes especificar a qué países se permiten los envíos. Configura la propiedad [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) con una matriz de [códigos ISO de país de dos letras](https://www.nationsonline.org/oneworld/country_code_list.htm). ### Cómo usar el Element Shipping Address Puedes recopilar direcciones de envío completas con el Element Shipping Address. #### HTML + JS Crea un elemento DOM contenedor para montar el elemento Shipping Address. A continuación, crea una instancia del Element Shipping Address mediante [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor. ```html
``` ```javascript const shippingAddressElement = checkout.createShippingAddressElement(); shippingAddressElement.mount('#shipping-address'); ``` El Shipping Address Element admite las siguientes opciones: - [contactos](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [pantalla](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) #### React Arme el componente `ShippingAddressElement` dentro del `CheckoutProvider`. ```jsx import React from 'react'; import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
) }; ``` El Shipping Address Element admite los siguientes accesorios: - [contactos](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts) - [pantalla](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display) ### Escucha los cambios de la sesión de Checkout Puedes escuchar los cambios en la [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions.md) agregando un receptor de eventos para manejar los cambios relacionados con la dirección. #### HTML + JS Usa el [objeto Session](https://docs.stripe.com/js/custom_checkout/session_object) para representar el importe del envío en tu formulario del proceso de compra. ```html

Totals

``` ```javascript const checkout = stripe.initCheckout({clientSecret}); const subtotal = document.getElementById('subtotal'); const shipping = document.getElementById('shipping'); const total = document.getElementById('total'); checkout.on('change', (session) => { subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`; shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`; total.textContent = `Total: ${session.total.total.amount}`; }); ``` #### React Usa [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) para mostrar el costo de envío en tu formulario de proceso de compra. ```jsx import React from 'react'; import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { const checkoutState = useCheckout(); if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } return (

Checkout Summary

{checkoutState.type === 'success' && ( <> 
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}

Totals

              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
)}
) }; ``` ### Sincronizar direcciones de facturación y envío Cuando utilizas tanto un elemento de Dirección de facturación como un elemento de Dirección de envío, puedes mostrar una casilla de verificación que permita a los clientes sincronizar sus direcciones de facturación y envío. #### HTML + JS Pasa la opción [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) en `elementsOptions` al iniciar Checkout para configurar qué elemento de Dirección mostrará la casilla de verificación. ```javascript const checkout = stripe.initCheckout({ clientSecret, elementsOptions: { syncAddressCheckbox: 'shipping', }, }); ``` #### React Pasa la opción [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) en `ElementsOptions` en el `CheckoutProvider` para configurar qué elemento de Dirección mostrará la casilla de verificación. ```jsx promise, elementsOptions: { syncAddressCheckbox: 'shipping', }, }} > ``` Establece el valor en `'facturación'` o `'envío'` para elegir qué elemento de Dirección mostrará la casilla de verificación. Establece `'ninguno'` para ocultar la casilla. ### Usa un formulario personalizado Puedes crear tu propio formulario para recopilar direcciones de envío. - Si tu página de confirmación de compra tiene un paso de recopilación de direcciones distinto antes de la confirmación, llama a [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) cuando tu cliente envíe la dirección. - De lo contrario, puedes enviar la dirección cuando el cliente haga clic en el botón «pagar» especificando [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) para [confirmar](https://docs.stripe.com/js/custom_checkout/confirm). ## Optional: Separar la autorización de la captura [Lado del servidor] Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar fondos. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. Luego tienes un cierto tiempo para capturar los fondos, [según la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations). Si no capturas el pago antes del vencimiento de la autorización, se cancela el pago y el emisor libera los fondos retenidos. Separating authorization and capture is useful if you need to take additional actions between confirming that a customer is able to pay and collecting their payment. For example, if you’re selling stock-limited items, you might need to confirm that an item purchased by your customer using Checkout is still available before capturing their payment and fulfilling the purchase. Accomplish this using the following workflow: 1. Confirma que Stripe autorizó el método de pago del cliente. 1. Consulta tu sistema de gestión de inventario para confirmar si hay stock del artículo. 1. Actualiza tu sistema de gestión de inventario para indicar que el cliente ha comprado el artículo. 1. Captura el pago del cliente. 1. Informa a tu cliente si se concretó la compra en tu página de confirmación. Para indicar que quieres separar la autorización de la captura, debes establecer el valor de [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) en `manual` al crear la sesión de Checkout. Esto le indica a Stripe que solo debe autorizar el importe en la tarjeta del cliente. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d "line_items[0][price]"={{PRICE_ID}} \ -d "line_items[0][quantity]"=1 \ -d mode=payment \ -d "payment_intent_data[capture_method]"=manual \ -d return_url={{RETURN_URL}} \ -d ui_mode=custom ``` Para capturar un pago que solo fue autorizado, puedes usar el punto de conexión del [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o de [captura](https://docs.stripe.com/api/payment_intents/capture.md). Para capturar pagos mediante programación, es necesario acceder al PaymentIntent creado durante la sesión de Checkout, al que llegas desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md). ## Optional: Gestión de cuentas de clientes [Sin código] Para permitir que tus clientes [gestionen](https://docs.stripe.com/customer-management.md) sus propias cuentas, comparte un enlace a tu *portal de clientes* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). El portal de clientes les permite a los clientes iniciar sesión con su correo electrónico para gestionar las suscripciones, actualizar los métodos de pago, etc. ## Optional: Gestión logística del pedido Obtén información sobre cómo [programar la recepción de una notificación](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) cuando un cliente paga. ## See also - [Agrega descuentos para pagos únicos](https://docs.stripe.com/payments/checkout/discounts.md?payment-ui=embedded-components) - [Cobra impuestos](https://docs.stripe.com/payments/checkout/taxes.md?payment-ui=embedded-components) - [Habilita cantidades de partidas ajustables](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components) - [Agregar botones de un clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) # API Payment Intents > This is a API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=paymentintents. Crea un formulario de pago personalizado con [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Comprueba cómo esta integración [se compara con otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability). La API Payment Intents es una API de nivel más bajo que puedes usar para crear tu propio flujo de pago o de confirmación de compra, pero requiere significativamente más código y mantenimiento constante. Recomendamos [Payment Element con Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para la mayoría de las integraciones, ya que cubre flujos de pago similares a los de Payment Intents. Obtén más información sobre [cuándo usar Checkout Sessions en lugar de PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md). El código del lado del cliente y del lado del servidor crea un formulario de finalización de compra que acepta varios métodos de pago. #### Esfuerzo de integración Complexity: 4/5 #### Tipo de integración Combina componentes de la interfaz de usuario en un flujo de pago personalizado #### Personalización de la interfaz de usuario Personalización a nivel CSS con la [API Appearance](https://docs.stripe.com/elements/appearance-api.md) > #### ¿Te interesa usar Stripe Tax, los descuentos, los envíos o la conversión de monedas? > > Stripe cuenta con una integración de elementos de pago que gestiona los impuestos, los descuentos, los envíos y la conversión de monedas por ti. Consulta [Crear una página del proceso de compra](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para obtener más información. ## Configurar Stripe [Lado del servidor] Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login). Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Crear un PaymentIntent [Lado del servidor] > Si quieres procesar el Payment Element antes de crearlo, consulta [Recopilar los datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). El objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) representa tu intención de cobrarle a un cliente, y realiza el seguimiento de los intentos de cobro y de los cambios de estado a lo largo del proceso de pago. Un excelente resumen de la integración de pagos que se describe en este documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment) ### Crear el PaymentIntent Crea una PaymentIntent en tu servidor con un [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) y una [moneda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). En la última versión de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Puedes gestionar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona las devoluciones de los métodos de pago que cumplen los requisitos en función de factores como el importe de la transacción, la moneda y el flujo de pagos. Stripe usa la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) a fin de mostrar los métodos de pago que habilitaste. Para ver cómo se muestran tus métodos de pago a los clientes, ingresa un ID de transacción o establece el importe y la moneda del pedido en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Con el objetivo de anular los métodos de pago, enumera manualmente los que quieras habilitar usando el atributo [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true ``` > Decide cuánto cobrar siempre del lado del servidor, un entorno de confianza, y no del lado del cliente. Esto impide que clientes maliciosos puedan elegir sus propios precios. ### Recuperar el secreto de cliente El PaymentIntent incluye un *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que el lado del cliente usa para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente. #### Aplicación de una sola página Recupera el secreto de cliente de un punto de conexión de tu servidor con la funcionalidad `fetch` del navegador. Este método es más conveniente si tu lado del cliente es una aplicación de una sola página, especialmente, si fue diseñada con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se usa para el secreto de cliente: #### Ruby ```ruby get '/secret' do intent = # ... Create or retrieve the PaymentIntent {client_secret: intent.client_secret}.to_json end ``` Luego recupera el secreto de cliente con JavaScript del lado del cliente: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Renderización del lado del servidor Especifica el secreto de cliente desde tu servidor al cliente. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador. Agrega [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) en tu formulario de finalización de compra. En el código del lado de tu servidor, recupera el secreto de cliente de PaymentIntent: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ## Recopilar datos de pago [Lado del cliente] Recopila los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para una variedad de métodos de pago. El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques el Payment Element dentro de otro iframe porque, para algunos métodos de pago, se requiere la redirección a otra página para la confirmación del pago. Si optas por usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `«payment*»`. Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos. #### HTML + JS ### Configurar Stripe.js El Payment Element se encuentra disponible automáticamente como funcionalidad de Stripe.js. Incluye el script de Stripe.js en tu página de finalización de compra agregándolo al `head` de tu archivo HTML. Siempre debes cargar Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas. ```html Checkout ``` Crea una instancia de Stripe con el siguiente código JavaScript en tu página de pago: ```javascript // Set your publishable key: remember to change this to your live publishable key in production // See your keys here: https://dashboard.stripe.com/apikeys const stripe = Stripe('<>'); ``` ### Agrega el Payment Element a tu página de pago El Payment Element necesita un lugar específico en tu página de pago. Crea un nodo DOM vacío (contenedor) con un ID único en tu formulario de pago: ```html
``` Cuando se cargue el formulario anterior, crea una instancia de Payment Element y móntala en el nodo DOM del contenedor. Especifica el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior en `options` cuando crees la instancia [Elements](https://docs.stripe.com/js/elements_object/create): Debes administrar el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie que no sea el cliente. ```javascript const options = { clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Configurar Stripe.js Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador de Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público de npm: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Agrega y configura el proveedor Elements en tu página de pago Para usar el componente Payment Element, envuelve el componente de tu página de confirmación de compra con un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica el valor `Promise` devuelto en el proveedor `Elements`. También debes especificar el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior como `options` al proveedor `Elements`. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Agregar el componente Payment Element Usa el componente `PaymentElement` para crear tu formulario: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Stripe Elements es una colección de componentes de interfaz de usuario (IU) desplegables. Para personalizar aún más tu formulario o recopilar otra información del cliente, consulta la [documentación de Elements](https://docs.stripe.com/payments/elements.md). El Payment Element renderiza un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario le pide automáticamente al cliente que complete todos los datos de pago necesarios. ### Personaliza el aspecto Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) en `options` al crear el proveedor `Elements`. ### Recopila las direcciones Por defecto, el Payment Element solo junta los detalles necesarios de la dirección de facturación. Algunos comportamientos, como el [cálculo de impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o la introducción de datos de envío, requieren la dirección completa de tu cliente. Puedes realizar lo siguiente: - Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funcionalidades de autocompletar y localizar para obtener la dirección completa de tu cliente. Esto ayuda a garantizar el cálculo de impuestos más preciso. - Recopila los datos de la dirección mediante tu propio formulario personalizado. ### Solicita un token de comerciante de Apple Pay Si configuraste tu integración para [aceptar pagos de Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), te recomendamos que configures la interfaz Apple Pay que devuelva un token de comercio, lo que permite habilitar transacciones iniciadas por el comercio (MIT). [Solicita el tipo de token de comercio correspondiente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) en el Payment Element. ## Optional: Guardar y recuperar métodos de pago del cliente Puedes configurar el Payment Element para guardar los métodos de pago de tu cliente para uso futuro. En esta sección, se muestra cómo integrar la [función de métodos de pago guardados](https://docs.stripe.com/payments/save-customer-payment-methods.md), que permite que el Payment Element realice lo siguiente: - Solicitar a los compradores su consentimiento para guardar un método de pago - Cómo guardar métodos de pago cuando los compradores brindan su consentimiento - Cómo mostrar los métodos de pago guardados a los compradores para compras futuras - [Actualizar automáticamente tarjetas perdidas o vencidas](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) cuando los compradores las reemplacen ![El Payment Element y una casilla de verificación del método de pago guardado](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png) Guardar métodos de pago. ![El Payment Element con un método de pago guardado seleccionado](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png) Reutiliza un método de pago guardado previamente. ### Cómo habilitar la función para guardar el método de pago en el Payment Element Al crear una [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) en tu servidor, también se crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) proporcionando la [ID del cliente](https://docs.stripe.com/api/customers/object.md#customer_object-id) y habilitando el componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) para tu sesión. Configura qué [funcionalidades](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) del método de pago guardado quieres habilitar. Por ejemplo, al habilitar [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save), se muestra una casilla de verificación que ofrece a los clientes la opción de guardar sus datos de pago para usarlos en el futuro. Puedes especificar `setup_future_usage` en un PaymentIntent o una Checkout Session para anular el comportamiento predeterminado de guardado de métodos de pago. Esta acción garantiza que guardes automáticamente el método de pago para su uso futuro, incluso si el cliente no elige explícitamente guardarlo. > Permitir que los compradores eliminen sus métodos de pago guardados al habilitar [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove) afecta a las suscripciones que dependen de ese método de pago. Al eliminar el método de pago, se separa el [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) de ese [Customer](https://docs.stripe.com/api/customers.md). #### Ruby ```ruby # Don't put any keys in code. Use a secrets vault or environment # variable to supply keys to your integration. This example # shows how to set a secret key for illustration purposes only. # # See https://docs.stripe.com/keys-best-practices and find your # keys at https://dashboard.stripe.com/apikeys. Stripe.api_key = '<>' post '/create-intent-and-customer-session' do intent = Stripe::PaymentIntent.create({ amount: 1099, currency: 'usd', # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. automatic_payment_methods: {enabled: true}, customer: {{CUSTOMER_ID}}, }) customer_session = Stripe::CustomerSession.create({ customer: {{CUSTOMER_ID}}, components: { payment_element: { enabled: true, features: { payment_method_redisplay: 'enabled', payment_method_save: 'enabled', payment_method_save_usage: 'off_session', payment_method_remove: 'enabled', }, }, }, }) { client_secret: intent.client_secret, customer_session_client_secret: customer_session.client_secret }.to_json end ``` Tu instancia de Elements utiliza el *secreto de cliente* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de CustomerSession para acceder a los métodos de pago guardados de ese cliente. [Gestiona errores](https://docs.stripe.com/error-handling.md) correctamente al crear la CustomerSession. Si se produce un error, no es necesario que proporciones el secreto de cliente de CustomerSession a la instancia de Elements, ya que es opcional. Crea la instancia de Elements utilizando los secretos de cliente tanto para PaymentIntent como para CustomerSession. Luego, usa esta instancia de Elements para crear un Payment Element. ```javascript // Create the CustomerSession and obtain its clientSecret const res = await fetch("/create-intent-and-customer-session", { method: "POST" }); const { customer_session_client_secret: customerSessionClientSecret } = await res.json(); const elementsOptions = { clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret, // Fully customizable with appearance API. appearance: {/*...*/}, }; // Set up Stripe.js and Elements to use in checkout form, passing the client secret // and CustomerSession's client secret obtained in a previous step const elements = stripe.elements(elementsOptions); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` Al confirmar el PaymentIntent, Stripe.js controla automáticamente la configuración de [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) en el PaymentIntent y [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) en el PaymentMethod, dependiendo de si el cliente marcó la casilla para guardar sus datos de pago. ### Exigir la recopilación del CVC Opcionalmente, especifica `require_cvc_recollection` [al crear el PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) para cumplir con la recopilación del CVC cuando un cliente está pagando con tarjeta. ### Cómo detectar la selección de un método de pago guardado Para controlar el contenido dinámico cuando se selecciona un método de pago guardado, escucha el evento `change` del Payment Element, que se rellena con el método de pago seleccionado. ```javascript paymentElement.on('change', function(event) { if (event.value.payment_method) { // Control dynamic content if a saved payment method is selected } }) ``` ## Optional: Link en la página de finalización de compra [Lado del cliente] Permite que tu cliente pague más rápido con [Link](https://docs.stripe.com/payments/link.md) en [Payment Element](https://docs.stripe.com/payments/payment-element.md). Puedes autocompletar la información de cualquier cliente que haya iniciado sesión y que ya esté usando Link, independientemente de si inicialmente guardó su información en Link con otra empresa. La integración predeterminada del Payment Element incluye un mensaje de Link en el formulario de la tarjeta. Para administrar Link en el Payment Element, ve a tu [configuración del método de pago](https://dashboard.stripe.com/settings/payment_methods). ![Autenticarse o inscribirse con Link directamente en el Payment Element durante el proceso de finalización de compra](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png) Recopila una dirección de correo electrónico del cliente para la autenticación o la inscripción en Link ### Opciones de integración Hay dos formas de integrar Link con el Payment Element. De estas, Stripe recomienda pasar una dirección de correo electrónico del cliente al Payment Element si está disponible. Recuerda tener en cuenta cómo funciona tu flujo de compra al decidir entre estas opciones: | Opción de integración | Flujo de compra | Descripción | | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Pasa la dirección de correo electrónico de un cliente al Payment Element (Recomendado) | - Tu cliente introduce su dirección de correo electrónico antes de llegar a la página de finalización de compra (en un paso de creación de cuenta anterior, por ejemplo). - Prefieres usar tu propio campo de entrada de correo electrónico. | Establece mediante programación una dirección de correo electrónico del cliente en el Payment Element. En este escenario, un cliente se autentica en Link directamente en el formulario de pago, no en un componente de interfaz de usuario (IU) por separado. | | Recopilar una dirección de correo electrónico de un cliente en el Payment Element | - Tus clientes pueden elegir introducir su correo electrónico y autenticarse o inscribirse con Link directamente en el Payment Element durante el proceso de compra. - No requiere(n) programación. | Si un cliente no se inscribió en Link y elige un método de pago admitido en el Payment Element, se le pedirá que guarde sus datos a través de Link. Para los que ya se inscribieron, Link completa automáticamente la información de pago. | Utiliza [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para pasar la dirección de correo electrónico de un cliente al Payment Element. ```javascript const paymentElement = elements.create('payment', { defaultValues: { billingDetails: { email: 'foo@bar.com', } }, // Other options }); ``` Para obtener más información, lee cómo [construir una página de proceso de compra personalizada que incluya Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md). ## Optional: Recuperar actualizaciones desde el servidor [Lado del cliente] Es posible que quieras actualizar los atributos en el PaymentIntent después de renderizar el Payment Element, como el [importe](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (por ejemplo, códigos de descuento o costos de envío). Puedes [actualizar el PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) en tu servidor y luego llamar a [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) para ver el nuevo importe reflejado en el Payment Element. Este ejemplo muestra cómo crear el punto de conexión del servidor que actualiza el importe en el PaymentIntent: #### Ruby ```ruby get '/update' do intent = Stripe::PaymentIntent.update( '{{PAYMENT_INTENT_ID}}', {amount: 1499}, ) {status: intent.status}.to_json end ``` Este ejemplo ilustra cómo actualizar la interfaz de usuario para que estos cambios se vean del lado del cliente: ```javascript (async () => { const response = await fetch('/update'); if (response.status === 'requires_payment_method') { const {error} = await elements.fetchUpdates(); } })(); ``` ## Enviar el pago a Stripe [Lado del cliente] Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos del Payment Element. Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar a dónde Stripe debe redirigir al usuario después de completar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización del banco y, luego, a la`return_url`. Los pagos con tarjeta redirigen inmediatamente a la `return_url` cuando un pago se realiza correctamente. Si no quieres realizar el redireccionamiento de pagos con tarjeta una vez que se completan los pagos, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) en `if_required`. Esto solo redirigirá a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React Para llamar a [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) desde el componente del formulario de pago, usa los hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) y [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook). Si prefieres componentes de clase tradicionales en lugar de hooks, puedes usar un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` Asegúrate de que la `return_url` corresponda a una página de tu sitio web que proporcione el estado del pago. Cuando Stripe redirige al cliente a la `return_url`, proporcionamos los siguientes parámetros de consulta de URL: | Parámetro | Descripción | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | `payment_intent` | El identificador único del `PaymentIntent`. | | `payment_intent_client_secret` | El [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del objeto `PaymentIntent`. | > Si tienes herramientas que rastrean la sesión del navegador del cliente, es posible que debas agregar el dominio `stripe.com` a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones, lo que te impide realizar un seguimiento de la sesión completa. Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el [estado del PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la `return_url`, que se mantendrán durante el proceso de redireccionamiento. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => { const message = document.querySelector('#message') // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': message.innerText = 'Success! Payment received.'; break; case 'processing': message.innerText = "Payment processing. We'll update you when payment is received."; break; case 'requires_payment_method': message.innerText = 'Payment failed. Please try another payment method.'; // Redirect your user back to your payment page to attempt collecting // payment again break; default: message.innerText = 'Something went wrong.'; break; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // Retrieve the "payment_intent_client_secret" query parameter appended to // your return_url by Stripe.js const clientSecret = new URLSearchParams(window.location.search).get( 'payment_intent_client_secret' ); // Retrieve the PaymentIntent stripe .retrievePaymentIntent(clientSecret) .then(({paymentIntent}) => { // Inspect the PaymentIntent `status` to indicate the status of the payment // to your customer. // // Some payment methods will [immediately succeed or fail][0] upon // confirmation, while others will first enter a `processing` state. // // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification switch (paymentIntent.status) { case 'succeeded': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ## Gestionar eventos posteriores al pago [Lado del servidor] Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Usa la [herramienta de webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar un flujo de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `payment_intent.succeeded`, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element: | Evento | Descripción | Acción | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Se envía cuando un cliente completa correctamente un pago. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado cuando un cliente intenta un pago, pero el pago falla. | Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago. | ## Prueba tu integración Para probar tu integración de pagos personalizados: 1. Crea una intención de pago y recupera el secreto del cliente. 1. Completa los datos del pago con un método de la siguiente tabla. - Ingresa una fecha futura como fecha de vencimiento. - Ingresa cualquier número de 3 dígitos como CVC. - Ingresa un código postal de facturación. 1. Envía el pago a Stripe. Se te redirigirá a tu `return_url`. 1. Ve al Dashboard y busca el pago en la [página Transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se realizó correctamente, lo verás en esa lista. 1. Haz clic en el pago para ver más detalles, como la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido. Obtén más información sobre [cómo probar tu integración](https://docs.stripe.com/testing.md). #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Billeteras | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Alipay | Tu cliente realiza un pago correctamente con un método de pago basado en redireccionamiento y con [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar pago de prueba** en la página de redireccionamiento. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Débito directo BECS | Tu cliente paga satisfactoriamente con débito directo BECS. | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`. | | Débito directo BECS | El pago de tu cliente falla con un código de error `account_closed`. | Completa el formulario con el número de cuenta `111111113` y BSB `000000`. | | Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | #### Vales | Método de pago | Escenario | Cómo hacer la prueba | | -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ## Optional: Agregar más métodos de pago El Payment Element [admite muchos métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) de forma predeterminada. Tienes que tomar medidas adicionales para habilitar y mostrar algunos métodos de pago. ### Affirm Para comenzar a usar Affirm, debes habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Al crear un PaymentIntent con el método de pago Affirm, debes incluir una [dirección de envío](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Este ejemplo sugiere especificar la información de envío del cliente después de que el cliente [seleccione su método de pago](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Obtén más información sobre cómo usar [Affirm](https://docs.stripe.com/payments/affirm.md) con Stripe. #### HTML + JS ```javascript const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point is reached if there's an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) const messageContainer = document.querySelector('#error-message'); messageContainer.textContent = error.message; } else { // Your customer is redirected to your `return_url`. For some payment // methods like iDEAL, your customer is redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }); ``` #### React ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: 'https://my-site.com/order/123/complete',shipping: { name: 'Jenny Rosen', address: { line1: '1 Street', city: 'Seattle', state: 'WA', postal_code: '95123', country: 'US' } }, } }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, // payment details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ) }; export default CheckoutForm; ``` #### Probar Affirm Obtén información sobre cómo probar diferentes escenarios con la siguiente tabla: | Escenario | Cómo hacer la prueba | | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Tu cliente efectúa correctamente un pago con Affirm. | Completa el formulario (asegúrate de incluir una dirección de envío) y autentica el pago. | | Tu cliente no pasa la autenticación en la página de redireccionamiento de Affirm. | Completa el formulario y haz click en **Error en el pago de prueba** en la página de redireccionamiento. | ### Afterpay (Clearpay) Al crear un PaymentIntent con el método de pago Afterpay, necesitas incluir una [dirección de envío](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Obtén más información sobre cómo usar [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) con Stripe. Puedes gestionar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona las devoluciones de los métodos de pago que cumplen los requisitos en función de factores como el importe de la transacción, la moneda y el flujo de pagos. En el siguiente ejemplo se usa el atributo [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled), pero puedes enumerar `afterpay_clearpay` con [tipos de métodos de pago](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). En la última versión de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Independientemente de la opción que elijas, asegúrate de habilitar Afterpay Clearpay en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d "automatic_payment_methods[enabled]"=true \ -d "shipping[name]"="Jenny Rosen" \ -d "shipping[address][line1]"="1234 Main Street" \ -d "shipping[address][city]"="San Francisco" \ -d "shipping[address][state]"=CA \ -d "shipping[address][country]"=US \ -d "shipping[address][postal_code]"=94111 ``` #### Probar Afterpay (Clearpay) Obtén información sobre cómo probar diferentes escenarios con la siguiente tabla: | Escenario | Cómo hacer la prueba | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Tu cliente efectúa correctamente un pago con Afterpay. | Completa el formulario (asegúrate de incluir una dirección de envío) y autentica el pago. | | Tu cliente no pasa la autenticación en la página de redireccionamiento de Afterpay. | Completa el formulario y haz click en **Error en el pago de prueba** en la página de redireccionamiento. | ### Apple Pay y Google Pay Cuando [habilitas pagos con tarjeta](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), mostramos Apple Pay y Google Pay para los clientes cuyo entorno cumple con las [condiciones de visualización de la cartera](https://docs.stripe.com/testing/wallets.md). Para aceptar pagos de estas carteras, también debes realizar lo siguiente: - Habilítalos en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada. - Entrega el contenido de tu aplicación a través de HTTPS durante el desarrollo y la producción. - [Registra tu dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). - [Obtén actualizaciones del servidor](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) si actualizas el importe de un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para mantener sincronizado el cuadro de diálogo de pago de la cartera. > #### Pruebas regionales > > Stripe Elements no es compatible con Google Pay o Apple Pay para cuentas y clientes de Stripe en la India. Por lo tanto, no puedes probar tu integración de Google Pay o Apple Pay si la dirección IP de quien realiza la prueba es de la India, incluso si la cuenta de Stripe está establecida fuera de la India. Obtén más información sobre cómo usar [Apple Pay](https://docs.stripe.com/apple-pay.md) y [Google Pay](https://docs.stripe.com/google-pay.md) con Stripe. ### Débito directo ACH Al usar el Payment Element con débito directo ACH como método de pago, sigue estos pasos: 1. Crea un [objeto Customer](https://docs.stripe.com/api/customers.md). ```curl curl -X POST https://api.stripe.com/v1/customers \ -u "<>:" ``` 1. Especifica el ID del cliente cuando crees el `PaymentIntent`. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=usd \ -d setup_future_usage=off_session \ -d customer={{CUSTOMER_ID}} \ -d "payment_method_types[]"=us_bank_account ``` 1. Selecciona un [método de verificación](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method). Cuando uses el método de pago de débito directo ACH con el elemento de pago, solo podrás seleccionar `automatic` o `instant`. Obtén más información sobre cómo usar el [débito directo ACH](https://docs.stripe.com/payments/ach-direct-debit.md) con Stripe. #### Probar el débito directo ACH | Escenario | Cómo hacer la prueba | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU mediante la verificación instantánea. | Selecciona **Cuenta bancaria de EE. UU.** y completa el formulario. Haz click en la entidad de prueba. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Haz click en el botón de pago. | | Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU usando microdepósitos. | Select **US bank account** and fill out the form. Click **Enter bank details manually instead**. Follow the instructions on the modal to link your bank account. You can use these [test account numbers](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Click your payment button. | | Tu cliente no completa el proceso de vinculación de la cuenta bancaria. | Selecciona **Cuenta bancaria de EE. UU.** y haz click en la entidad de prueba o en **Ingresar datos bancarios manualmente**. Cierra el cuadro de diálogo sin completarlo. | ### BLIK Al usar el Payment Element con BLIK, el usuario puede cerrar el cuadro de diálogo modal en el que se le solicita que autorice el pago en su aplicación bancaria. Esta acción activa un redireccionamiento a tu `return_url` y no devuelve al usuario a la página de finalización de compra. Obtén más información sobre cómo usar [BLIK](https://docs.stripe.com/payments/blik.md) con Stripe. Para gestionar casos en que los usuarios cierran el cuadro de diálogo, inspecciona el `status` del Payment Intent en el controlador del lado del servidor de tu `return_url` para verificar si pasó a `succeeded` o todavía está en estado `requires_action` (lo que significa que el usuario o la usuaria cerró el cuadro de diálogo sin autorización), gestionando cada caso según sea necesario. ### Métodos de pago con código QR Al usar el Payment Element con un método de pago basado en código QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), el usuario puede cerrar el cuadro de diálogo modal del código QR. Como consecuencia, se desencadena un redireccionamiento a tu `return_url` y no devuelve al usuario a la página de finalización de compra. Para gestionar los casos en que los usuarios cierran los cuadros de diálogo modales de los códigos QR, inspecciona el `status` del Payment Intent en el controlador del lado del servidor de tu `return_url` para comprobar si es `succeeded` o sigue siendo `requires_action` (lo que significa que el usuario cerró el cuadro de diálogo modal sin haber pagado). Esta inspección permite gestionar cada caso según sea necesario. Como alternativa, evita el redireccionamiento automático a tu `return_url` al pasar el parámetro avanzado opcional [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), que evita el redireccionamiento cuando se cierra un cuadro de diálogo modal de código QR. ### Cash App Pay El Payment Element renderiza un formulario dinámico de manera diferente en la web de escritorio o en la web móvil, ya que utiliza diferentes métodos de autenticación de clientes. Obtén más información sobre cómo usar [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) con Stripe. #### Elemento de aplicación web móvil Cash App Pay es un método de pago basado en el redireccionamiento en la web móvil. Redirige a tu cliente a la aplicación Cash en modo activo o a una página de pago de prueba en un entorno de prueba. Una vez completado el pago, se redirigirán a la `return_url`, independientemente de si estableces `redirect=if_required` o no. #### Elemento de aplicación web de escritorio Cash App Pay es un método de pago de código QR en la web de escritorio, donde Payment Element renderiza un cuadro de diálogo de código QR. Su cliente necesita escanear el código QR con una aplicación de escaneo de código QR o la aplicación móvil Cash App. En el modo activo, se redirige al cliente a la `return_url` apenas se lo redirige a la aplicación Cash. En entornos de prueba, pueden aprobar o rechazar el pago antes de ser redirigidos a la `return_url`. Los clientes también pueden cerrar el cuadro de diálogo del código QR antes de completar el pago, lo que activa un redireccionamiento a tu `return_url`. Asegúrate de que la `return_url` corresponda a una página de tu sitio web para inspeccionar el `status` del Payment Intent. El `status` del Payment Intent puede ser `succeeded`, `failed` o `requires_action` (por ejemplo, el cliente ha cerrado el cuadro de diálogo sin escanear el código QR). Como alternativa, evita el redireccionamiento automático a tu `return_url` especificando el parámetro avanzado opcional `redirect=if_required`, que evita el redireccionamiento cuando se cierra un modal de código QR. ### PayPal Para usar PayPal, asegúrate de tener un [dominio registrado](https://docs.stripe.com/payments/payment-methods/pmd-registration.md). ## Cuéntales a tus clientes qué es Stripe Stripe recopila información sobre las interacciones de los clientes con Elements para proporcionarte servicios, mejorarlos y prevenir el fraude. Esto incluye el uso de cookies y direcciones IP para identificar qué Elements vio un cliente durante una sola sesión de finalización de compra. Tienes la responsabilidad de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos para dichos fines. Si deseas obtener más información, visita nuestro [centro de privacidad](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe). ## See also - [Stripe Elements](https://docs.stripe.com/payments/elements.md) - [Configurar pagos futuros](https://docs.stripe.com/payments/save-and-reuse.md) - [Guardar los datos de pago durante el pago](https://docs.stripe.com/payments/save-during-payment.md) - [Calcula el impuesto sobre las ventas, el GST y el IVA en tu flujo de pago](https://docs.stripe.com/tax/custom.md) # Integración en la aplicación para iOS > This is a Integración en la aplicación para iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=ios. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integra la interfaz de usuario de pago prediseñada de Stripe a la confirmación de compra de tu aplicación iOS con la clase [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). Consulta nuestro ejemplo de integración [en GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example). ## Configurar Stripe [Lado del servidor] [Lado del cliente] Primero, necesitas una cuenta de Stripe. [Inscríbete ahora](https://dashboard.stripe.com/register). ### Lado del servidor Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Lado del cliente El [SDK para iOS de Stripe](https://github.com/stripe/stripe-ios) es de código abierto, está [plenamente documentado](https://stripe.dev/stripe-ios/index.html) y es compatible con aplicaciones que admiten iOS 13 o posterior. #### Swift Package Manager Para instalar el SDK, sigue estos pasos: 1. En Xcode, selecciona **Archivo** > **Agregar dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como URL del repositorio. 1. Selecciona el número de versión más reciente en nuestra [página de versiones](https://github.com/stripe/stripe-ios/releases). 1. Agrega el producto **StripePaymentSheet** al [objetivo de tu aplicación](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si aún no lo has hecho, instala la última versión de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si no tienes un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), crea uno al ejecutar el siguiente comando: ```bash pod init ``` 1. Agrega esta línea a tu `Podfile`: ```podfile pod 'StripePaymentSheet' ``` 1. Ejecuta el siguiente comando: ```bash pod install ``` 1. De ahora en adelante, no olvides usar el archivo `.xcworkspace` en lugar del archivo `.xcodeproj` para abrir tu proyecto en Xcode. 1. En el futuro, para actualizar a la última versión del SDK, ejecuta lo siguiente: ```bash pod update StripePaymentSheet ``` #### Carthage 1. Si aún no lo has hecho, instala la última versión de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Agrega esta línea a tu `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Sigue las [instrucciones de instalación de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Asegúrate de incrustar todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión del SDK, ejecuta el siguiente comando: ```bash carthage update stripe-ios --platform ios ``` #### Framework manual 1. Ve a nuestra [página de versiones de GitHub](https://github.com/stripe/stripe-ios/releases/latest) y descarga y descomprime **Stripe.xcframework.zip**. 1. Arrastra **StripePaymentSheet.xcframework** a la sección **Binarios incrustados** de la configuración **General** de tu proyecto en Xcode. Asegúrate de seleccionar **Copiar elementos si es necesario**. 1. Repite el paso 2 para todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripePaymentSheet/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión de nuestro SDK, repite los pasos 1 a 3. > Para obtener más detalles sobre la última versión del SDK y las versiones anteriores, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publique una nueva versión, [mira las versiones](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repositorio. ## Habilitar métodos de pago Visualiza tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean pertinentes para tu empresa y tus clientes. Consulta [Admisibilidad de métodos de pago](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) para obtener información sobre productos y métodos de pago admitidos, y consulta nuestra [página de precios](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones. ## Agregar un punto de conexión [Lado del servidor] > #### Nota > > Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recopila datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. Esta integración usa tres objetos de la API de Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utiliza para representar tu intención de cobrarle a un cliente, haciendo el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso. 1. (Opcional) [Cliente](https://docs.stripe.com/api/customers.md): Para configurar un método de pago para pagos futuros, debes adjuntarlo a un *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el “Customer Object” cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear un “Customer Object” antes del pago y asociarlo con tu propia representación interna de la cuenta del cliente más adelante. 1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): La información que contiene el “Customer Object” es confidencial y no se puede recuperar directamente desde una aplicación. Una CustomerSession otorga al SDK acceso temporal al objeto Customer y proporciona más opciones de configuración. Consulta una lista completa de [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si nunca guardas tarjetas para un cliente y no permites que los clientes frecuentes vuelvan a usar tarjetas guardadas, puedes omitir los objetos Customer y CustomerSession en tu integración. Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, agrega un punto de conexión en tu servidor que haga lo siguiente: 1. Recupere el objeto Customer o cree uno nuevo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) para el cliente. 1. Crea un PaymentIntent con el [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), la [moneda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) y el [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Devuelve a tu aplicación el *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) del Payment Intent, el `client_secret` de CustomerSession, la [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente y tu [clave publicable](https://dashboard.stripe.com/apikeys). Los métodos de pago que se muestran a los clientes durante el proceso de compra también se incluyen en el PaymentIntent. Puedes permitir que Stripe extraiga los métodos de pago de tu configuración del Dashboard o puedes enumerarlos manualmente. Independientemente de la opción que elijas, debes saber que la moneda especificada en el PaymentIntent filtra los métodos de pago que se muestran al cliente. Por ejemplo, si especificas `eur` en el PaymentIntent y tienes habilitado OXXO en el Dashboard, OXXO no se mostrará al cliente porque OXXO no admite pagos en `eur`. A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la moneda, las restricciones de los métodos de pago y otros parámetros para determinar la lista de métodos de pago admitidos. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente. #### Gestionar los métodos de pago desde el Dashboard Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe maneja la devolución de métodos de pago elegibles según factores como el monto de la transacción, la moneda y el flujo de pago. El PaymentIntent se crea según los métodos de pago que configuraste en el Dashboard. Si no quieres usar el Dashboard o si quieres especificar métodos de pago manualmente, puedes enumerarlos usando el atributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Cómo enumerar métodos de pago manualmente #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Cada método de pago debe admitir la moneda especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que admite cada método de pago. Consulta la página de [opciones de integración de métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre qué admitimos. ## Recopilar datos de pago [Lado del cliente] Para mostrar el Payment Element móvil en la pantalla de confirmación de compra, asegúrate de: - Muestra los productos que compra el cliente junto con el importe total - Usa el [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios) para recopilar la información de envío necesaria del cliente - Agrega un botón de confirmación de compra para mostrar la interfaz de usuario (IU) de Stripe #### UIKit En la pantalla de confirmación de compra de tu aplicación, obtén el secreto de cliente PaymentIntent, el secreto de cliente CustomerSession, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Usa `STPAPIClient.shared` para establecer tu clave publicable e iniciar la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). #### iOS (Swift) ```swift import UIKit@_spi(CustomerSessionBetaAccess) import StripePaymentSheet class CheckoutViewController: UIViewController { @IBOutlet weak var checkoutButton: UIButton! var paymentSheet: PaymentSheet? let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint override func viewDidLoad() { super.viewDidLoad() checkoutButton.addTarget(self, action: #selector(didTapCheckoutButton), for: .touchUpInside) checkoutButton.isEnabled = false // MARK: Fetch the PaymentIntent client secret, CustomerSession client secret, Customer ID, and publishable key var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) DispatchQueue.main.async { self.checkoutButton.isEnabled = true } }) task.resume() } } ``` Cuando el cliente toca el botón **Checkout**, llama a `present` para presentar la PaymentSheet. Después de que el cliente complete el pago, Stripe descarta la PaymentSheet y llama al bloque de finalización con [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). #### iOS (Swift) ```swift @objc func didTapCheckoutButton() { // MARK: Start the checkout process paymentSheet?.present(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Your order is confirmed") case .canceled: print("Canceled!") case .failed(let error): print("Payment failed: \(error)") } } } ``` #### SwiftUI Crea un modelo `ObservableObject` para tu pantalla de confirmación de compra. Este modelo publica una [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) y un [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? } ``` Obtén el secreto de cliente PaymentIntent, el secreto de cliente CustomerSession, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Usa `STPAPIClient.shared` para establecer tu clave publicable e iniciar la [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch thePaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, letpaymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey// MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret:paymentIntentClientSecret, configuration: configuration) } }) task.resume() } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack { if model.paymentSheet != nil { Text("Ready to pay.") } else { Text("Loading…") } }.onAppear { model.preparePaymentSheet() } } } ``` Agrega un [PaymentSheet.PaymentButton](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/PaymentButton.html) a tu `View`. Esto se comporta de manera similar a un `Button` de SwiftUI, que te permite personalizarlo agregando una `View`. Cuando tocas el botón, se muestra la PaymentSheet. Después de completar el pago, Stripe cierra la PaymentSheet y llama al controlador `onCompletion` con un objeto [PaymentSheetResult](https://stripe.dev/stripe-ios/stripe-paymentsheet/Enums/PaymentSheetResult.html). ```swift @_spi(CustomerSessionBetaAccess) import StripePaymentSheet import SwiftUI class CheckoutViewModel: ObservableObject { let backendCheckoutUrl = URL(string: "Your backend endpoint/payment-sheet")! // Your backend endpoint @Published var paymentSheet: PaymentSheet? @Published var paymentResult: PaymentSheetResult? func preparePaymentSheet() { // MARK: Fetch the PaymentIntent and Customer information from the backend var request = URLRequest(url: backendCheckoutUrl) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request, completionHandler: { [weak self] (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let customerId = json["customer"] as? String, let customerSessionClientSecret = json["customerSessionClientSecret"] as? String, let paymentIntentClientSecret = json["paymentIntent"] as? String, let publishableKey = json["publishableKey"] as? String, let self = self else { // Handle error return } STPAPIClient.shared.publishableKey = publishableKey // MARK: Create a PaymentSheet instance var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "Example, Inc." configuration.customer = .init(id: customerId, customerSessionClientSecret: customerSessionClientSecret) // Set `allowsDelayedPaymentMethods` to true if your business can handle payment methods // that complete payment after a delay, like SEPA Debit and Sofort. configuration.allowsDelayedPaymentMethods = true DispatchQueue.main.async { self.paymentSheet = PaymentSheet(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) } }) task.resume() } func onPaymentCompletion(result: PaymentSheetResult) { self.paymentResult = result } } struct CheckoutView: View { @ObservedObject var model = CheckoutViewModel() var body: some View { VStack {if let paymentSheet = model.paymentSheet { PaymentSheet.PaymentButton( paymentSheet: paymentSheet, onCompletion: model.onPaymentCompletion ) { Text("Buy") } } else { Text("Loading…") }if let result = model.paymentResult { switch result { case .completed: Text("Payment complete") case .failed(let error): Text("Payment failed: \(error.localizedDescription)") case .canceled: Text("Payment canceled.") } } }.onAppear { model.preparePaymentSheet() } } } ``` Si el `PaymentSheetResult` es `.completed`, infórmale al usuario (por ejemplo, mostrándole una pantalla de confirmación del pedido). Establecer `allowsDelayedPaymentMethods` en true permite aceptar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias en EE. UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa el `PaymentSheet`, sino que se efectúa con éxito o falla más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente que su pedido está confirmado y solo finalízalo (por ejemplo, envía el producto) cuando el pago se realice correctamente. ## Configurar una URL de retorno [Lado del cliente] El cliente puede salir de tu aplicación para autenticarse (por ejemplo, en Safari o en su aplicación bancaria). Para permitirles que regresen automáticamente a tu aplicación después de autenticarse, [configura un esquema de URL personalizado](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) y define el delegado de la aplicación para que envíe la URL al SDK. Stripe no admite [enlaces universales](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content). #### SceneDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func scene(_ scene: UIScene, openURLContexts URLContexts: Set) { guard let url = URLContexts.first?.url else { return } let stripeHandled = StripeAPI.handleURLCallback(with: url) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } ``` #### AppDelegate #### Swift ```swift // This method handles opening custom URL schemes (for example, "your-app://stripe-redirect") func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool { let stripeHandled = StripeAPI.handleURLCallback(with: url) if (stripeHandled) { return true } else { // This was not a Stripe url – handle the URL normally as you would } return false } ``` #### SwiftUI #### Swift ```swift @main struct MyApp: App { var body: some Scene { WindowGroup { Text("Hello, world!").onOpenURL { incomingURL in let stripeHandled = StripeAPI.handleURLCallback(with: incomingURL) if (!stripeHandled) { // This was not a Stripe url – handle the URL normally as you would } } } } } ``` Además, debes definir la [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) del objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html) en la URL de tu aplicación. ```swift var configuration = PaymentSheet.Configuration() configuration.returnURL = "your-app://stripe-redirect" ``` ## Gestionar eventos posteriores al pago [Lado del servidor] Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Usa la [herramienta de webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar un flujo de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `payment_intent.succeeded`, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element: | Evento | Descripción | Acción | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Se envía cuando un cliente completa correctamente un pago. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado cuando un cliente intenta un pago, pero el pago falla. | Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago. | ## Probar la integración #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ## Optional: Habilitar Link Habilita Link en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) para permitir que tus clientes guarden y reutilicen de forma segura su información de pago con el botón de finalización de compra rápido de un solo clic de Link. ### Pasa el correo electrónico de tu cliente al Payment Element móvil Link autentica a un cliente utilizando su dirección de correo electrónico. Stripe recomienda completar automáticamente la mayor cantidad de información posible para agilizar el proceso de finalización de compra. Para completar automáticamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona `defaultBillingDetails` con la información de tu cliente después de inicializar `PaymentSheet.Configuration`. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.name = "Jenny Rosen" configuration.defaultBillingDetails.email = "jenny.rosen@example.com" configuration.defaultBillingDetails.phone = "888-888-8888" ``` ## Optional: Habilitar Apple Pay > Si tu pantalla de confirmación de compra tiene un **botón de Apple Pay** exclusivo, sigue la [Guía de Apple Pay](https://docs.stripe.com/apple-pay.md#present-payment-sheet) y utiliza `ApplePayContext` para cobrar el pago desde ese botón. Puedes usar `PaymentSheet` para gestionar otros tipos de métodos de pago. ### Inscribirse para obtener un ID de comerciante Apple Obtén un ID de comerciante Apple [solicitando un nuevo identificador](https://developer.apple.com/account/resources/identifiers/add/merchant) en el sitio web de desarrolladores de Apple. Completa el formulario con una descripción y el identificador. La descripción es para tus registros y se puede modificar en el futuro. Stripe recomienda usar el nombre de tu aplicación como identificador (por ejemplo, `merchant.com.{{YOUR_APP_NAME}}`). ### Crear un nuevo certificado de Apple Pay Crea un certificado para que tu aplicación cifre los datos de pago. Ve a [Configuración de certificados de iOS](https://dashboard.stripe.com/settings/ios_certificates) en el Dashboard, haz clic en **Agregar nueva aplicación** y sigue la guía. Descarga un archivo de solicitud de firma de certificado (CSR) para obtener un certificado seguro de Apple que te permita utilizar Apple Pay. Se debe usar un archivo CSR para emitir exactamente un certificado. Si cambias tu ID de comerciante de Apple, debes ir a la [Configuración de certificados de iOS](https://dashboard.stripe.com/settings/ios_certificates) en el Dashboard para obtener una nueva CSR y un nuevo certificado. ### Integrarse con Xcode Agrega la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña **Firma y funcionalidades** y agrega la funcionalidad **Apple Pay**. En este paso, quizá se te solicite iniciar sesión en tu cuenta de desarrollador. Selecciona el ID de comerciante que creaste antes, y tu aplicación estará lista para aceptar Apple Pay. ![](https://b.stripecdn.com/docs-statics-srv/assets/xcode.a701d4c1922d19985e9c614a6f105bf1.png) Habilitar la funcionalidad Apple Pay en Xcode ### Agregar Apple Pay #### Pago único Para agregar Apple Pay a PaymentSheet, establece [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) después de inicializar `PaymentSheet.Configuration` con tu ID de comerciante Apple y el [código de país de tu empresa](https://dashboard.stripe.com/settings/account). #### iOS (Swift) ```swift var configuration = PaymentSheet.Configuration() configuration.applePay = .init( merchantId: "merchant.com.your_app_name", merchantCountryCode: "US" ) ``` #### Pagos recurrentes Para agregar Apple Pay a PaymentSheet, establece [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) después de inicializar `PaymentSheet.Configuration` con tu ID de comerciante Apple y el [código de país de tu empresa](https://dashboard.stripe.com/settings/account). Conforme a las [directrices de Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) para pagos recurrentes, también debes establecer otros atributos en `PKPaymentRequest`. Agrega un controlador en [ApplePayConfiguration.paymentRequestHandlers](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/paymentrequesthandler) para configurar [PKPaymentRequest.paymentSummaryItems](https://developer.apple.com/documentation/passkit/pkpaymentrequest/1619231-paymentsummaryitems) con la cantidad que pretendes cobrar (por ejemplo, USD 9.95 al mes). También puedes adoptar [tokens de comerciante](https://developer.apple.com/apple-pay/merchant-tokens/) estableciendo las propiedades `recurringPaymentRequest` o `automaticReloadPaymentRequest` en la `PKPaymentRequest`. Para obtener más información sobre cómo usar los pagos recurrentes con Apple Pay, consulta la [Documentación de Apple sobre PassKit](https://developer.apple.com/documentation/passkit/pkpaymentrequest). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( paymentRequestHandler: { request in // PKRecurringPaymentSummaryItem is available on iOS 15 or later if #available(iOS 15.0, *) { let billing = PKRecurringPaymentSummaryItem(label: "My Subscription", amount: NSDecimalNumber(string: "59.99")) // Payment starts today billing.startDate = Date() // Payment ends in one year billing.endDate = Date().addingTimeInterval(60 * 60 * 24 * 365) // Pay once a month. billing.intervalUnit = .month billing.intervalCount = 1 // recurringPaymentRequest is only available on iOS 16 or later if #available(iOS 16.0, *) { request.recurringPaymentRequest = PKRecurringPaymentRequest(paymentDescription: "Recurring", regularBilling: billing, managementURL: URL(string: "https://my-backend.example.com/customer-portal")!) request.recurringPaymentRequest?.billingAgreement = "You'll be billed $59.99 every month for the next 12 months. To cancel at any time, go to Account and click 'Cancel Membership.'" } request.paymentSummaryItems = [billing] request.currencyCode = "USD" } else { // On older iOS versions, set alternative summary items. request.paymentSummaryItems = [PKPaymentSummaryItem(label: "Monthly plan starting July 1, 2022", amount: NSDecimalNumber(string: "59.99"), type: .final)] } return request } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ### Seguimiento de pedidos Para agregar información de [seguimiento de pedidos](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) en iOS 16 o posterior, configura un [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) en tu `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe llamará a tu implementación después de que se efectivice el pago, pero antes de que iOS descarte la hoja de Apple Pay. En tu implementación de `authorizationResultHandler`, obtén los datos del pedido de tu servidor para el pedido completado. Agrega los datos al [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) proporcionado y devuelve el resultado modificado. Para obtener más información sobre el seguimiento de pedidos, consulta la [Documentación sobre los pedidos por billetera de Apple](https://developer.apple.com/documentation/walletorders). #### iOS (Swift) ```swift let customHandlers = PaymentSheet.ApplePayConfiguration.Handlers( authorizationResultHandler: { result in do { // Fetch the order details from your service let myOrderDetails = try await MyAPIClient.shared.fetchOrderDetails(orderID: orderID) result.orderDetails = PKPaymentOrderDetails( orderTypeIdentifier: myOrderDetails.orderTypeIdentifier, // "com.myapp.order" orderIdentifier: myOrderDetails.orderIdentifier, // "ABC123-AAAA-1111" webServiceURL: myOrderDetails.webServiceURL, // "https://my-backend.example.com/apple-order-tracking-backend" authenticationToken: myOrderDetails.authenticationToken) // "abc123" // Return your modified PKPaymentAuthorizationResult return result } catch { return PKPaymentAuthorizationResult(status: .failure, errors: [error]) } } ) var configuration = PaymentSheet.Configuration() configuration.applePay = .init(merchantId: "merchant.com.your_app_name", merchantCountryCode: "US", customHandlers: customHandlers) ``` ## Habilitar escaneo de tarjetas A fin de habilitar el soporte para escaneo de tarjetas para iOS, establece `NSCameraUsageDescription` (**Privacidad: descripción del uso de la cámara**) en el `Info.plist` de tu aplicación y especifica el motivo por el que se necesita acceder a la cámara (por ejemplo, «Para escanear tarjetas»). ## Optional: Habilitar pagos ACH Para habilitar los pagos con débito ACH, debes incluir `StripeFinancialConnections` como dependencia para tu aplicación. El [SDK para iOS de Stripe](https://github.com/stripe/stripe-ios) es de código abierto, está [plenamente documentado](https://stripe.dev/stripe-ios/index.html) y es compatible con aplicaciones que admiten iOS 13 o posterior. #### Swift Package Manager Para instalar el SDK, sigue estos pasos: 1. En Xcode, selecciona **Archivo** > **Agregar dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como URL del repositorio. 1. Selecciona el número de versión más reciente en nuestra [página de versiones](https://github.com/stripe/stripe-ios/releases). 1. Agrega el producto **StripeFinancialConnections** al [objetivo de tu aplicación](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app). #### CocoaPods 1. Si aún no lo has hecho, instala la última versión de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Si no tienes un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), crea uno al ejecutar el siguiente comando: ```bash pod init ``` 1. Agrega esta línea a tu `Podfile`: ```podfile pod 'StripeFinancialConnections' ``` 1. Ejecuta el siguiente comando: ```bash pod install ``` 1. De ahora en adelante, no olvides usar el archivo `.xcworkspace` en lugar del archivo `.xcodeproj` para abrir tu proyecto en Xcode. 1. En el futuro, para actualizar a la última versión del SDK, ejecuta lo siguiente: ```bash pod update StripeFinancialConnections ``` #### Carthage 1. Si aún no lo has hecho, instala la última versión de [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Agrega esta línea a tu `Cartfile`: ```cartfile github "stripe/stripe-ios" ``` 1. Sigue las [instrucciones de instalación de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Asegúrate de incrustar todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión del SDK, ejecuta el siguiente comando: ```bash carthage update stripe-ios --platform ios ``` #### Framework manual 1. Ve a nuestra [página de versiones de GitHub](https://github.com/stripe/stripe-ios/releases/latest) y descarga y descomprime **Stripe.xcframework.zip**. 1. Arrastra **StripeFinancialConnections.xcframework** a la sección **Binarios incrustados** de la configuración **General** de tu proyecto en Xcode. Asegúrate de seleccionar **Copiar elementos si es necesario**. 1. Repite el paso 2 para todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripeFinancialConnections/README.md#manual-linking). 1. En el futuro, para actualizar a la última versión de nuestro SDK, repite los pasos 1 a 3. > Para obtener más detalles sobre la última versión del SDK y las versiones anteriores, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publique una nueva versión, [mira las versiones](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repositorio. ## Optional: Personalizar la hoja Todo lo que se quiera personalizar se configura usando el objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html). ### Appearance Customize colors, fonts, and so on to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=ios). ### Diseño del método de pago Configura el diseño de los métodos de pago en la hoja usando [paymentMethodLayout](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/configuration-swift.struct/paymentmethodlayout). Puedes mostrarlos horizontalmente, verticalmente o dejar que Stripe optimice el diseño de manera automática. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-mpe-payment-method-layouts.9d0513e2fcec5660378ba1824d952054.png) #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.paymentMethodLayout = .automatic ``` ### Recopilar las direcciones de los usuarios Recopila las direcciones de envío o facturación locales e internacionales de tus clientes usando el [Address Element](https://docs.stripe.com/elements/address-element.md?platform=ios). ### Nombre de pantalla para el comerciante Especifica un nombre de empresa que vea el cliente configurando [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp). De manera predeterminada, este es el nombre de tu aplicación. #### Swift ```swift var configuration = PaymentSheet.Configuration() configuration.merchantDisplayName = "My app, Inc." ``` ### Modo oscuro `PaymentSheet` se adapta automáticamente a la configuración de aspecto de todo el sistema del usuario (modo claro y modo oscuro). Si tu aplicación no admite el modo oscuro, puedes definir el [estilo](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV5styleAC18UserInterfaceStyleOvp) en modo `alwaysLight` o `alwaysDark`. ```swift var configuration = PaymentSheet.Configuration() configuration.style = .alwaysLight ``` ### Datos de facturación predeterminados Para establecer los valores predeterminados para los datos de facturación recopilados en la hoja de pago, configura la propiedad `defaultBillingDetails`. Los campos de la `PaymentSheet` se rellenan automáticamente con los valores que proporcionas. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.address.country = "US" configuration.defaultBillingDetails.email = "foo@bar.com" ``` ### Recopilación de los datos de facturación Usa `billingDetailsCollectionConfiguration` para especificar cómo deseas recopilar los datos de facturación en la hoja de pago. Puedes recopilar el nombre, el correo electrónico, el número de teléfono y la dirección del cliente. Si solo quieres los datos de facturación requeridos por el método de pago, establece `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` en true. En ese caso, `PaymentSheet.Configuration.defaultBillingDetails` se establece como los [datos de facturación](https://docs.stripe.com/api/payment_methods/object.md?lang=node#payment_method_object-billing_details) del método de pago. Si quieres recopilar datos de facturación adicionales que no son necesariamente requeridos por el método de pago, establece `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` en false. En ese caso, los datos de facturación recopilados mediante la `PaymentSheet` se establecen como los datos de facturación del método de pago. ```swift var configuration = PaymentSheet.Configuration() configuration.defaultBillingDetails.email = "foo@bar.com" configuration.billingDetailsCollectionConfiguration.name = .always configuration.billingDetailsCollectionConfiguration.email = .never configuration.billingDetailsCollectionConfiguration.address = .full configuration.billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod = true ``` > Pregúntale a tu asesor legal sobre las leyes que se aplican a la recopilación de información. Solicita los números de teléfono solo si los necesitas para la transacción. ## Optional: Gestiona el cierre de sesión del usuario `PaymentSheet` almacena cierta información de manera local para recordar si un usuario usó Link dentro de una aplicación. A fin de borrar el estado interno de `PaymentSheet`, llama al método `PaymentSheet.resetCustomer()` cuando el usuario cierre la sesión. ```swift import UIKit import StripePaymentSheet class MyViewController: UIViewController { @objc func didTapLogoutButton() { PaymentSheet.resetCustomer() // Other logout logic required by your app } } ``` ## Optional: Completa el pago en tu interfaz de usuario Puedes presentar la hoja de pago para recopilar solo los datos del método de pago y luego llamar al método `confirm` para completar el pago en la interfaz de usuario de tu aplicación. Esto resulta útil si tienes un botón de compra personalizado o solicitas pasos adicionales después de recopilar los datos del pago. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png) Completa el pago en la interfaz de usuario de tu aplicación #### UIKit Los siguientes pasos te explican cómo completar el pago en la interfaz de usuario de tu aplicación. Consulta nuestro ejemplo de integración en [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleCustomCheckoutViewController.swift). 1. Primero, inicializa [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) en lugar de `PaymentSheet` y actualiza tu interfaz de usuario con su propiedad `paymentOption`. Esta propiedad contiene una imagen y una etiqueta que representan el método de pago predeterminado que el cliente seleccionó inicialmente. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Update your UI using paymentSheetFlowController.paymentOption } } ``` 1. A continuación, llama a `presentPaymentOptions` para recopilar los datos del pago. Cuando se complete, actualiza nuevamente tu interfaz de usuario con la propiedad `paymentOption`. ```swift paymentSheetFlowController.presentPaymentOptions(from: self) { // Update your UI using paymentSheetFlowController.paymentOption } ``` 1. Por último, llama a `confirm`. ```swift paymentSheetFlowController.confirm(from: self) { paymentResult in // MARK: Handle the payment result switch paymentResult { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } } ``` #### SwiftUI Los siguientes pasos te explican cómo completar el pago en la interfaz de usuario de tu aplicación. Consulta nuestro ejemplo de integración en [GitHub](https://github.com/stripe/stripe-ios/blob/master/Example/PaymentSheet%20Example/PaymentSheet%20Example/ExampleSwiftUICustomPaymentFlow.swift). 1. Primero, inicializa [PaymentSheet.FlowController](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller) en lugar de `PaymentSheet`. Su propiedad `paymentOption` contiene una imagen y una etiqueta que representan el método de pago que el cliente tiene seleccionado actualmente, que puedes usar en tu interfaz de usuario. ```swift PaymentSheet.FlowController.create(paymentIntentClientSecret: paymentIntentClientSecret, configuration: configuration) { [weak self] result in switch result { case .failure(let error): print(error) case .success(let paymentSheetFlowController): self?.paymentSheetFlowController = paymentSheetFlowController // Use the paymentSheetFlowController.paymentOption properties in your UI myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! } } ``` 1. Usa [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) para integrar el botón que presenta la hoja para recopilar los datos de pago. Cuando `PaymentSheet.FlowController` llama al argumento `onSheetDismissed`, la `paymentOption` de la instancia `PaymentSheet.FlowController` refleja el método de pago seleccionado actualmente. ```swift PaymentSheet.FlowController.PaymentOptionsButton( paymentSheetFlowController: paymentSheetFlowController, onSheetDismissed: { myPaymentMethodLabel = paymentSheetFlowController.paymentOption?.label ?? "Select a payment method" myPaymentMethodImage = paymentSheetFlowController.paymentOption?.image ?? UIImage(systemName: "square.and.pencil")! }, content: { /* An example button */ HStack { Text(myPaymentMethodLabel) Image(uiImage: myPaymentMethodImage) } } ) ``` 1. Usa [PaymentSheet.FlowController.PaymentOptionsButton](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/flowcontroller/paymentoptionsbutton) para integrar el botón que confirma el pago. ```swift PaymentSheet.FlowController.ConfirmButton( paymentSheetFlowController: paymentSheetFlowController, onCompletion: { result in // MARK: Handle the payment result switch result { case .completed: print("Payment complete!") case .canceled: print("Canceled!") case .failed(let error): print(error) } }, content: { /* An example button */ Text("Pay") } ) ``` Establecer `allowsDelayedPaymentMethods` en true permite aceptar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias en EE. UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa el `PaymentSheet`, sino que se efectúa con éxito o falla más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente que su pedido está confirmado y solo finalízalo (por ejemplo, envía el producto) cuando el pago se realice correctamente. ## Optional: Habilitar la recolección de CVC en la confirmación Las siguientes instrucciones para volver a pedir el CVC de una tarjeta guardada durante la confirmación de PaymentIntent suponen que tu integración incluye lo siguiente: - Creación de PaymentIntents antes de recopilar los datos de pago ### Actualiza los parámetros de la creación de la intención Para volver a pedir el CVC al confirmar el pago, incluye `require_cvc_recollection` durante la creación del PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Integración en la aplicación para Android > This is a Integración en la aplicación para Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=android. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-overview.471eaf89a760f5b6a757fd96b6bb9b60.png) Integra la interfaz de usuario de pago prediseñada de Stripe a la confirmación de compra de tu aplicación Android con la clase [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html). ## Configurar Stripe [Lado del servidor] [Lado del cliente] Primero, necesitas una cuenta de Stripe. [Inscríbete ahora](https://dashboard.stripe.com/register). ### Lado del servidor Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Lado del cliente El [SDK para Android de Stripe](https://github.com/stripe/stripe-android) es de código abierto y está [completamente documentado](https://stripe.dev/stripe-android/). Para instalar el SDK, agrega `stripe-android` al bloque `dependencies` de tu archivo [app/build.gradle](https://developer.android.com/studio/build/dependencies): #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Stripe Android SDK implementation("com.stripe:stripe-android:23.0.2") // Include the financial connections SDK to support US bank account as a payment method implementation("com.stripe:financial-connections:23.0.2") } ``` > Para conocer detalles de la última versión y de versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-android/releases) en GitHub. Para recibir una notificación cuando se publique una nueva versión, [mira las versiones del repositorio](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Habilitar métodos de pago Visualiza tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean pertinentes para tu empresa y tus clientes. Consulta [Admisibilidad de métodos de pago](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) para obtener información sobre productos y métodos de pago admitidos, y consulta nuestra [página de precios](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones. ## Agregar un punto de conexión [Lado del servidor] > #### Nota > > Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recopila datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. Esta integración usa tres objetos de la API de Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utiliza para representar tu intención de cobrarle a un cliente, haciendo el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso. 1. (Opcional) [Cliente](https://docs.stripe.com/api/customers.md): Para configurar un método de pago para pagos futuros, debes adjuntarlo a un *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el “Customer Object” cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear un “Customer Object” antes del pago y asociarlo con tu propia representación interna de la cuenta del cliente más adelante. 1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): La información que contiene el “Customer Object” es confidencial y no se puede recuperar directamente desde una aplicación. Una CustomerSession otorga al SDK acceso temporal al objeto Customer y proporciona más opciones de configuración. Consulta una lista completa de [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si nunca guardas tarjetas para un cliente y no permites que los clientes frecuentes vuelvan a usar tarjetas guardadas, puedes omitir los objetos Customer y CustomerSession en tu integración. Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, agrega un punto de conexión en tu servidor que haga lo siguiente: 1. Recupere el objeto Customer o cree uno nuevo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) para el cliente. 1. Crea un PaymentIntent con el [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), la [moneda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) y el [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Devuelve a tu aplicación el *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) del Payment Intent, el `client_secret` de CustomerSession, la [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente y tu [clave publicable](https://dashboard.stripe.com/apikeys). Los métodos de pago que se muestran a los clientes durante el proceso de compra también se incluyen en el PaymentIntent. Puedes permitir que Stripe extraiga los métodos de pago de tu configuración del Dashboard o puedes enumerarlos manualmente. Independientemente de la opción que elijas, debes saber que la moneda especificada en el PaymentIntent filtra los métodos de pago que se muestran al cliente. Por ejemplo, si especificas `eur` en el PaymentIntent y tienes habilitado OXXO en el Dashboard, OXXO no se mostrará al cliente porque OXXO no admite pagos en `eur`. A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la moneda, las restricciones de los métodos de pago y otros parámetros para determinar la lista de métodos de pago admitidos. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente. #### Gestionar los métodos de pago desde el Dashboard Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe maneja la devolución de métodos de pago elegibles según factores como el monto de la transacción, la moneda y el flujo de pago. El PaymentIntent se crea según los métodos de pago que configuraste en el Dashboard. Si no quieres usar el Dashboard o si quieres especificar métodos de pago manualmente, puedes enumerarlos usando el atributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Cómo enumerar métodos de pago manualmente #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Cada método de pago debe admitir la moneda especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que admite cada método de pago. Consulta la página de [opciones de integración de métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre qué admitimos. ## Recopilar datos de pago [Lado del cliente] Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe cumplir con los siguientes requisitos: - Mostrar los productos de la compra y el importe total - Recopilar cualquier dato de envío requerido usando el [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android) - Incluye un botón de confirmación de compra para presentar la interfaz de usuario de Stripe #### Jetpack Compose [Inicializa](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-builder/index.html) una instancia de `PaymentSheet` dentro de `onCreate` de tu actividad de finalización de compra, especificando un método para administrar el resultado. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` A continuación, alcanza el secreto de cliente del PaymentIntent, el secreto de cliente de la sesión de este, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Define tu clave publicable usando `PaymentConfiguration` y guarda las otras para usarlas cuando presentes la PaymentSheet. ```kotlin import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberimport androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build()val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } varpaymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } ``` Cuando el cliente toca tu botón de confirmación de compra, llama a [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) para presentar la hoja de pago. Una vez que el cliente completa el pago, la hoja se cierra y se llama al [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) con un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). ```kotlin import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.platform.LocalContext import com.stripe.android.PaymentConfiguration import com.stripe.android.paymentsheet.PaymentSheet import com.stripe.android.paymentsheet.PaymentSheetResult @Composable fun App() { val paymentSheet = remember { PaymentSheet.Builder(::onPaymentSheetResult) }.build() val context = LocalContext.current var customerConfig by remember { mutableStateOf(null) } var paymentIntentClientSecret by remember { mutableStateOf(null) } LaunchedEffect(context) { // Make a request to your own server and retrieve payment configurations val networkResult = ... if (networkResult.isSuccess) { paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret ) PaymentConfiguration.init(context, networkResult.publishableKey) } }Button( onClick = { val currentConfig = customerConfig val currentClientSecret =paymentIntentClientSecret if (currentConfig != null && currentClientSecret != null) { presentPaymentSheet(paymentSheet, currentConfig, currentClientSecret) } } ) { Text("Checkout") } }private fun presentPaymentSheet( paymentSheet: PaymentSheet, customerConfig: PaymentSheet.CustomerConfiguration,paymentIntentClientSecret: String ) { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } private fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } ``` #### Vistas (clásicas) [Inicializa](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) una instancia de `PaymentSheet` dentro de `onCreate` de tu actividad de finalización de compra y especifica un método para administrar el resultado. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` A continuación, alcanza el secreto de cliente del PaymentIntent, el secreto de cliente de la sesión de este, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Define tu clave publicable usando `PaymentConfiguration` y guarda las otras para usarlas cuando presentes la PaymentSheet. #### Kotlin ```kotlin import com.stripe.android.paymentsheet.PaymentSheet class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheetlateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit varpaymentIntentClientSecret: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) paymentSheet = PaymentSheet.Builder(::onPaymentSheetResult).build(this)lifecycleScope.launch { // Make a request to your own server and retrieve payment configurations val networkResult = MyBackend.getPaymentConfig() if (networkResult.isSuccess) {paymentIntentClientSecret = networkResult.paymentIntent customerConfig = PaymentSheet.CustomerConfiguration.createWithCustomerSession( id = networkResult.customer, clientSecret = networkResult.customerSessionClientSecret )PaymentConfiguration.init(context, networkResult.publishableKey)} } } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) { // implemented in the next steps } } ``` Cuando el cliente toca tu botón de confirmación de compra, llama a [presentWithPaymentIntent](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#1814490530%2FFunctions%2F2002900378) para presentar la hoja de pago. Una vez que el cliente completa el pago, la hoja se cierra y se llama al [PaymentSheetResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html) con un [PaymentSheetResult](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result/index.html). #### Kotlin ```kotlin // ... class CheckoutActivity : AppCompatActivity() { lateinit var paymentSheet: PaymentSheet lateinit var customerConfig: PaymentSheet.CustomerConfiguration lateinit var paymentIntentClientSecret: String // ...fun presentPaymentSheet() { paymentSheet.presentWithPaymentIntent(paymentIntentClientSecret, PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .customer(customerConfig) // Set `allowsDelayedPaymentMethods` to true if your business handles // delayed notification payment methods like US bank accounts. .allowsDelayedPaymentMethods(true) .build() ) } fun onPaymentSheetResult(paymentSheetResult: PaymentSheetResult) {when(paymentSheetResult) { is PaymentSheetResult.Canceled -> { print("Canceled") } is PaymentSheetResult.Failed -> { print("Error: ${paymentSheetResult.error}") } is PaymentSheetResult.Completed -> { // Display for example, an order confirmation screen print("Completed") } } } } ``` Establecer `allowsDelayedPaymentMethods` en true permite aceptar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias en EE. UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa el `PaymentSheet`, sino que se efectúa con éxito o falla más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente que su pedido está confirmado y solo finalízalo (por ejemplo, envía el producto) cuando el pago se realice correctamente. ## Gestionar eventos posteriores al pago [Lado del servidor] Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Usa la [herramienta de webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico de confirmación del pedido a tu cliente, registrar la venta en una base de datos o iniciar un flujo de envío. Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración. Además de administrar el evento `payment_intent.succeeded`, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element: | Evento | Descripción | Acción | | ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Se envía cuando un cliente completa correctamente un pago. | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing) | Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. | | [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado cuando un cliente intenta un pago, pero el pago falla. | Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago. | ## Probar la integración #### Tarjetas | Número de tarjeta | Escenario | Cómo hacer la prueba | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | El pago con tarjeta se efectúa correctamente y no requiere autenticación. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000002500003155 | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 4000000000009995 | La tarjeta es rechazada con un código de rechazo `insufficient_funds`. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | | 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos. | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. | #### Redireccionamientos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Bancontact, iDEAL | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata. | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento. | | Pay by Bank | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida. | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. | | BLIK | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Débitos bancarios | Método de pago | Escenario | Cómo hacer la prueba | | ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA. | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. | | Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`. | Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración. ## Optional: Habilitar Link Habilita Link en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) para permitir que tus clientes guarden y reutilicen de forma segura su información de pago con el botón de finalización de compra rápido de un solo clic de Link. ### Pasa el correo electrónico de tu cliente al Payment Element móvil Link autentica a un cliente utilizando su dirección de correo electrónico. Stripe recomienda completar automáticamente la mayor cantidad de información posible para agilizar el proceso de finalización de compra. Para completar automáticamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona `defaultBillingDetails` con la información de tu cliente al inicializar`PaymentSheet.Configuration`. #### Kotlin ```kotlin val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Example, Inc.") .defaultBillingDetails( PaymentSheet.BillingDetails( name = "Jenny Rosen", email = "jenny.rosen@example.com", phone = "888-888-8888" ) ) .build() ``` ## Optional: Habilitar Google Pay ### Configura tu integración Para usar Google Pay, primero habilita la API de Google Pay agregando lo siguiente a la etiqueta `` de tu **AndroidManifest.xml**: ```xml ... ``` Para obtener más detalles, consulta cómo [configurar la API de Google Pay](https://developers.google.com/pay/api/android/guides/setup) para Android en Google Pay. ### Agregar Google Pay Para agregar Google Pay a tu integración, especifica un [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) con tu entorno de Google Pay (de producción o de prueba) y el [código de país de tu empresa](https://dashboard.stripe.com/settings/account) al inicializar [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). #### Kotlin ```kotlin val googlePayConfiguration = PaymentSheet.GooglePayConfiguration( environment = PaymentSheet.GooglePayConfiguration.Environment.Test, countryCode = "US", currencyCode = "USD" // Required for Setup Intents, optional for Payment Intents ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "My merchant name") .googlePay(googlePayConfiguration) .build() ``` ### Prueba Google Pay Google te permite realizar pagos de prueba a través de su tarjeta [Test card suite](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). El conjunto de pruebas admite el uso de [tarjetas de prueba](https://docs.stripe.com/testing.md) de Stripe. Debes probar Google Pay usando un dispositivo Android físico en lugar de un dispositivo simulado, en un país donde se admite Google Pay. Inicia sesión en una cuenta Google en tu dispositivo de prueba con una tarjeta real guardada en Google Wallet. ## Optional: Habilitar escaneo de tarjetas Para obtener soporte al escanear tarjetas, [solicita el acceso de producción](https://developers.google.com/pay/api/android/guides/test-and-deploy/request-prod-access) a la API de Google Pay desde [Google Pay and Wallet Console](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite). - Si habilitaste Google Pay, la funcionalidad para escanear tarjetas está disponible de forma automática en nuestra interfaz de usuario (IU) en los dispositivos compatibles. Para obtener más información sobre los dispositivos compatibles, consulta las [restricciones de la API de Google Pay](https://developers.google.com/pay/payment-card-recognition/debit-credit-card-recognition). - **Importante:** La funcionalidad para escanear tarjetas solo aparece en compilaciones firmadas con la misma clave de firma registrada en [Google Pay & Wallet Console](https://pay.google.com/business/console). Las compilaciones de prueba o depuración que usen claves de firma diferentes (por ejemplo, compilaciones distribuidas a través de Firebase App Tester) no mostrarán la opción **Escanear tarjeta**. Para probar el escaneo de tarjetas en compilaciones previas al lanzamiento, debes realizar lo siguiente: - Firma tus compilaciones de prueba con tu clave de firma de producción - Agrega la huella digital de tu clave de firma de prueba a Google Pay and Wallet Console ## Optional: Habilitar pagos ACH Para habilitar los pagos con débito ACH, debes incluir Financial Connections como dependencia para tu aplicación. El [SDK para Android de Stripe](https://github.com/stripe/stripe-android) es de código abierto y está [completamente documentado](https://stripe.dev/stripe-android/). Para instalar el SDK, agrega `financial-connections` al bloque `dependencies` de tu archivo [app/build.gradle](https://developer.android.com/studio/build/dependencies): #### Kotlin ```kotlin plugins { id("com.android.application") } android { ... } dependencies { // ... // Financial Connections Android SDK implementation("com.stripe:financial-connections:23.0.2") } ``` > Para conocer detalles de la última versión y de versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-android/releases) en GitHub. Para recibir una notificación cuando se publique una nueva versión, [mira las versiones del repositorio](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository). ## Optional: Personalizar la hoja Todo lo que se quiera personalizar se configura usando el objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html). ### Appearance Customize colors, fonts, and more to match the look and feel of your app by using the [appearance API](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=android). ### Diseño del método de pago Configura el diseño de los métodos de pago en la hoja con [paymentMethodLayout](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/-builder/index.html#2123253356%2FFunctions%2F2002900378). Puedes mostrarlos horizontalmente, verticalmente o dejar que Stripe optimice el diseño de manera automática. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-mpe-payment-method-layouts.3bcfe828ceaad1a94e0572a22d91733f.png) #### Kotlin ```kotlin PaymentSheet.Configuration.Builder("Example, Inc.") .paymentMethodLayout(PaymentSheet.PaymentMethodLayout.Automatic) .build() ``` ### Recopilar las direcciones de los usuarios Recopila las direcciones de envío o facturación locales e internacionales de tus clientes usando el [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android). ### Nombre con el que aparecerá la empresa Especifica el nombre que quieres que el cliente vea para tu empresa configurando [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378). De manera predeterminada, este es el nombre de tu aplicación. #### Kotlin ```kotlin PaymentSheet.Configuration.Builder( merchantDisplayName = "My app, Inc." ).build() ``` ### Modo oscuro De forma predeterminada, `PaymentSheet` se adapta automáticamente a la configuración de aspecto de todo el sistema del usuario (modo claro y modo oscuro). Puedes cambiarla definiendo modo claro o modo oscuro en tu aplicación: #### Kotlin ```kotlin // force dark AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) // force light AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) ``` ### Datos de facturación predeterminados Para establecer los valores predeterminados para los datos de facturación recopilados en la hoja de pago, configura la propiedad `defaultBillingDetails`. Los campos de la `PaymentSheet` se rellenan automáticamente con los valores que proporcionas. #### Kotlin ```kotlin val address = PaymentSheet.Address(country = "US") val billingDetails = PaymentSheet.BillingDetails( address = address, email = "foo@bar.com" ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .build() ``` ### Configura la recopilación de datos de facturación Usa `BillingDetailsCollectionConfiguration` para especificar cómo deseas recopilar los datos de facturación en la PaymentSheet. Puedes recopilar el nombre, el correo electrónico, el número de teléfono y la dirección del cliente. Si quieres adjuntar datos de facturación predeterminados al objeto PaymentMethod aun cuando esos campos no se hayan recopilado en la interfaz de usuario, establece `billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod` en `true`. #### Kotlin ```kotlin val billingDetails = PaymentSheet.BillingDetails( email = "foo@bar.com" ) val billingDetailsCollectionConfiguration = BillingDetailsCollectionConfiguration( attachDefaultsToPaymentMethod = true, name = BillingDetailsCollectionConfiguration.CollectionMode.Always, email = BillingDetailsCollectionConfiguration.CollectionMode.Never, address = BillingDetailsCollectionConfiguration.AddressCollectionMode.Full, ) val configuration = PaymentSheet.Configuration.Builder(merchantDisplayName = "Merchant, Inc.") .defaultBillingDetails(billingDetails) .billingDetailsCollectionConfiguration(billingDetailsCollectionConfiguration) .build() ``` > Pregúntale a tu asesor legal sobre las leyes que se aplican a la recopilación de información. Solicita los números de teléfono solo si los necesitas para la transacción. ## Optional: Gestiona el cierre de sesión del usuario `PaymentSheet` almacena cierta información de manera local para recordar si un usuario usó Link dentro de una aplicación. A fin de borrar el estado interno de `PaymentSheet`, llama al método `PaymentSheet.resetCustomer()` cuando el usuario cierre la sesión. #### Kotlin ```kotlin class MyActivity: Activity { fun onLogoutButtonClicked() { PaymentSheet.resetCustomer(this) // Other logout logic required by your app } } ``` ## Optional: Completa el pago en tu interfaz de usuario Puedes presentar una hoja de pago para recopilar solo los datos del método de pago y completar el pago en la interfaz de usuario de tu aplicación. Esto resulta útil si tienes un botón de compra personalizado o solicitas pasos adicionales después de recopilar los datos del pago. ![](https://b.stripecdn.com/docs-statics-srv/assets/android-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png) > Una integración de ejemplo está [disponible en nuestro GitHub](https://github.com/stripe/stripe-android/blob/master/paymentsheet-example/src/main/java/com/stripe/android/paymentsheet/example/samples/ui/paymentsheet/custom_flow/CustomFlowActivity.kt). 1. Primero, inicializa [PaymentSheet.FlowController](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html) en lugar de `PaymentSheet` usando uno de los métodos [Builder](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/-builder/index.html). #### Android (Kotlin) ```kotlin class CheckoutActivity : AppCompatActivity() { private lateinit var flowController: PaymentSheet.FlowController override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val flowController = PaymentSheet.FlowController.Builder( resultCallback = ::onPaymentSheetResult, paymentOptionResultCallback = ::onPaymentOption, ).build(this) } } ``` 1. A continuación, llama a `configureWithPaymentIntent` con las claves de objeto de Stripe recuperadas del backend y actualiza tu interfaz de usuario en la devolución de llamada usando [getPaymentOption()](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-2091462043%2FFunctions%2F2002900378). Contiene una imagen y una etiqueta que representan el método de pago seleccionado actualmente por el cliente. #### Android (Kotlin) ```kotlin flowController.configureWithPaymentIntent( paymentIntentClientSecret = paymentIntentClientSecret, configuration = PaymentSheet.Configuration.Builder("Example, Inc.") .customer(PaymentSheet.CustomerConfiguration( id = customerId, ephemeralKeySecret = ephemeralKeySecret )) .build() ) { isReady, error -> if (isReady) { // Update your UI using `flowController.getPaymentOption()` } else { // handle FlowController configuration failure } } ``` 1. A continuación, llama a [presentPaymentOptions](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#449924733%2FFunctions%2F2002900378) para recopilar los datos del pago. Cuando el cliente termina, la hoja se cierra y llama al [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-option-callback/index.html) especificado anteriormente en `create`. Implementa este método para actualizar tu interfaz de usuario con la `paymentOption` devuelta. #### Android (Kotlin) ```kotlin // ... flowController.presentPaymentOptions() // ... private fun onPaymentOption(paymentOptionResult: PaymentOptionResult) { val paymentOption = paymentOptionResult.paymentOption if (paymentOption != null) { paymentMethodButton.text = paymentOption.label paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( paymentOption.drawableResourceId, 0, 0, 0 ) } else { paymentMethodButton.text = "Select" paymentMethodButton.setCompoundDrawablesRelativeWithIntrinsicBounds( null, null, null, null ) } } ``` 1. Finalmente, llama a [confirm](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-flow-controller/index.html#-479056656%2FFunctions%2F2002900378) para completar el pago. Cuando el cliente termina, la hoja se cierra y llama al [paymentResultCallback](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet-result-callback/index.html#237248767%2FFunctions%2F2002900378) especificado anteriormente en `create`. #### Android (Kotlin) ```kotlin // ... flowController.confirmPayment() // ... private fun onPaymentSheetResult( paymentSheetResult: PaymentSheetResult ) { when (paymentSheetResult) { is PaymentSheetResult.Canceled -> { // Payment canceled } is PaymentSheetResult.Failed -> { // Payment Failed. See logcat for details or inspect paymentSheetResult.error } is PaymentSheetResult.Completed -> { // Payment Complete } } } ``` Establecer `allowsDelayedPaymentMethods` en true permite aceptar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias en EE. UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa el `PaymentSheet`, sino que se efectúa con éxito o falla más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente que su pedido está confirmado y solo finalízalo (por ejemplo, envía el producto) cuando el pago se realice correctamente. ## Optional: Habilitar la recolección de CVC en la confirmación Las siguientes instrucciones para volver a pedir el CVC de una tarjeta guardada durante la confirmación de PaymentIntent suponen que tu integración incluye lo siguiente: - Creación de PaymentIntents antes de recopilar los datos de pago ### Actualiza los parámetros de la creación de la intención Para volver a pedir el CVC al confirmar el pago, incluye `require_cvc_recollection` durante la creación del PaymentIntent. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an Ephemeral Key for the Customer curl https://api.stripe.com/v1/ephemeral_keys \ -u <>: \ -H "Stripe-Version: 2026-02-25.clover" \ -H "Stripe-Account: 2026-02-25.clover" \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \-d "payment_method_options[card][require_cvc_recollection]"=true \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` # Integración en la aplicación para React Native > This is a Integración en la aplicación para React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/accept-a-payment?payment-ui=mobile&platform=react-native. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Esta integración combina todos los pasos necesarios para realizar el pago, incluida la recopilación de los datos de pago y la confirmación del pago, en una única hoja que se muestra en la parte superior de tu aplicación. ## Configurar Stripe [Lado del servidor] [Lado del cliente] Primero, necesitas una cuenta de Stripe. [Inscríbete ahora](https://dashboard.stripe.com/register). ### Lado del servidor Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Lado del cliente El [SDK para React Native](https://github.com/stripe/stripe-react-native) es de código abierto y está plenamente documentado. Internamente, utiliza SDK para [iOS nativo](https://github.com/stripe/stripe-ios) y [Android](https://github.com/stripe/stripe-android). Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (según el administrador de paquetes que utilices): #### hilado ```bash yarn add @stripe/stripe-react-native ``` #### npm ```bash npm install @stripe/stripe-react-native ``` A continuación, instala otras dependencias necesarias: - Para iOS, vaya al directorio **ios** y ejecute `pod install` para asegurarse de que también instala las dependencias nativas necesarias. - Para Android, no hay más dependencias para instalar. > Recomendamos seguir la [guía oficial de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) para agregar soporte para TypeScript. ### Inicialización de Stripe Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente `StripeProvider` o usa el método de inicialización `initStripe`. Solo se requiere la [clave publicable](https://docs.stripe.com/keys.md#obtain-api-keys) de la API en `publishableKey`. El siguiente ejemplo muestra cómo inicializar Stripe usando el componente `StripeProvider`. ```jsx import { useState, useEffect } from 'react'; import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( {/* Your app code here */} ); } ``` > Usa las [claves de prueba](https://docs.stripe.com/keys.md#obtain-api-keys) de la API durante las pruebas y el desarrollo, y tus claves para [modo activo](https://docs.stripe.com/keys.md#test-live-modes) cuando publiques tu aplicación. ## Habilitar métodos de pago Visualiza tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) y habilita los que quieras aceptar. Se necesita al menos un método de pago habilitado para crear un *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods). De forma predeterminada, Stripe habilita tarjetas y otros métodos de pago habituales que pueden ayudarte a llegar a más clientes, pero te recomendamos activar otros métodos de pago que sean pertinentes para tu empresa y tus clientes. Consulta [Admisibilidad de métodos de pago](https://docs.stripe.com/payments/payment-methods/payment-method-support.md) para obtener información sobre productos y métodos de pago admitidos, y consulta nuestra [página de precios](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones. ## Agregar un punto de conexión [Lado del servidor] > #### Nota > > Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recopila datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). Si tu plataforma Connect usa [Cuentas configuradas por clientes](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), usa nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias de `Clientes` y eventos en tu código con las referencias de la API Accounts v2 equivalentes. Esta integración usa tres objetos de la API de Stripe: 1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe lo utiliza para representar tu intención de cobrarle a un cliente, haciendo el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso. 1. (Opcional) [Cliente](https://docs.stripe.com/api/customers.md): Para configurar un método de pago para pagos futuros, debes adjuntarlo a un *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el “Customer Object” cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear un “Customer Object” antes del pago y asociarlo con tu propia representación interna de la cuenta del cliente más adelante. 1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): La información que contiene el “Customer Object” es confidencial y no se puede recuperar directamente desde una aplicación. Una CustomerSession otorga al SDK acceso temporal al objeto Customer y proporciona más opciones de configuración. Consulta una lista completa de [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components). > Si nunca guardas tarjetas para un cliente y no permites que los clientes frecuentes vuelvan a usar tarjetas guardadas, puedes omitir los objetos Customer y CustomerSession en tu integración. Por motivos de seguridad, tu aplicación no puede crear estos objetos. En su lugar, agrega un punto de conexión en tu servidor que haga lo siguiente: 1. Recupere el objeto Customer o cree uno nuevo. 1. Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions.md) para el cliente. 1. Crea un PaymentIntent con el [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount), la [moneda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) y el [cliente](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer). 1. Devuelve a tu aplicación el *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) del Payment Intent, el `client_secret` de CustomerSession, la [ID](https://docs.stripe.com/api/customers/object.md#customer_object-id) del cliente y tu [clave publicable](https://dashboard.stripe.com/apikeys). Los métodos de pago que se muestran a los clientes durante el proceso de compra también se incluyen en el PaymentIntent. Puedes permitir que Stripe extraiga los métodos de pago de tu configuración del Dashboard o puedes enumerarlos manualmente. Independientemente de la opción que elijas, debes saber que la moneda especificada en el PaymentIntent filtra los métodos de pago que se muestran al cliente. Por ejemplo, si especificas `eur` en el PaymentIntent y tienes habilitado OXXO en el Dashboard, OXXO no se mostrará al cliente porque OXXO no admite pagos en `eur`. A menos que tu integración requiera una opción basada en código para ofrecer métodos de pago, Stripe recomienda usar la opción automatizada. Esto se debe a que Stripe evalúa la moneda, las restricciones de los métodos de pago y otros parámetros para determinar la lista de métodos de pago admitidos. Se les da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la moneda y la ubicación del cliente. #### Gestionar los métodos de pago desde el Dashboard Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe maneja la devolución de métodos de pago elegibles según factores como el monto de la transacción, la moneda y el flujo de pago. El PaymentIntent se crea según los métodos de pago que configuraste en el Dashboard. Si no quieres usar el Dashboard o si quieres especificar métodos de pago manualmente, puedes enumerarlos usando el atributo `payment_method_types`. #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ # In the latest version of the API, specifying the `automatic_payment_methods` parameter # is optional because Stripe enables its functionality by default. -d "automatic_payment_methods[enabled]"=true \ ``` #### Cómo enumerar métodos de pago manualmente #### curl ```bash # Create a Customer (use an existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u <>: \ -X "POST" \ -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}" # Create an CustomerSession for the Customer curl https://api.stripe.com/v1/customer_sessions \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "components[mobile_payment_element][enabled]"=true \ -d "components[mobile_payment_element][features][payment_method_save]"=enabled \ -d "components[mobile_payment_element][features][payment_method_redisplay]"=enabled \ -d "components[mobile_payment_element][features][payment_method_remove]"=enabled # Create a PaymentIntent curl https://api.stripe.com/v1/payment_intents \ -u <>: \ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \ -d "amount"=1099 \ -d "currency"="eur" \ -d "payment_method_types[]"="bancontact" \ -d "payment_method_types[]"="card" \ -d "payment_method_types[]"="ideal" \ -d "payment_method_types[]"="klarna" \ -d "payment_method_types[]"="sepa_debit" \ ``` > Cada método de pago debe admitir la moneda especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que admite cada método de pago. Consulta la página de [opciones de integración de métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre qué admitimos. ## Recopilar datos de pago [Lado del cliente] Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe cumplir con los siguientes requisitos: - Mostrar los productos de la compra y el importe total - Recopilar la información de envío necesaria - Incluir un botón de pago para presentar la interfaz de usuario de Stripe En la finalización de compra de tu aplicación, haz una solicitud de red al punto de conexión de back-end que creaste en el paso anterior y llama a `initPaymentSheet` desde el hook `useStripe`. ```javascript export default function CheckoutScreen() { const { initPaymentSheet, presentPaymentSheet } = useStripe(); const [loading, setLoading] = useState(false); const fetchPaymentSheetParams = async () => { const response = await fetch(`${API_URL}/payment-sheet`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const { paymentIntent, ephemeralKey, customer } = await response.json(); return { paymentIntent, ephemeralKey, customer, }; }; const initializePaymentSheet = async () => { const { paymentIntent, ephemeralKey, customer, } = await fetchPaymentSheetParams(); const { error } = await initPaymentSheet({ merchantDisplayName: "Example, Inc.", customerId: customer, customerEphemeralKeySecret: ephemeralKey, paymentIntentClientSecret: paymentIntent, // Set `allowsDelayedPaymentMethods` to true if your business can handle payment //methods that complete payment after a delay, like SEPA Debit and Sofort. allowsDelayedPaymentMethods: true, defaultBillingDetails: { name: 'Jane Doe', } }); if (!error) { setLoading(true); } }; const openPaymentSheet = async () => { // see below }; useEffect(() => { initializePaymentSheet(); }, []); return (