# Aceptar un pago

Acepta pagos en línea de forma segura.

## Start here: Install agent skills

Stripe recommends using official skills to integrate with the API using best practices. Follow the instructions below to learn how.

**Tip: Use curl instead of Fetch tools.** Skills are detailed 10–20 KB markdown files. Fetch tools summarize them. `curl -sL` guarantees the full content.

**Using `npx skills`**: Check if `npx` is installed on the system. If `npx` is available, run `npx skills add https://docs.stripe.com --list` to list available skills, then run `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` to install individual skills.

**If `npx skills` isn’t available**: You can use curl to fetch the index of available skills, what they do, and their files from `https://docs.stripe.com/.well-known/skills/index.json`. To download a skill and its related files, use curl to download them from `https://docs.stripe.com/.well-known/skills/<filepath>`.

For this article, we recommend using these skills: `stripe-best-practices`

Instrucciones para LLM: Stripe recomienda utilizar la API Checkout Sessions con el elemento de pago en lugar de Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a los de Payment Intents (cobro básico de pagos utilizando `price_data` o crea de un proceso de pago completo con partidas, impuestos, etc.). Algunas funciones, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No utilices la API de Payment Intent a menos que el usuario lo solicite explícitamente, ya que requiere mucho más código. Más información sobre Elements con la API Checkout Sessionshttps://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y Payment Element, el `client_secret` inicializa el proceso de compra por sí mismo (`stripe.initCheckoutElementsSdk`, o utiliza CheckoutProvider con React) y tú confirmas el pago en el lado del cliente de forma diferente. Si utilizas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, utiliza `CheckoutProvider` con el secreto del cliente y confirma con `checkout.confirm`. Si utilizas HTML, asegúrate de utiliza `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Crea un formulario de pago o usa una página del proceso de compra prediseñada para comenzar a aceptar pagos en línea.

# 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 una página de pagos alojada en [Stripe Checkout](https://docs.stripe.com/payments/checkout.md). Descubre 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 predefinidas
- 3 radios de borde preestablecidos
- Color de fondo y de borde personalizado
- Logotipo personalizado

[Pruébalo](https://checkout.stripe.dev/)

Primero, [regístrate](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]

Añade un botón de finalización de compra en tu sitio web que llame a un punto de conexión del lado del servidor para crear una [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md).

También puedes crear una sesión de Checkout para un [cliente existente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), lo que te permite rellenar automáticamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

```html
<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <!-- Use action="/create-checkout-session.php" if your server is PHP based. -->
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Checkout</button>
    </form>
  </body>
</html>
```

Una Checkout Session es la representación programática de lo que ve tu cliente cuando se le redirecciona al formulario de pago. Puedes configurarla con opciones como las siguientes:

- [Partidas individuales](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) que se cobrarán
- Divisas que se usarán

Debes completar `success_url` con el valor URL de una página de tu sitio web a la que Checkout redirige al cliente después de completar el pago.

> De forma predeterminada, las Checkout Sessions caducan a las 24 horas de crearse.

Después de crear una sesión de Checkout, redirige al 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. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<<YOUR_SECRET_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 divisa 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 un ID de transacción o establece el importe y la divisa de un pedido en el Dashboard.

Puedes habilitar Apple Pay y Google Pay en la [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 las filtra incluso cuando están habilitadas. Filtramos Google Pay si [habilitas el impuesto automático](https://docs.stripe.com/tax/checkout.md) sin recopilar la 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 igual que otros pagos con tarjeta.

### Confirma tu punto de conexión

Confirma que tu punto de conexión sea 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 ""
```

Deberías ver una respuesta en tu terminal de este estilo:

```bash
HTTP/1.1 303 See Other
Location: https://checkout.stripe.com/c/pay/cs_test_...
...
```

### Verify your integration 

Ya deberías tener un botón de finalización de compra en funcionamiento que redireccione al cliente a Stripe Checkout.

1. Haz clic en el botón de finalización de compra.
1. Se te redireccionará al formulario de pago de Stripe Checkout.

Si tu integración no funciona, haz lo siguiente:

1. Abre la pestaña Red en las herramientas para desarrolladores de tu navegador.
1. Haz clic en el botón de finalización de compra y confirma que se le haya enviado una petición XHR a tu punto de conexión de lado del servidor (`POST /create-checkout-session`).
1. Verifica que la petición devuelva un código de estado 200.
1. Usa `console.log(session)` dentro del oyente de clic del botón para confirmar que se hayan devuelto los datos correctos.

## Muestra una 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 pequeña página de confirmación:

```html
<html>
  <head><title>Thanks for your order!</title></head>
  <body>
    <h1>Thanks for your order!</h1>
    <p>
      We appreciate your business!
      If you have any questions, please email
      <a href="mailto:orders@example.com">orders@example.com</a>.
    </p>
  </body>
</html>
```

A continuación, 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 "<<YOUR_SECRET_KEY>>:" \
  -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).

## Administrar 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 Checkout Session. Usa la [herramienta webhook Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir y gestionar estos eventos, que pueden 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 trabajo de un envío.

Escucha estos eventos en lugar de esperar a que el cliente sea redirigido a tu sitio web. No es fiable activar el cumplimiento únicamente desde la página de inicio de Checkout. Configurar tu integración para escuchar eventos asincrónicos te permite aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración.

Encontrarás más detalles en nuestra [guía para completar pedidos con 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 sesión de Checkout.                                               | 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 se efectúa correctamente un pago realizado con un método de pago retrasado, como una deuda directa ACH. | 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 una deuda directa ACH.                    | Avisa al cliente del fallo y haz que vuelva durante la sesión para intentar el pago de nuevo.                                                                                                      |

## Prueba tu integración

Para probar la integración de tu formulario de pago alojado en Stripe:

1. Crear una sesión de Checkout.
1. Completa los datos del pago con un método de la siguiente tabla.
   - Introduce cualquier fecha futura como fecha de caducidad.
   - Introduce cualquier número de 3 dígitos como CVC.
   - Introduce cualquier código postal de facturación.
1. Haz clic en **Pagar**. Se te redirigirá 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 ha efectuado 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.

Más información sobre [probar la integración](https://docs.stripe.com/testing.md).

#### Tarjetas

| Número de tarjeta   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Monederos

| Método de pago | Situación                                                                                                                                                                              | Cómo hacer pruebas                                                                                                                                                                                      |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Completar el pago de prueba** en la página de redireccionamiento. |

#### Redireccionamientos bancarios

| Método de pago                      | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Adeudo directo BECS                 | Tu cliente paga satisfactoriamente con adeudo directo BECS.                                                                                                                                                          | Rellena el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa inicialmente al estado de `processing` y, 3&nbsp;minutos más tarde, a `succeeded`.          |
| Adeudo directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Rellena 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK                                | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena el formulario con el número de cuenta `AT861904300235473202`.                                                                                                            |

#### Vales

| Método de pago | Situación                                  | Cómo hacer pruebas                                                                                                 |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 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 cuadro de 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 pago, 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 los productos para representar diferentes bienes físicos o niveles de servicio, y los *Precios* para representar el precio de cada producto. Puedes [configurar tu sesión de proceso de compra](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios por los que el cliente paga lo que quiere.

Por ejemplo, puedes crear una camiseta como producto con un precio de 20&nbsp;USD. Esto te permite actualizar y añadir precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o con 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` del producto que ofrezcas.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

A continuación, crea un [Precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrarás por tu producto. Esto incluye el coste del producto y la divisa que se va a utilizar.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 del producto del Dashboard, haz clic en **Copiar a modo activo**, en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las actualizaciones posteriores del producto de prueba no se reflejarán en el producto activo.

Asegúrate de que estás en un entorno de prueba haciendo 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, haz lo siguiente:

- Ve a la sección [Productos](https://dashboard.stripe.com/test/products) en el Dashboard.
- Haz clic en **Añadir producto**.
- Selecciona **Una vez** cuando establezcas el precio.

Checkout muestra el nombre, la descripción y las imágenes del producto que ofrezcas.

Cada precio que crees tiene un ID. Al crear una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en varias divisas, haz que tu Precio esté en *múltiples divisas* (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). El proceso de compra [determina la divisa local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) automáticamente y la presenta si el Precio lo admite.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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: Rellenar automáticamente los datos del cliente [Lado del servidor]

Si ya has recopilado el correo electrónico de tu cliente y quieres que se rellene automáticamente en la Checkout Session, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) al crear una Checkout Session.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --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 los datos de los métodos de pago [Lado del servidor]

De forma predeterminada, los métodos de pago que se utilizan para hacer un pago único con Checkout no están disponibles para usarlos en el futuro.

### Guarda métodos de pago para cargarlos fuera de la sesión

Puedes configurar Checkout para guardar 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). Esto es útil si necesitas capturar un método de pago registrado 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 "<<YOUR_SECRET_KEY>>:" \
  -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"
```

Si utilizas Checkout en modo `suscripción`, Stripe guarda automáticamente el método de pago para realizar los cobros de los pagos posteriores. Los métodos de pago con tarjeta guardados para los clientes que utilizan el modo `setup_future_usage` o `suscripción` no aparecen en Checkout en caso de nuevas compras (más información al respecto a continuación). Recomendamos utilizar [texto personalizado](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) para incluir un enlace a cualquier condición relevante relativa al uso de la información de pago guardada.

> Las leyes internacionales de privacidad son complicadas y tienen muchos matices. Te recomendamos que te pongas en contacto 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 el Consejo Europeo 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 automáticamente en Checkout

De forma predeterminada, el proceso de compra utiliza [Link](https://docs.stripe.com/payments/link/checkout-link.md) para ofrecer a tus clientes la opción de guardar y reutilizar de forma segura su información de pago. Si prefieres gestionar los métodos de pago tú mismo, utiliza [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) al crear una sesión de proceso de compra para permitir que tus clientes guarden sus métodos de pago para futuras compras durante el proceso de compra.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 se especifica este parámetro en el 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 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: siempre](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utiliza este parámetro para determinar si un método de pago puede completarse automáticamente en futuras compras. Cuando uses `saved_payment_method_options.payment_method_save`, no necesitarás transferir `setup_future_usage` para guardar el método de pago.

Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.

Para usar [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) se requiere un `Customer`. Para guardar un nuevo cliente, establece el valor de la sesión de Checkout [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) en `always`. De lo contrario, la sesión no guarda 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 guarda los métodos de pago creados en modo `subscription` o que utilizan `setup_future_usage`. Estos métodos de pago tienen un valor `allow_redisplay` de `limited`, lo que evita que se rellenen previamente para devolver 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 cómo cambiar o anular el comportamiento `allow_redisplay`.

> Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlas fuera de la sesión, pero Checkout solo rellena automáticamente las tarjetas guardadas. Descubre cómo [rellenar automáticamente 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 el modo de configuración](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout).

### Permite que los clientes eliminen los métodos de pago guardados

Para permitir que tus clientes eliminen un método de pago guardado para 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) al crear una sesión de Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 y la captura [Lado del servidor]

Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar los fondos más tarde. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. A continuación, dispones de un tiempo determinado para capturar los fondos, [dependiendo de la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Si no capturas el pago antes de que expire la autorización, el pago se cancela y el emisor libera los fondos retenidos.

Separar la autorización de la captura es útil si necesitas tomar medidas adicionales entre que se confirma que el cliente puede pagar y el cobro de los fondos. Por ejemplo, si vendes artículos de stock limitado y un cliente compra un producto con Checkout, puede que tengas que confirmar si hay stock del artículo antes de capturar el pago y completar la compra. Para conseguirlo, usa el siguiente flujo de trabajo:

1. Confirma que Stripe ha autorizado el método de pago del cliente.
1. Consulta tu sistema de gestión de inventario para confirmar que el artículo sigue disponible.
1. Actualiza tu sistema de gestión de inventario para indicar que un cliente ha comprado el artículo.
1. Captura el pago del cliente.
1. Si la compra se realiza correctamente, informa a tu cliente en tu página de confirmación.

Para indicar que deseas separar la autorización y 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 de la tarjeta del cliente.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 no capturado, puedes utilizar 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). La captura de pagos mediante programación requiere acceso a los PaymentIntent creados durante la sesión de Checkout, que puedes obtener desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Gestión de cuentas de clientes [Sin programación]

Permite a tus clientes [gestionar](https://docs.stripe.com/customer-management.md) sus propias cuentas compartiendo 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 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

- [Añade descuentos](https://docs.stripe.com/payments/checkout/discounts.md)
- [Recauda impuestos](https://docs.stripe.com/payments/checkout/taxes.md)
- [Recopila ID fiscales](https://docs.stripe.com/tax/checkout/tax-ids.md)
- [Añade 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). Descubre 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

Incrusta 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 personalizado y color del borde
- Logotipo personalizado

Usa la [configuración de imagen de marca](https://dashboard.stripe.com/settings/branding/checkout) en el Dashboard de Stripe para hacer coincidir el proceso de compra con el diseño de tu sitio.

Primero, [regístrate](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]

Desde tu servidor, crea una *sesión de pago* (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) y configura el [ui_mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-ui_mode) en `embedded_page`. Puede configurar la [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) con [partida individual](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-line_items) que incluir y opciones como [divisas](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-currency).

También puedes crear una sesión de Checkout para un [cliente existente](https://docs.stripe.com/payments/existing-customers.md?platform=web&ui=stripe-hosted), lo que te permite rellenar automáticamente los campos de Checkout con información de contacto conocida y unificar tu historial de compras para ese cliente.

Para devolver a los clientes 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 el ID de la sesión de Checkout antes de redireccionar.

Consigue más información 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 redireccionamiento](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 `client_secret` devuelto en la respuesta para [activar 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. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<<YOUR_SECRET_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_page',return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end
```

## Montar 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 añadiéndolo al encabezado de tu archivo HTML. A continuación, crea un nodo DOM vacío (contenedor) para utilizarlo para el montaje.

```html
<head>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>
```

Inicializa Stripe.js con la clave publicable de la API.

Crea una función asincrónica `fetchClientSecret` que haga una petición a tu servidor para crear la Checkout Session y recuperar el secreto de cliente. Especifica esta función en `options` cuando crees la instancia de Checkout:

```javascript
// Initialize Stripe.js
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

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.createEmbeddedCheckoutPage({
    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 usar el componente Embedded Checkout, crea un `EmbeddedCheckoutProvider`. Llama a `loadStripe` con tu clave publicable de la API y especifica la `Promise` devuelta al proveedor.

Crea una función asincrónica `fetchClientSecret` para que haga una petición a tu servidor para crear la Checkout Session y recupere el secreto de cliente. Especifica esta función en la propiedad `options` aceptada 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 = React.useCallback(() => {
    // Create a Checkout Session
    return fetch("/create-checkout-session", {
      method: "POST",
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  const options = {fetchClientSecret};

  return (
    <div id="checkout">
      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={options}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  )
}
```

Checkout se representa en un iframe que envía la información del pago a Stripe de forma segura a través de una conexión HTTPS.

> Evita colocar Checkout dentro de otro iframe, ya que algunos métodos de pago requieren un redireccionamiento a otra página para confirmar el pago.

### Personaliza la apariencia

Personaliza Checkout para que coincida con el diseño de tu sitio configurando el color de fondo, el color del botón, el radio del borde y las fuentes en la [configuración de la imagen de marca](https://dashboard.stripe.com/settings/branding) de tu cuenta.

Por defecto, Checkout se muestra sin márgenes externos. Te recomendamos que utilices un elemento contenedor, como un div, para aplicar el margen que desees (por ejemplo, 16 px en todos los lados).

## Mostrar una página de retorno

Después de que tu cliente intente pagar, Stripe lo redirige a una página de retorno que alojas en tu sitio. Al crear la Checkout Session, especificaste la dirección 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).

Al renderizar tu página de retorno, recupera el estado de la sesión de Checkout utilizando el ID de la sesión de Checkout en la URL. Maneja el resultado según el estado de la sesión de la siguiente manera:

- `complete`: el pago se ha realizado correctamente. Usa la información de la sesión de Checkout para renderizar una página de pago realizado correctamente.
- `open`: el pago ha fallado o se ha cancelado. Vuelve a activar 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 el redireccionamiento

Durante el 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 [los métodos de pago basados en el redireccionamiento y el comportamiento del redireccionamiento](https://docs.stripe.com/payments/checkout/custom-success-page.md?payment-ui=embedded-form#redirect-based-payment-methods).

## 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 Checkout Session. Usa la [herramienta webhook Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir y gestionar estos eventos, que pueden 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 trabajo de un envío.

Escucha estos eventos en lugar de esperar a que el cliente sea redirigido a tu sitio web. No es fiable activar el cumplimiento únicamente desde la página de inicio de Checkout. Configurar tu integración para escuchar eventos asincrónicos te permite aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración.

Encontrarás más detalles en nuestra [guía para completar pedidos con 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 sesión de Checkout.                                               | 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 se efectúa correctamente un pago realizado con un método de pago retrasado, como una deuda directa ACH. | 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 una deuda directa ACH.                    | Avisa al cliente del fallo y haz que vuelva durante la sesión para intentar el pago de nuevo.                                                                                                      |

## Prueba tu integración

Para probar la integración de tu formulario de pago integrado:

1. Crea una sesión de pago integrado e instala el formulario de pago en tu página.
1. Rellena los datos de pago con un método de la tabla siguiente.
   - Introduce cualquier fecha futura como fecha de caducidad.
   - Introduce cualquier número de 3 dígitos como CVC.
   - Introduce cualquier código postal de facturación.
1. Haz clic en **Pagar**. Se te redireccionará 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 el pago se ha realizado 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.

Más información sobre cómo [probar tu integración](https://docs.stripe.com/testing.md).

#### Tarjetas

| Número de tarjeta   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Monederos

| Método de pago | Situación                                                                                                                                                                              | Cómo hacer pruebas                                                                                                                                                                                      |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Completar el pago de prueba** en la página de redireccionamiento. |

#### Redireccionamientos bancarios

| Método de pago                      | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Adeudo directo BECS                 | Tu cliente paga satisfactoriamente con adeudo directo BECS.                                                                                                                                                          | Rellena el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa inicialmente al estado de `processing` y, 3&nbsp;minutos más tarde, a `succeeded`.          |
| Adeudo directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Rellena 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK                                | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena el formulario con el número de cuenta `AT861904300235473202`.                                                                                                            |

#### Vales

| Método de pago | Situación                                  | Cómo hacer pruebas                                                                                                 |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 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 cuadro de 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: Añadir 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 «compra ahora y paga después».

### Apple Pay y Google Pay

Para aceptar pagos con Apple&nbsp;Pay y Google&nbsp;Pay, debes hacer lo siguiente:

- Habilítalos en la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada.
- Presenta tu aplicación a través de HTTPS en desarrollo y producción.
- [Registra tu dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- Presenta tu aplicación a través de HTTPS en desarrollo y producción. Puedes usar un servicio como [ngrok](https://ngrok.com/) para ofrecer tu aplicación para pruebas locales.

Además, una sesión de Checkout solo muestra el botón de Apple&nbsp;Pay a los clientes cuando se cumplen *todas* las condiciones siguientes:

- El dispositivo del cliente funciona con macOS&nbsp;17, iOS&nbsp;17 o con versiones posteriores.
- El cliente está utilizando 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 condiciones siguientes:

- El dispositivo del cliente ejecuta Chrome&nbsp;61 o una versión posterior.
- El cliente tiene una tarjeta válida registrada en Google Pay.

> #### Pruebas regionales
> 
> Stripe Checkout no es compatible con Apple&nbsp;Pay ni Google&nbsp;Pay para cuentas o clientes de Stripe en la India. Si tu dirección IP está en la India, no podrás probar tu integración de Apple&nbsp;Pay o Google&nbsp;Pay, ni siquiera aunque la cuenta de Stripe esté fuera de la India.

## Optional: Crear productos y precios

Antes de crear una sesión de pago, 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 los productos para representar diferentes bienes físicos o niveles de servicio, y los *Precios* para representar el precio de cada producto. Puedes [configurar tu sesión de proceso de compra](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios por los que el cliente paga lo que quiere.

Por ejemplo, puedes crear una camiseta como producto con un precio de 20&nbsp;USD. Esto te permite actualizar y añadir precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o con 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` del producto que ofrezcas.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

A continuación, crea un [Precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrarás por tu producto. Esto incluye el coste del producto y la divisa que se va a utilizar.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 del producto del Dashboard, haz clic en **Copiar a modo activo**, en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las actualizaciones posteriores del producto de prueba no se reflejarán en el producto activo.

Asegúrate de que estás en un entorno de prueba haciendo 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, haz lo siguiente:

- Ve a la sección [Productos](https://dashboard.stripe.com/test/products) en el Dashboard.
- Haz clic en **Añadir producto**.
- Selecciona **Una vez** cuando establezcas el precio.

Checkout muestra el nombre, la descripción y las imágenes del producto que ofrezcas.

Cada precio que crees tiene un ID. Al crear una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en varias divisas, haz que tu Precio esté en *múltiples divisas* (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). El proceso de compra [determina la divisa local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) automáticamente y la presenta si el Precio lo admite.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d ui_mode=embedded_page \
  --data-urlencode "return_url=https://example.com/return"
```

## Optional: Rellenar automáticamente los datos del cliente [Lado del servidor]

Si ya has recopilado el correo electrónico de tu cliente y quieres que se rellene automáticamente en la Checkout Session, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) al crear una Checkout Session.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --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_page \
  --data-urlencode "return_url=https://example.com/return"
```

## Optional: Guarda los datos de los métodos de pago [Lado del servidor]

De forma predeterminada, los métodos de pago que se utilizan para hacer un pago único con Checkout no están disponibles para usarlos en el futuro.

### Guarda métodos de pago para cargarlos fuera de la sesión

Puedes configurar Checkout para guardar 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). Esto es útil si necesitas capturar un método de pago registrado 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 "<<YOUR_SECRET_KEY>>:" \
  -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_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "payment_intent_data[setup_future_usage]=off_session"
```

Si utilizas Checkout en modo `suscripción`, Stripe guarda automáticamente el método de pago para realizar los cobros de los pagos posteriores. Los métodos de pago con tarjeta guardados para los clientes que utilizan el modo `setup_future_usage` o `suscripción` no aparecen en Checkout en caso de nuevas compras (más información al respecto a continuación). Recomendamos utilizar [texto personalizado](https://docs.stripe.com/payments/checkout/custom-components.md#customize-text) para incluir un enlace a cualquier condición relevante relativa al uso de la información de pago guardada.

> Las leyes internacionales de privacidad son complicadas y tienen muchos matices. Te recomendamos que te pongas en contacto 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 el Consejo Europeo 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 automáticamente en Checkout

De forma predeterminada, el proceso de compra utiliza [Link](https://docs.stripe.com/payments/link/checkout-link.md) para ofrecer a tus clientes la opción de guardar y reutilizar de forma segura su información de pago. Si prefieres gestionar los métodos de pago tú mismo, utiliza [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) al crear una sesión de proceso de compra para permitir que tus clientes guarden sus métodos de pago para futuras compras durante el proceso de compra.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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_page \
  --data-urlencode "return_url=https://example.com/return" \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Si se especifica este parámetro en el 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 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: siempre](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay). Checkout utiliza este parámetro para determinar si un método de pago puede completarse automáticamente en futuras compras. Cuando uses `saved_payment_method_options.payment_method_save`, no necesitarás transferir `setup_future_usage` para guardar el método de pago.

Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.

Para usar [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) se requiere un `Customer`. Para guardar un nuevo cliente, establece el valor de la sesión de Checkout [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md) en `always`. De lo contrario, la sesión no guarda 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 guarda los métodos de pago creados en modo `subscription` o que utilizan `setup_future_usage`. Estos métodos de pago tienen un valor `allow_redisplay` de `limited`, lo que evita que se rellenen previamente para devolver 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 cómo cambiar o anular el comportamiento `allow_redisplay`.

> Puedes usar Checkout para guardar tarjetas y otros métodos de pago para cargarlas fuera de la sesión, pero Checkout solo rellena automáticamente las tarjetas guardadas. Descubre cómo [rellenar automáticamente 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 el modo de configuración](https://docs.stripe.com/payments/save-and-reuse.md?platform=checkout).

### Permite que los clientes eliminen los métodos de pago guardados

Para permitir que tus clientes eliminen un método de pago guardado para 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) al crear una sesión de Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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_page \
  --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 programación]

Permite a tus clientes [gestionar](https://docs.stripe.com/customer-management.md) sus propias cuentas compartiendo 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 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 y la captura [Lado del servidor]

Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar los fondos más tarde. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. A continuación, dispones de un tiempo determinado para capturar los fondos, [dependiendo de la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Si no capturas el pago antes de que expire la autorización, el pago se cancela y el emisor libera los fondos retenidos.

Separar la autorización de la captura es útil si necesitas tomar medidas adicionales entre que se confirma que el cliente puede pagar y el cobro de los fondos. Por ejemplo, si vendes artículos de stock limitado y un cliente compra un producto con Checkout, puede que tengas que confirmar si hay stock del artículo antes de capturar el pago y completar la compra. Para conseguirlo, usa el siguiente flujo de trabajo:

1. Confirma que Stripe ha autorizado el método de pago del cliente.
1. Consulta tu sistema de gestión de inventario para confirmar que el artículo sigue disponible.
1. Actualiza tu sistema de gestión de inventario para indicar que un cliente ha comprado el artículo.
1. Captura el pago del cliente.
1. Si la compra se realiza correctamente, informa a tu cliente en tu página de confirmación.

Para indicar que deseas separar la autorización y 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 de la tarjeta del cliente.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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_page \
  --data-urlencode "return_url=https://example.com/return"
```

Para capturar un pago no capturado, puedes utilizar 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). La captura de pagos mediante programación requiere acceso a los PaymentIntent creados durante la sesión de Checkout, que puedes obtener desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Gestión logística de pedidos

Descubre cómo [obtener una notificación mediante programación](https://docs.stripe.com/checkout/fulfillment.md) cada vez que un cliente paga.

## See also

- [Añade descuentos](https://docs.stripe.com/payments/checkout/discounts.md)
- [Recauda impuestos](https://docs.stripe.com/payments/checkout/taxes.md)
- [Recopilar ID fiscales](https://docs.stripe.com/tax/checkout/tax-ids.md)
- [Añade 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)


# API Checkout Sessions

> This is a API Checkout Sessions 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 utilizando [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md). Descubre cómo se [compara esta integración 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 el cálculo de impuestos, descuentos, envíos y conversión de divisas, 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 del proceso de compra que acepta varios métodos de pago.

#### Trabajo de integración
Complexity: 3/5
#### Tipo de integración

Combina componentes de interfaz de usuario en un flujo de pago personalizado

#### Personalización de interfaz de usuario

Personalización a nivel de CSS con la [ API Appearance](https://docs.stripe.com/elements/appearance-api.md)

## Configura el servidor [Lado del servidor]

Antes de comenzar, debes [registrarte](https://dashboard.stripe.com/register) para obtener una cuenta de Stripe.

Utiliza 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 Checkout Session [Lado del servidor]

Añade un punto de conexión en tu servidor para crear una [Checkout Session](https://docs.stripe.com/api/checkout/sessions/create.md) y devolver su [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) a tu interfaz. Una Checkout Session representa la sesión de tu cliente mientras paga compras únicas o suscripciones. Las Checkout Sessions caducan 24 horas después de su creación.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -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}"
```

## Configura el front end [Lado del cliente]

#### HTML + JS

Incluye el script de Stripe.js en tu página del proceso de compra añadiéndolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia tú mismo.

Asegúrate de que estás usando la última versión de Stripe.js. Obtén más información sobre [la versión de Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

> Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como un módulo. Consulta 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 una versión 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(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

#### 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) del 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 de `stripe` en tu front end con tu clave publicable.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Inicializa Checkout [Lado del cliente]

#### HTML + JS

Llama [a initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) y especifica `clientSecret`.

`initCheckoutElementsSdk` devuelve un objeto de [Checkout](https://docs.stripe.com/js/custom_checkout) que contiene datos de Checkout Session y métodos para actualizarlo.

Lee el `total` y las `partidas` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) y muéstralos en tu interfaz de usuario. Esto te permite activar nuevas funciones con cambios mínimos en el código. Por ejemplo, si añades [precios manuales en divisas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md), no tendrás que cambiar la interfaz de usuario si lo haces en `total`.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({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 tu solicitud de acceso con el componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), especificando `clientSecret` y la instancia `Stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} 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 (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Accede al objeto [Checkout](https://docs.stripe.com/js/custom_checkout) de tu componente de proceso de compra usando el hook `useCheckout()`. El objeto `Checkout` contiene datos de la sesión del proceso de compra y métodos para actualizarlo.

Lee el `total` y las `partidas` del objeto `Proceso de compra` y muéstralos en tu interfaz de usuario. Esto te permite habilitar funciones con cambios mínimos de código. Por ejemplo, añadir [precios manuales en divisas](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) no requiere cambios en la interfaz de usuario 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 (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Recopila el correo electrónico del cliente [Lado del cliente]

#### HTML + JS

Debes proporcionar una dirección de correo electrónico válida al completar una sesión del proceso de compra.

Estas instrucciones crean una entrada de correo electrónico y utilizan [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) desde el objeto `Checkout`.

Como alternativa, puedes:

- Pass in [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (for customers represented as customer-configured `Account` objects), or [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (for customers represented as `Customer` objects) when creating the Checkout Session. Stripe validates emails provided this way.
- Especificar un correo electrónico que ya hayas validado en [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({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 una dirección de correo electrónico válida al completar una sesión del proceso de compra.

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

Como alternativa, puedes:

- Pass in [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (for customers represented as customer-configured `Account` objects), or [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (for customers represented as `Customer` objects) when creating the Checkout Session. Stripe validates emails provided this way.
- Especificar 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 (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  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 (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

## Recopilar los datos de pago [Lado del cliente]

Recolecta los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recolección de datos de pago para varios métodos de pago.

El Payment Element contiene un iframe que envía la información de pago de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago.

Si decides utilizar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [permitir](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

Primero, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). A continuación, crea una instancia del `Payment Element` mediante [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
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Consulta [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles.

Puedes [personalizar la apariencia](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los Elements especificando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) al inicializar el proceso de compra en el front end.

#### React

Monta el componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) dentro del [CheckoutElementsProvider](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 (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Consulta [Stripe.js docs](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) para ver las opciones compatibles.

Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los elementos especificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) en el [CheckoutElementsProvider](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 [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde la instancia de `Checkout` para enviar el pago.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({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

Presenta un botón **Pagar** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde [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 (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Prueba tu integración

1. Dirígete a tu página del proceso de compra.
1. Rellena los datos de pago con un método de pago de la siguiente tabla. Para pagos con tarjeta:
   - Introduce cualquier fecha futura como fecha de caducidad.
   - Introduce cualquier número de 3 dígitos como CVC.
   - Introduce cualquier 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 de transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se ha efectuado 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](https://docs.stripe.com/checkout/fulfillment.md).

#### Tarjetas

| Número de tarjeta   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Monederos

| Método de pago | Situación                                                                                                                                                                              | Cómo hacer pruebas                                                                                                                                                                                      |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Completar el pago de prueba** en la página de redireccionamiento. |

#### Redireccionamientos bancarios

| Método de pago                      | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Adeudo directo BECS                 | Tu cliente paga satisfactoriamente con adeudo directo BECS.                                                                                                                                                          | Rellena el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa inicialmente al estado de `processing` y, 3&nbsp;minutos más tarde, a `succeeded`.          |
| Adeudo directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Rellena 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK                                | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena el formulario con el número de cuenta `AT861904300235473202`.                                                                                                            |

#### Vales

| Método de pago | Situación                                  | Cómo hacer pruebas                                                                                                 |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 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 cuadro de 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 pago, 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 los productos para representar diferentes bienes físicos o niveles de servicio, y los *Precios* para representar el precio de cada producto. Puedes [configurar tu sesión de proceso de compra](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) para aceptar propinas y donaciones, o vender productos y servicios por los que el cliente paga lo que quiere.

Por ejemplo, puedes crear una camiseta como producto con un precio de 20&nbsp;USD. Esto te permite actualizar y añadir precios sin necesidad de cambiar los detalles de tus productos subyacentes. Puedes crear productos y precios con el Dashboard de Stripe o con 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` del producto que ofrezcas.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

A continuación, crea un [Precio](https://docs.stripe.com/api/prices.md) para definir cuánto cobrarás por tu producto. Esto incluye el coste del producto y la divisa que se va a utilizar.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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 del producto del Dashboard, haz clic en **Copiar a modo activo**, en la esquina superior derecha. Solo puedes hacerlo una vez por cada producto creado en un entorno de prueba. Las actualizaciones posteriores del producto de prueba no se reflejarán en el producto activo.

Asegúrate de que estás en un entorno de prueba haciendo 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, haz lo siguiente:

- Ve a la sección [Productos](https://dashboard.stripe.com/test/products) en el Dashboard.
- Haz clic en **Añadir producto**.
- Selecciona **Una vez** cuando establezcas el precio.

Checkout muestra el nombre, la descripción y las imágenes del producto que ofrezcas.

Cada precio que crees tiene un ID. Al crear una Checkout Session, haz referencia al ID del precio y a la cantidad. Si vendes en varias divisas, haz que tu Precio esté en *múltiples divisas* (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). El proceso de compra [determina la divisa local del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) automáticamente y la presenta si el Precio lo admite.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -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: Rellenar automáticamente los datos del cliente [Lado del servidor]

Si ya has recopilado el correo electrónico de tu cliente y quieres que se rellene automáticamente en la Checkout Session, especifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) al crear una Checkout Session.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d ui_mode=elements \
  -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: Guarda los datos de los métodos de pago

Aprende a [aceptar un pago y guardar los datos de pago del cliente](https://docs.stripe.com/payments/save-during-payment.md) para futuras compras.

## Optional: Escuchar los cambios en la sesión de Checkout

### Escuchar los cambios en la sesión de Checkout

Puedes escuchar los cambios en la [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) añadiendo 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.initCheckoutElementsSdk({
  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: Recolecta las direcciones de facturación y de envío

## Recolecta direcciones de facturación

De forma predeterminada, una sesión de Checkout recolecta la cantidad mínima de datos de facturación necesarios para el pago a través del Payment Element.

### Cómo usar el Billing Address Element

Puedes recolectar direcciones de facturación completas utilizando el Billing Address Element.

En primer lugar, especifica [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) cuando crees la sesión de Checkout.

#### HTML + JS

Crea un elemento DOM contenedor para montar el Billing Address Element. A continuación, crea una instancia del Billing Address Element mediante [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_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
<div id="billing-address"></div>
```

```javascript
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');
```

El Billing Address Element acepta las siguientes opciones:

- [contacts](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [display](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

#### React

Monta el componente `BillingAddressElement` dentro del `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {BillingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <BillingAddressElement/>
    </form>
  )
};
```

El Billing Address Element acepta las siguientes propiedades:

- [contacts](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [display](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

### Usa un formulario personalizado

Puedes crear tu propio formulario para recolectar direcciones de facturación.

- Si tu página de Checkout tiene un paso de cobro 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» especificando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) en [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

### Recolecta direcciones de facturación parciales

Para recolectar direcciones de facturación parciales, como el país y el código postal solamente, especifica [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection).

Al recolectar direcciones de facturación parciales, debes [recolectar las direcciones manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). De forma predeterminada, el Payment Element recolecta automáticamente los datos de facturación mínimos necesarios para el pago. Para evitar la doble recolecció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) al crear el Payment Element. Si solo tienes la intención de recolectar un subconjunto de los datos de facturación (como el nombre del cliente), especifica `never` solo en los campos que tengas la intención de recolectar tú mismo.

## Recolecta las direcciones de envío

Para recolectar 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) al crear la sesión de Checkout.

Cuando recolectas una dirección de envío, también debes especificar a qué países se permitirá el envío. 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 Shipping Address Element

Puedes recolectar las direcciones de envío completas con el Shipping Address Element.

#### HTML + JS

Crea un elemento DOM contenedor para montar el Shipping Address Element. A continuación, crea una instancia del Shipping Address Element 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
<div id="shipping-address"></div>
```

```javascript
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
```

El Shipping Address Element acepta las siguientes opciones:

- [contacts](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [display](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

#### React

Monta el componente `ShippingAddressElement` dentro del `CheckoutElementsProvider`.

```jsx
import React from 'react';
import {ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  return (
    <form>
      <ShippingAddressElement/>
    </form>
  )
};
```

El Shipping Address Element acepta las siguientes propiedades:

- [contacts](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [display](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

### Escuchar los cambios en la sesión de Checkout

Puedes escuchar los cambios en la [Checkout Session](https://docs.stripe.com/api/checkout/sessions.md) añadiendo un oyente de eventos para gestionar 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
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({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 [Checkout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) para renderizar el coste de envío en tu formulario del checkout.

```jsx
import React from 'react';
import {useCheckout, ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <div>
      <div>
        <form>
          <ShippingAddressElement />
        </form>
      </div>
      <div>
        <h2>Checkout Summary</h2>
        {checkoutState.type === 'success' && (
          <>
            <pre>
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
            </pre>
            <h3>Totals</h3>
            <pre>
              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
            </pre>
          </>
        )}
      </div>
    </div>
  )
};
```

### Sincroniza direcciones de facturación y envío

Cuando utilices 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

Especifica la opción [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) en `elementsOptions` al iniciar el proceso de compra para configurar qué elemento de dirección muestra la casilla de verificación.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});
```

#### React

Especifica 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 `CheckoutElementsProvider` para configurar qué Address Element muestra la casilla de verificación.

```jsx
<CheckoutElementsProvider
  stripe={stripePromise}
  options={{
    fetchClientSecret: () => promise,
    elementsOptions: {
      syncAddressCheckbox: 'shipping',
    },
  }}
>
  <CheckoutForm />
</CheckoutElementsProvider>
```

Establece el valor en `'facturación'` o `'shipping'` para elegir qué Address Element muestra la casilla de verificación. Establecelo en `'none'` para ocultar la casilla o déjalo en blanco para usar el valor predeterminado (`'facturación'`).

### Usar un formulario personalizado

Puedes crear tu propio formulario para recolectar direcciones de envío.

- Si tu página de Checkout tiene un paso de cobro 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 tu cliente haga clic en el botón «Pagar» especificando [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) en [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

## Optional: Separar la autorización y la captura [Lado del servidor]

Stripe admite pagos con tarjeta en dos pasos, de modo que primero puedes autorizar una tarjeta y luego capturar los fondos más tarde. Cuando Stripe autoriza un pago, el emisor de la tarjeta garantiza los fondos y retiene el importe del pago en la tarjeta del cliente. A continuación, dispones de un tiempo determinado para capturar los fondos, [dependiendo de la tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Si no capturas el pago antes de que expire la autorización, el pago se cancela y el emisor libera los fondos retenidos.

Separar la autorización de la captura es útil si necesitas tomar medidas adicionales entre que se confirma que el cliente puede pagar y el cobro de los fondos. Por ejemplo, si vendes artículos de stock limitado y un cliente compra un producto con Checkout, puede que tengas que confirmar si hay stock del artículo antes de capturar el pago y completar la compra. Para conseguirlo, usa el siguiente flujo de trabajo:

1. Confirma que Stripe ha autorizado el método de pago del cliente.
1. Consulta tu sistema de gestión de inventario para confirmar que el artículo sigue disponible.
1. Actualiza tu sistema de gestión de inventario para indicar que un cliente ha comprado el artículo.
1. Captura el pago del cliente.
1. Si la compra se realiza correctamente, informa a tu cliente en tu página de confirmación.

Para indicar que deseas separar la autorización y 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 de la tarjeta del cliente.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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=elements
```

Para capturar un pago no capturado, puedes utilizar 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). La captura de pagos mediante programación requiere acceso a los PaymentIntent creados durante la sesión de Checkout, que puedes obtener desde el objeto [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Gestión de cuentas de clientes [Sin programación]

Permite a tus clientes [gestionar](https://docs.stripe.com/customer-management.md) sus propias cuentas compartiendo 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 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 de pedidos

Descubre cómo [obtener una notificación mediante programación](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) cuando un cliente paga.

## See also

- [Añade descuentos para pagos puntuales](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 ajustables de partidas individuales](https://docs.stripe.com/payments/checkout/adjustable-quantity.md?payment-ui=embedded-components)
- [Añade 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 utilizando [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Descubre cómo se [compara esta integración 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 inferior que puedes utilizar para crear tu propio flujo de pago o proceso de compra, pero requiere mucho más código y un mantenimiento continuo. 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 Payment Intents. Obtén más información sobre [cuándo utilizar 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 del proceso de compra que acepta varios métodos de pago.

#### Esfuerzo de integración
Complexity: 4/5
#### Tipo de integración

Combinar componentes de la interfaz de usuario en un flujo de pago personalizado

#### Personalización de la interfaz de usuario

Personalización a nivel de CSS con la [ API Appearance](https://docs.stripe.com/elements/appearance-api.md)

> #### ¿Te interesa utilizar Stripe Tax, los descuentos, los envíos o la conversión de divisas?
> 
> Stripe tiene una integración con Payment Element que gestiona los impuestos, los descuentos, los envíos y la conversión de divisas. Consulta la [página Crear un 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 sin crear primero un PaymentIntent, consulta [Recopilar 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 hace el seguimiento de los intentos de cobro y de los cambios en el estado a lo largo del proceso de pago.
Un resumen detallado de la integración de pagos que se describe en este documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Crea el PaymentIntent

Crea un PaymentIntent en tu servidor con un [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) y una [divisa](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 sus funciones de forma predeterminada. Puedes gestionar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago.

Stripe utiliza la [configuración de tus métodos de pago](https://dashboard.stripe.com/settings/payment_methods) para mostrar los métodos de pago que has habilitado. Para ver cómo se muestran tus métodos de pago a los clientes, introduce un ID de transacción o establece un importe y una divisa para el pedido en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Para anular los métodos de pago, enumera manualmente los que quieras habilitar utilizando 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 "<<YOUR_SECRET_KEY>>:" \
  -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. De esta forma, se evita que los clientes malintencionados puedan elegir sus propios precios.

### Recupera el secreto del 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 utiliza 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 en tu servidor, utilizando la función `fetch` del navegador. Este enfoque es mejor si tu lado del cliente es una aplicación de una sola página, en particular una construida con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se utiliza para el secreto de cliente:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Y luego busca el secreto del 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

Envía el secreto del cliente al cliente desde tu servidor. Este enfoque funciona mejor si tu aplicación genera contenido estático en el servidor antes de enviarlo al navegador.

Añade el [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) en tu formulario de proceso de compra. En el código del lado del servidor, recupera el secreto de cliente de PaymentIntent:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the PaymentIntent
  erb :checkout
end
```

## Recopilar datos de pago [Lado del cliente]

Recolecta los datos de pago del cliente con el [Payment Element](https://docs.stripe.com/payments/payment-element.md). El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recolección de datos de pago para varios métodos de pago.

El Payment Element contiene un iframe que envía la información de pago de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago.

Si decides utilizar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [permitir](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 función de Stripe.js. Incluye el script de Stripe.js en tu página del proceso de compra añadiéndolo al `head` de tu archivo HTML. Carga siempre 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
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Crea una instancia de Stripe con el siguiente 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('<<YOUR_PUBLISHABLE_KEY>>');
```

### Añade 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
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Cuando se cargue el formulario anterior, crea una instancia del 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 de [Elements](https://docs.stripe.com/js/elements_object/create):

Administra 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 npm:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Añade y configura el proveedor Elements en tu página de pago

Para utilizar el componente de Payment Element, ajusta el componente de la página del proceso de compra en un [proveedor de Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica la `Promise` devuelta en el proveedor `Elements`. Transmite también el [secreto del cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso previo 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('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Añade el componente Payment Element

Utiliza el componente `PaymentElement` para crear tu formulario:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Stripe Elements es una colección de componentes de interfaz de usuario desplegables. Para personalizar aún más tu formulario o recolectar otros datos del cliente, consulta la [documentación de Elements](https://docs.stripe.com/payments/elements.md).

El Payment Element presenta un formulario dinámico que le permite a tu cliente elegir un método de pago. Para cada método de pago, el formulario solicita automáticamente que el cliente complete todos los datos de pago necesarios.

### Personalizar la apariencia

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

De forma predeterminada, el Payment Element solo recopila los datos necesarios de la dirección de facturación. Algunas acciones, como [calcular impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o introducir datos de envío, requieren la dirección completa de tu cliente. Puedes:

- Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funciones de autocompletado y localización y recopilar la dirección completa del cliente, lo que te ayudará a calcular los impuestos con la mayor precisión.
- Recopila datos de la dirección con tu propio formulario personalizado.

### Solicitar token de comerciante de Apple Pay

Si has configurado 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 de Apple Pay para devolver un token de comercio y habilitar las transacciones iniciadas por el comerciante (MIT). [Solicita el tipo de token de comercio correspondiente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) en el Pago 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 su 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 al Payment Element lo siguiente:

- Solicite a los compradores su consentimiento para guardar un método de pago
- Guardar métodos de pago cuando los compradores brindan su consentimiento
- Mostrar los métodos de pago guardados a los compradores para compras futuras
- [Actualiza automáticamente tarjetas perdidas o caducadas](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) cuando los compradores las reemplacen
![El Payment Element y la casilla de verificación del método de pago guardado](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

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

### Permite que se guarde el método de pago en el Payment Element

Al crear una [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) en tu servidor, crea también una [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) proporcionando el [ID de 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 las [funciones](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) guardadas que 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 guardar sus datos de pago para usarlos en el futuro.

Puedes especificar `setup_future_usage` en un PaymentIntent o en una sesión de Checkout para anular el comportamiento predeterminado al guardar los métodos de pago. Esto garantiza que guardes automáticamente el método de pago para usarlo en el futuro, incluso si el cliente no elige explícitamente guardarlo.

> Si tienes la intención de especificar `setup_future_consumo`, evita establecer `pago_method_save_consumo` en la misma transacción porque esto provoca un error de integración.

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<<YOUR_SECRET_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 los errores](https://docs.stripe.com/error-handling.md) correctamente cuando crees 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 y para CustomerSession. A continuación, 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');
```

> Permitir que los compradores eliminen sus métodos de pago guardados habilitando [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, el [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) se separa de ese [cliente](https://docs.stripe.com/api/customers.md).

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, en función de si el cliente ha marcado la casilla para guardar sus datos de pago.

### Exigir la recolección del CVC

Otra opción es especificar `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 garantizar que se recoja el CVC cuando un cliente paga con tarjeta.

### Detectar la elección de un método de pago guardado

Para controlar el contenido dinámico cuando se elige un método de pago guardado, escucha el evento `change` del Payment Element, que se rellena con el método de pago elegido.

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## Optional: Enlace en la página del proceso de compra [Lado del cliente]

Permite que tu cliente finalice la compra más rápido utilizando [Link ](https://docs.stripe.com/payments/link.md)en el [Payment Element](https://docs.stripe.com/payments/payment-element.md). Puedes autocompletar la información de cualquier cliente que haya iniciado sesión en Link, independientemente de si guardó su información inicialmente en Link con otro negocio. La integración predeterminada del Payment Element incluye un aviso de Link en el formulario de tarjeta. Para gestionar Link en el Payment Element, ve a la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods).
![Autenticarse o registrarse con Link directamente en Payment Element durante el proceso de pago](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Cobrar una dirección de correo electrónico del cliente para la autenticación o registro de Link

### Opciones de integración

Hay dos formas de integrar Link con el Payment Element. De ellas, 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 del proceso de compra al decidir entre estas opciones:

| Opción de integración                                                                                 | Flujo del proceso de compra                                                                                                                                                                                                              | Descripción                                                                                                                                                                                                                                              |
| ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Especifica una dirección de correo correo electrónico del cliente en el Payment Element (Recommended) | - Tu cliente ingresa su dirección de correo electrónico antes de llegar a la página del proceso de compra (en un paso de creación de cuenta anterior, por ejemplo).
  - Prefieres usar tu propio campo de entrada de correo electrónico. | Pasa programáticamente la dirección de correo electrónico del cliente al Payment Element. En este caso, el cliente se autentica en Link directamente en el formulario de pago en lugar de hacerlo en un componente de interfaz de usuario independiente. |
| Recopila una dirección de correo electrónico del cliente en el Payment Element                        | - Tus clientes pueden elegir introducir su correo electrónico y autenticarse o registrarse con Link directamente en Payment Element durante el proceso de compra.
  - No es necesario realizar cambios en la programación.               | Si un cliente no se ha registrado en Link y elige un método de pago compatible en el Payment Element, se le pedirá que guarde sus datos utilizando Link. Para aquellos que ya se han registrado, Link completa automáticamente su información de pago.   |

Utiliza [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para especificar la dirección de correo electrónico del cliente en el Payment Element.

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

Para más información, consulta cómo [crear una página de pago personalizada que incluya Link.](https://docs.stripe.com/payments/link/add-link-elements-integration.md)

## Optional: Recuperar actualizaciones del servidor [Lado del cliente]

Es posible que desees actualizar algunos atributos del PaymentIntent después de que se procese 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 costes de envío). Puedes [actualizar el PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) en tu servidor y, a continuación, llamar a [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) para ver el nuevo importe reflejado en el Payment Element. En este ejemplo se 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 en el 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 efectivizar el pago con los datos de 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 efectivizar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle al `return_url`. Los pagos con tarjeta redireccionan inmediatamente al `return_url` cuando el pago se ha hecho efectivo.

Si no quieres redireccionar los pagos con tarjeta después de completar el pago, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) como `if_required`. Esto solo redirecciona 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 de tu formulario de pago, utiliza 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 utilizar [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 (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
};

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 llevan a cabo el seguimiento de la sesión de navegador del cliente, es posible que tengas que añadir el dominio `stripe.com` a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones, que te impiden hacer el 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 el `return_url`, que se mantendrá durante el proceso de redireccionamiento.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// 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;
```

## Administrar 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 efectiviza el pago. Usa la [herramienta webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. 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 el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento `payment_intent.succeeded` o `payment_intent.payment_failed`. | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Se envía cuando el cliente intenta realizar un pago, pero este 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.
   - Introduce cualquier fecha futura como fecha de caducidad.
   - Introduce cualquier número de 3 dígitos como CVC.
   - Introduce cualquier código postal de facturación.
1. Envía el pago a Stripe. Se 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 ha efectuado 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.

Más información sobre [probar la integración](https://docs.stripe.com/testing.md).

#### Tarjetas

| Número de tarjeta   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Monederos

| Método de pago | Situación                                                                                                                                                                              | Cómo hacer pruebas                                                                                                                                                                                      |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Elige el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Completar el pago de prueba** en la página de redireccionamiento. |

#### Redireccionamientos bancarios

| Método de pago                      | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Adeudo directo BECS                 | Tu cliente paga satisfactoriamente con adeudo directo BECS.                                                                                                                                                          | Rellena el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa inicialmente al estado de `processing` y, 3&nbsp;minutos más tarde, a `succeeded`.          |
| Adeudo directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Rellena 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK                                | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena el formulario con el número de cuenta `AT861904300235473202`.                                                                                                            |

#### Vales

| Método de pago | Situación                                  | Cómo hacer pruebas                                                                                                 |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| 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 cuadro de 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: Añadir 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). Según este ejemplo, te sugerimos especificar la información de envío del cliente después de que el cliente [elija 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 (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default CheckoutForm;
```

#### Prueba Affirm

Aprende a probar diferentes escenarios usando la siguiente tabla:

| Escenario                                                                  | Cómo hacer la prueba                                                                                     |
| -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Tu cliente efectúa correctamente un pago con Affirm.                       | Rellena el formulario (asegúrate de incluir la dirección de envío) y autentica el pago.                  |
| Tu cliente no se autentifica 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, debes 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 el uso de [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 la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago. 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 sus funciones 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 "<<YOUR_SECRET_KEY>>:" \
  -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"
```

#### Prueba Afterpay (Clearpay)

Aprende a probar diferentes escenarios usando la siguiente tabla:

| Escenario                                                                    | Cómo hacer la prueba                                                                                     |
| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Tu cliente ha efectuado correctamente un pago con Afterpay.                  | Rellena el formulario (asegúrate de incluir la dirección de envío) y autentica el pago.                  |
| Tu cliente no se autentifica 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 a los clientes cuyo entorno cumple con las [condiciones de visualización de los monederos](https://docs.stripe.com/testing/wallets.md). Para aceptar pagos desde estos monederos, también debes:

- Habilítalos en la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada.
- Presenta tu aplicación a través de HTTPS en desarrollo y 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 modal de pago del monedero.

> #### Pruebas regionales
> 
> Stripe Elements no es compatible con Google Pay ni 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 del probador está en la India, incluso si la cuenta de Stripe se encuentra fuera de la India.

Más información sobre el uso de [Apple Pay](https://docs.stripe.com/apple-pay.md) y [Google Pay](https://docs.stripe.com/google-pay.md) con Stripe.

### Adeudo directo ACH

Al usar el Payment Element con el método de pago de adeudo directo ACH, 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 "<<YOUR_SECRET_KEY>>:"
   ```

1. Especifica el ID del cliente cuando crees el `PaymentIntent`.

   #### Accounts v2

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
     -d "payment_method_types[]=us_bank_account"
   ```

   #### Customers v1

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -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 adeudo directo de ACH con Payment Element, solo podrás seleccionar `automatic` o `instant`.

Más información sobre el uso del [adeudo directo ACH](https://docs.stripe.com/payments/ach-direct-debit.md) con Stripe.

#### Probar el adeudo 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 clic en la entidad de prueba. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Haz clic en el botón de pago.                                                                                                                                                                      |
| Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU usando microdepósitos.                 | Selecciona **Cuenta bancaria de EE. UU.** y completa el formulario. Haz clic en **Introducir datos bancarios manualmente**. Sigue las instrucciones del cuadro de diálogo para enlazar tu cuenta bancaria. Puedes usar estos [números de cuenta](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Haz clic en el botón de pago. |
| Tu cliente no completa el proceso de vinculación de cuenta bancaria.                                              | Selecciona **Cuenta bancaria de EE. UU.** y haz clic en la entidad de prueba o en **Introducir datos bancarios manualmente**. Cierra el cuadro de diálogo sin completarlo.                                                                                                                                                                                                               |

### BLIK

Al utilizar el Payment Element con BLIK, el usuario puede cerrar el cuadro de diálogo en el que se le pide 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 del proceso 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 cerró el cuadro de diálogo sin autorización), gestionando cada caso según sea necesario.

### Métodos de pago con código QR

Cuando se usa el Payment Element con un método de pago basado en códigos QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), el usuario puede cerrar el código de diálogo del código QR. De este modo, se activa un redireccionamiento a tu `return_url` y el usuario no vuelve a la página del proceso de compra.

Para gestionar el momento en el que los usuarios cierran las modales de los códigos QR, en el controlador del lado del servidor de tu `return_url`, inspecciona el `status` del PaymentIntent para verificar si ya ha pasado a `succeeded` o todavía está en estado `requires_action` (es decir, que el usuario ha cerrado la modal sin haber pagado). Gestiona cada caso según sea necesario.

Como alternativa, evita el redireccionamiento automático a tu `return_url` si estableces el parámetro avanzado opcional [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), que evita redirigir al cliente cuando este cierra la modal del código QR.

### Cash App Pay

El Payment Element presenta un formulario dinámico de forma 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 la aplicación de la web móvil

Cash App Pay es un método de pago basado en redireccionamiento en la web móvil. Redirige a tu cliente a Cash App en modo activo o a una página de pago de prueba en entorno de prueba. Una vez que se efectiviza el pago, se lo redirigirá a la `return_url`, independientemente de si estableces `redirect=if_required` o no.

#### Elemento de la aplicación de la web de escritorio

Cash App Pay es un método de pago con código QR en la web de escritorio, donde el Payment Element presenta un cuadro de diálogo modal del código QR. Tu cliente debe 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, redirige al cliente a la `return_url` tan pronto como se le redirige a Cash App. En el entorno 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 modal del código QR antes de efectivizar el pago, lo que desencadena un redireccionamiento a tu `return_url`.

Asegúrate de que la `return_url` corresponde a una página en 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 modal sin escanear el código QR).

Como alternativa, evita el redireccionamiento automático a tu `return_url` pasando el parámetro avanzado opcional `redirect=if_required`, que evita el redireccionamiento cuando se cierra un cuadro de diálogo modal del código QR.

### PayPal

Para usar PayPal, asegúrate de que tienes un [dominio registrado](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Comunica a tus clientes qué es Stripe

Stripe recoge información sobre las interacciones de los clientes con Elements para brindarte servicios, prevenir el fraude y mejorar sus servicios. Entre los datos recogidos, se incluyen el uso de cookies y direcciones IP para identificar qué Elements ha visto un cliente durante una sola sesión del proceso de compra. Tú eres responsable de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos de estas maneras. Para 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)
- [Configura futuros pagos](https://docs.stripe.com/payments/save-and-reuse.md)
- [Guarda datos de pago durante el pago](https://docs.stripe.com/payments/save-during-payment.md)
- [Calcula el impuesto sobre las ventas, el impuesto sobre bienes y servicios (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)

Utiliza la clase [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html) para integrar la interfaz de usuario de pago prediseñada de Stripe al proceso de compra de tu aplicación de iOS. 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. [Regístrate ahora](https://dashboard.stripe.com/register).

### Lado del servidor

Esta integración necesita puntos de conexión de tu servidor que se comuniquen con la API de Stripe. Usa nuestras 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.

#### Administrador de paquetes Swift

Para instalar el SDK, sigue estos pasos:

1. En Xcode, elige **Archivo** > **Añadir dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como la 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. Añade 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), ejecuta el siguiente comando para crear uno:
   ```bash
   pod init
   ```
1. Añade 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. Añade 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
   ```

#### Plataforma 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 [here](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 información sobre la versión más reciente y sobre versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publica una nueva versión, [consulta las versiones](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) del repositorio.

## Habilitar los 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 relevantes para tu empresa y tus clientes. Consulta [Compatibilidad con 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 y nuestra [página de tarifas](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones.

## Añadir un punto de conexión [Lado del servidor]

> #### Nota
> 
> Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recolectar datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.

Esta integración usa tres objetos de la API de Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe usa este dato para representar tu intención de cobrarle a un cliente y hacer el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.

1. (Opcional) [Customer](https://docs.stripe.com/api/customers.md): para configurar un método de pago para pagos futuros, debes vincularlo a un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear el objeto Customer antes del pago y asociarlo más tarde con tu propia representación interna de la cuenta del cliente.

1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): la información que contiene el objeto Customer es confidencial y no puede recuperarse directamente desde una aplicación. Una CustomerSession concede al SDK acceso temporal con ámbito al Customer y ofrece más opciones de configuración. Consulta la lista completa de las [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Si nunca guardas tarjetas en un objeto Customer y no permites que los clientes que vuelven reutilicen las 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, añade un punto de conexión en tu servidor que:

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 [divisa](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` del CustomerSession, el [id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del Customer 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 automáticamente los métodos de pago de la configuración de tu Dashboard o puedes enumerarlos de forma manual. Independientemente de la opción que elijas, debes saber que la divisa 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 no acepta 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 divisa, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la divisa y la ubicación del cliente.

#### Gestiona 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 gestiona la devolución de métodos de pago que cumplen los requisitos según factores como el importe de la transacción, la divisa 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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 aceptar la divisa especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que acepta cada método de pago. Consulta la página de [Opciones de integración de los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre lo que se acepta.

## Recopilar datos de pago [Lado del cliente]

Para mostrar el Mobile Payment Element en la pantalla del proceso de compra, asegúrate de lo siguiente:

- 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 recolectar la información de envío necesaria del cliente
- Añade un botón de finalización de compra para mostrar la interfaz de usuario de Stripe

#### UIKit

En la pantalla proceso de compra de tu aplicación, obtén el secreto de cliente Intent, el secreto de cliente CustomerSession, el ID de 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 inicializar 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 toque el botón **Checkout**, llama a `present` para presentar la PaymentSheet. Después de que el cliente efectiviza el pago, Stripe cierra 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 de `ObservableObject` para tu pantalla del proceso de compra. Este modelo publica un [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 Intent, el secreto de cliente CustomerSession, el ID de cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Utiliza `STPAPIClient.shared` para establecer tu clave publicable e inicializar 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() }
  }
}
```

Añade 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 añadiendo una `View`. Al pulsar el botón, se muestra la PaymentSheet. Después de efectivizar 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`, comunícaselo al usuario (por ejemplo, mostrándole una pantalla de confirmación del pedido).

Establecer `allowsDelayedPaymentMethods` en true permite utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

## Configurar una URL de retorno [Lado del cliente]

Es posible que el cliente salga de tu aplicación para autenticarse (por ejemplo, en Safari o en su aplicación bancaria). Para permitirles volver automáticamente a tu aplicación después de la autenticación, [configura un esquema de URL personalizado](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) y configura 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<UIOpenURLContext>) {
    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, establece la [returnURL](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV9returnURLSSSgvp) en tu 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"
```

## Administrar 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 efectiviza el pago. Usa la [herramienta webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. 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 el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento `payment_intent.succeeded` o `payment_intent.payment_failed`. | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Se envía cuando el cliente intenta realizar un pago, pero este 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   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Redireccionamientos bancarios

| Método de pago    | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank       | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK              | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena 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: Habilita Link

Activa Link en tu [configuración de método 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 mediante el botón de proceso de compra rápida con 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 previamente la mayor cantidad de información posible para optimizar el proceso de compra.

Para completar previamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona a `defaultBillingDetails` 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 la pantalla de tu proceso 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.

### Regístrate para obtener un ID de comerciante de Apple

Obtén un ID de comerciante Apple [registrándote para obtener un nuevo identificador](https://developer.apple.com/account/resources/identifiers/add/merchant) en el sitio web de Apple para desarrolladores.

Rellena el formulario incluyendo una descripción y el identificador. La descripción es solo para ti y podrás modificarla después. Stripe te recomienda que uses como identificador el nombre de tu aplicación (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 **Añadir aplicación nueva** y sigue las indicaciones.

Descarga un archivo de petición 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 un certificado de manera exacta. 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 un CSR y un certificado nuevos.

### Integrar con Xcode

Añade la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña **Firma y funcionalidades** y añade la funcionalidad **Apple Pay**. Aquí, es posible que se te pida que inicies 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)

Habilita la funcionalidad Apple Pay en Xcode

### Añadir Apple Pay

#### Pago único

Para añadir Apple Pay a PaymentSheet, establece [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) después de iniciar `PaymentSheet.Configuration` con tu ID de comerciante de 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 añadir Apple Pay a PaymentSheet, establece [applePay](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:6Stripe12PaymentSheetC13ConfigurationV8applePayAC05ApplefD0VSgvp) después de iniciar `PaymentSheet.Configuration` con tu ID de comerciante de Apple y el [código de país de tu empresa](https://dashboard.stripe.com/settings/account).

De acuerdo con [las directrices de Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) para pagos recurrentes, también debes establecer más atributos en `PKPaymentRequest`. Añade 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 el importe que quieres cobrar (por ejemplo, 9,95&nbsp;USD 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 [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 añadir información de [seguimiento de pedidos](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) en iOS&nbsp;16 o versiones posteriores, configura un [authorizationResultHandler](https://stripe.dev/stripe-ios/stripepaymentsheet/documentation/stripepaymentsheet/paymentsheet/applepayconfiguration/handlers/authorizationresulthandler) en tu `PaymentSheet.ApplePayConfiguration.Handlers`. Stripe llama a tu implementación después de que se haya efectivizado el pago, pero antes de que iOS descarte la hoja de Apple Pay.

En la implementación de `authorizationResultHandler`, obtén los detalles del pedido del servidor para el pedido completado. Añade los datos al [PKPaymentAuthorizationResult](https://developer.apple.com/documentation/passkit/pkpaymentauthorizationresult) y devuelve el resultado modificado.

Para obtener más información sobre el seguimiento de pedidos, consulta [Documentación de Apple sobre los pedidos por monedero](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

Para habilitar la compatibilidad con el escaneo de tarjetas en iOS, establece la `NSCameraUsageDescription` (**Privacidad - Descripción del uso de la cámara**) en la `Info.plist` de tu aplicación, y proporciona un motivo para acceder a la cámara (por ejemplo, “Escanear tarjetas”).

## Optional: Habilitar pagos ACH

Para habilitar los pagos con adeudo ACH, debes incluir `StripeFinancialConnections` como dependencia a 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.

#### Administrador de paquetes Swift

Para instalar el SDK, sigue estos pasos:

1. En Xcode, elige **Archivo** > **Añadir dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como la 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. Añade 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), ejecuta el siguiente comando para crear uno:
   ```bash
   pod init
   ```
1. Añade 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. Añade 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
   ```

#### Plataforma 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 [here](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 información sobre la versión más reciente y sobre versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-ios/releases) en GitHub. Para recibir notificaciones cuando se publica una nueva versión, [consulta 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 quieras personalizar se configura mediante el objeto [PaymentSheet.Configuration](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html).

### Aspecto

Personaliza los colores, las fuentes, etc. para que coincidan con el aspecto de tu aplicación mediante la [API de apariencia](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 automáticamente.
![](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 direcciones de usuarios

Recolecta 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 con el que aparecerá el comerciante

Configura [merchantDisplayName](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet/Configuration.html#/s:18StripePaymentSheet0bC0C13ConfigurationV19merchantDisplayNameSSvp) para especificar el nombre de empresa que quieres que vea el cliente. De forma 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 acepta el modo oscuro, puedes establecer 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
```

## Optional: Gestiona el cierre de sesión de usuarios

`PaymentSheet` almacena cierta información localmente para recordar si un usuario ha utilizado Link dentro de una aplicación. Para borrar el estado interno de `PaymentSheet`, llama al método `PaymentSheet.resetCustomer()` cuando tu usuario cierra sesión.

```swift
import UIKit
import StripePaymentSheet

class MyViewController: UIViewController {

  @objc
  func didTapLogoutButton() {
    PaymentSheet.resetCustomer()
    // Other logout logic required by your app
  }

}
```

## Optional: Efectiviza el pago en tu interfaz de usuario

Puedes presentar la hoja de pago para recopilar solo los datos del método de pago y después 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 que se recopilen los datos de pago.
![](https://b.stripecdn.com/docs-statics-srv/assets/ios-multi-step.cd631ea4f1cd8cf3f39b6b9e1e92b6c5.png)

Efectiviza el pago en la interfaz de usuario de tu aplicación

#### UIKit

Los siguientes pasos te guían a través del proceso para efectivizar 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 seleccionado inicialmente por el cliente.

```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 guían a través del proceso para efectivizar 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 representa el método de pago actualmente seleccionado por el cliente y que puedes utilizar 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 recoger los datos de pago. Cuando `PaymentSheet.FlowController` llama al argumento `onSheetDismissed`, el `paymentOption` de la instancia `PaymentSheet.FlowController` refleja el método de pago seleccionado en ese momento.

```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 ajustar 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 utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

## Optional: Habilitar la recopilación de CVC en la confirmación

Las siguientes instrucciones para volver a recolectar el CVC de una tarjeta guardada durante la confirmación del PaymentIntent suponen que tu integración incluye lo siguiente:

- Crear PaymentIntents antes de recolectar los datos de pago

### Actualizar parámetros de la creación de la intención

Para volver a recolectar 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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -H "Stripe-Account: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -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)

Utiliza la clase [PaymentSheet](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html) para integrar la IU de pago prediseñada de Stripe al proceso de compra de tu aplicación de Android.

## Configurar Stripe [Lado del servidor] [Lado del cliente]

Primero, necesitas una cuenta de Stripe. [Regístrate ahora](https://dashboard.stripe.com/register).

### Lado del servidor

Esta integración necesita puntos de conexión de 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, añade `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.2.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.2.0")
}
```

> 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) de 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 los 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 relevantes para tu empresa y tus clientes. Consulta [Compatibilidad con 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 y nuestra [página de tarifas](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones.

## Añadir un punto de conexión [Lado del servidor]

> #### Nota
> 
> Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recolectar datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.

Esta integración usa tres objetos de la API de Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe usa este dato para representar tu intención de cobrarle a un cliente y hacer el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.

1. (Opcional) [Customer](https://docs.stripe.com/api/customers.md): para configurar un método de pago para pagos futuros, debes vincularlo a un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear el objeto Customer antes del pago y asociarlo más tarde con tu propia representación interna de la cuenta del cliente.

1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): la información que contiene el objeto Customer es confidencial y no puede recuperarse directamente desde una aplicación. Una CustomerSession concede al SDK acceso temporal con ámbito al Customer y ofrece más opciones de configuración. Consulta la lista completa de las [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Si nunca guardas tarjetas en un objeto Customer y no permites que los clientes que vuelven reutilicen las 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, añade un punto de conexión en tu servidor que:

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 [divisa](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` del CustomerSession, el [id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del Customer 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 automáticamente los métodos de pago de la configuración de tu Dashboard o puedes enumerarlos de forma manual. Independientemente de la opción que elijas, debes saber que la divisa 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 no acepta 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 divisa, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la divisa y la ubicación del cliente.

#### Gestiona 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 gestiona la devolución de métodos de pago que cumplen los requisitos según factores como el importe de la transacción, la divisa 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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 aceptar la divisa especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que acepta cada método de pago. Consulta la página de [Opciones de integración de los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre lo que se acepta.

## Recopilar datos de pago [Lado del cliente]

Antes de mostrar el Payment Element móvil, tu página de proceso de compra debe:

- Mostrar los productos comprados y el importe total
- Recopila la información de envío requerida usando el [Address Element](https://docs.stripe.com/elements/address-element.md?platform=android)
- Incluir un botón de checkout 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 `PaymentSheet` dentro de `onCreate` de tu Actividad de proceso de compra, pasando un método para gestionar 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, obtén el secreto de cliente del PaymentIntent, el secreto del cliente de la sesión del cliente, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Establece la clave publicable mediante `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<PaymentSheet.CustomerConfiguration?>(null) }
  varpaymentIntentClientSecret by remember { mutableStateOf<String?>(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 pulse el botón de checkout, 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 a [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<PaymentSheet.CustomerConfiguration?>(null) }
  var paymentIntentClientSecret by remember { mutableStateOf<String?>(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ásico)

[Inicializa](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/index.html#-394860221%2FConstructors%2F2002900378) una instancia `PaymentSheet` dentro de `onCreate` de tu Actividad de proceso de compra, lo que especifica un método para gestionar 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, obtén el secreto de cliente del PaymentIntent, el secreto del cliente de la sesión del cliente, el ID del cliente y la clave publicable del punto de conexión que creaste en el paso anterior. Establece la clave publicable mediante `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 pulse el botón de checkout, 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 a [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 utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

## Administrar 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 efectiviza el pago. Usa la [herramienta webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. 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 el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento `payment_intent.succeeded` o `payment_intent.payment_failed`. | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Se envía cuando el cliente intenta realizar un pago, pero este 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   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Redireccionamientos bancarios

| Método de pago    | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank       | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK              | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena 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: Habilita Link

Activa Link en tu [configuración de método 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 mediante el botón de proceso de compra rápida con 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 previamente la mayor cantidad de información posible para optimizar el proceso de compra.

Para completar previamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona a `defaultBillingDetails` 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, debes añadir lo siguiente a la etiqueta `<application>` de tu **AndroidManifest.xml** para habilitar la API de Google Pay:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Para obtener más detalles, consulta la documentación de Google Pay sobre cómo [configurar la API de Google Pay](https://developers.google.com/pay/api/android/guides/setup) para Android.

### Añadir Google Pay

Para añadir Google Pay a tu integración, especifica una [PaymentSheet.GooglePayConfiguration](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-google-pay-configuration/index.html) con tu entorno (de producción o de pruebas) de Google Pay y el [código de país de tu empresa](https://dashboard.stripe.com/settings/account) cuando inicies [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 [paquete de tarjetas de prueba](https://developers.google.com/pay/api/android/guides/resources/test-card-suite). El paquete de pruebas es compatible con el uso de [tarjetas de prueba](https://docs.stripe.com/testing.md) de Stripe.

Para probar Google Pay, debes utilizar un dispositivo Android físico en lugar de un dispositivo simulado, en un país donde Google Pay sea compatible. Inicia sesión en una cuenta de Google en tu dispositivo de prueba con una tarjeta real guardada en Google Wallet.

## Optional: Habilitar escaneo de tarjetas

Para habilitar la compatibilidad con el escaneo de tarjetas, [solicita 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 la [Consola de Google Pay y Monedero](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Si has habilitado Google Pay, la función de escaneo de tarjetas estará disponible automáticamente en nuestra interfaz de usuario 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 función de escaneo de tarjetas solo aparece en compilaciones firmadas con la misma clave de firma registrada en la [Consola de Google Pay y Monedero](https://pay.google.com/business/console). Las compilaciones de prueba o depuración que utilicen claves de firma diferentes (por ejemplo, las 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:
  - Firma tus compilaciones de prueba con tu clave de firma de producción
  - Añade la huella digital de tu clave de firma de prueba a la Consola de Google Pay y Monedero

## Optional: Habilitar pagos ACH

Para habilitar los pagos con adeudo ACH, debes incluir Financial Connections como dependencia a 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, añade `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.2.0")
}
```

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

### Aspecto

Personaliza los colores, las fuentes y más para que coincidan con el aspecto de tu aplicación mediante la [API de apariencia](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 usando [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 automáticamente.
![](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 direcciones de usuarios

Recolecta 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 que se muestra de la empresa

Configura [merchantDisplayName](https://stripe.dev/stripe-android/paymentsheet/com.stripe.android.paymentsheet/-payment-sheet/-configuration/index.html#-191101533%2FProperties%2F2002900378) para especificar el nombre de empresa que quieres que vea el cliente. De forma 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). Esto se puede cambiar si estableces el modo claro o el modo oscuro en tu aplicación:

#### Kotlin

```kotlin
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

## Optional: Gestiona el cierre de sesión de usuarios

`PaymentSheet` almacena cierta información localmente para recordar si un usuario ha utilizado Link dentro de una aplicación. Para borrar el estado interno de `PaymentSheet`, llama al método `PaymentSheet.resetCustomer()` cuando tu usuario cierra sesión.

#### Kotlin

```kotlin
class MyActivity: Activity {

  fun onLogoutButtonClicked() {
    PaymentSheet.resetCustomer(this)
    // Other logout logic required by your app
  }
}
```

## Optional: Efectiviza 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 que se recopilen los datos de 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 del [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 del objeto Stripe recuperadas del back-end y actualiza tu interfaz de usuario en la devolución de llamada mediante [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 a [paymentOptionCallback](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 utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

## Optional: Habilitar la recopilación de CVC en la confirmación

Las siguientes instrucciones para volver a recolectar el CVC de una tarjeta guardada durante la confirmación del PaymentIntent suponen que tu integración incluye lo siguiente:

- Crear PaymentIntents antes de recolectar los datos de pago

### Actualizar parámetros de la creación de la intención

Para volver a recolectar 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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u <<YOUR_SECRET_KEY>>: \
  -H "Stripe-Version: 2026-03-25.dahlia" \
  -H "Stripe-Account: 2026-03-25.dahlia" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -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, incluyendo la recopilación de los datos de pago y la confirmación del mismo, 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. [Regístrate ahora](https://dashboard.stripe.com/register).

### Lado del servidor

Esta integración necesita puntos de conexión de 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 el SDK de [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 (en función del 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, navega hasta el directorio de **ios** y ejecuta `pod install` para asegurarte de instalar también 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 añadir compatibilidad con 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 mediante 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 (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

> Usa las [claves de prueba](https://docs.stripe.com/keys.md#obtain-api-keys) de la API durante las pruebas y las tareas de desarrollo, y las claves del [modo activo](https://docs.stripe.com/keys.md#test-live-modes) cuando publiques tu aplicación.

## Habilitar los 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 relevantes para tu empresa y tus clientes. Consulta [Compatibilidad con 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 y nuestra [página de tarifas](https://stripe.com/pricing/local-payment-methods) para conocer las comisiones.

## Añadir un punto de conexión [Lado del servidor]

> #### Nota
> 
> Para mostrar la PaymentSheet antes de crear un PaymentIntent, consulta [Recolectar datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

Si tu plataforma Connect utiliza [Cuentas configuradas por el cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utiliza nuestra [guía](https://docs.stripe.com/connect/use-accounts-as-customers.md) para reemplazar las referencias del `cliente` y de los eventos en tu código por las referencias equivalentes de la API Accounts v2.

Esta integración usa tres objetos de la API de Stripe:

1. [PaymentIntent](https://docs.stripe.com/api/payment_intents.md): Stripe usa este dato para representar tu intención de cobrarle a un cliente y hacer el seguimiento de los intentos de cobro y de los cambios en el estado del pago a lo largo del proceso.

1. (Opcional) [Customer](https://docs.stripe.com/api/customers.md): para configurar un método de pago para pagos futuros, debes vincularlo a un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea el objeto Customer cuando tu cliente cree una cuenta en tu empresa. Si tu cliente hace un pago como invitado, puedes crear el objeto Customer antes del pago y asociarlo más tarde con tu propia representación interna de la cuenta del cliente.

1. (Opcional) [CustomerSession](https://docs.stripe.com/api/customer_sessions.md): la información que contiene el objeto Customer es confidencial y no puede recuperarse directamente desde una aplicación. Una CustomerSession concede al SDK acceso temporal con ámbito al Customer y ofrece más opciones de configuración. Consulta la lista completa de las [opciones de configuración](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components).

> Si nunca guardas tarjetas en un objeto Customer y no permites que los clientes que vuelven reutilicen las 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, añade un punto de conexión en tu servidor que:

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 [divisa](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` del CustomerSession, el [id](https://docs.stripe.com/api/customers/object.md#customer_object-id) del Customer 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 automáticamente los métodos de pago de la configuración de tu Dashboard o puedes enumerarlos de forma manual. Independientemente de la opción que elijas, debes saber que la divisa 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 no acepta 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 divisa, las restricciones en cuanto a los métodos de pago y otros parámetros para determinar la lista de métodos de pago aceptados. Se da prioridad a los métodos de pago que aumentan la conversión y guardan mayor relación con la divisa y la ubicación del cliente.

#### Gestiona 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 gestiona la devolución de métodos de pago que cumplen los requisitos según factores como el importe de la transacción, la divisa 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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -X "POST" \
  -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"

# Create an CustomerSession for the Customer
curl https://api.stripe.com/v1/customer_sessions \
  -u <<YOUR_SECRET_KEY>>: \
  -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 <<YOUR_SECRET_KEY>>: \
  -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 aceptar la divisa especificada en el PaymentIntent, y tu empresa tiene que estar establecida en uno de los países que acepta cada método de pago. Consulta la página de [Opciones de integración de los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md) para obtener más información sobre lo que se acepta.

## Recopilar datos de pago [Lado del cliente]

Antes de mostrar el Payment Element móvil, tu página de finalización de compra debe:

- 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 (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Cuando el cliente toca el botón **Pagar**, llama a `presentPaymentSheet()` para abrir la hoja. Después de que complete el pago, la hoja se cerrará y la promesa se resolverá con un `StripeError<PaymentSheetError>` opcional.

```javascript
export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}
```

Si no se ha producido ningún error, comunícale al usuario que el proceso ya ha terminado (por ejemplo, mostrándole una pantalla de confirmación del pedido).

Establecer `allowsDelayedPaymentMethods` en true permite utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.

## Configurar una URL de retorno (solo para iOS) [Lado del cliente]

Cuando un cliente sale de tu aplicación (por ejemplo, para autenticarse en Safari o en su aplicación bancaria), proporciónale una forma de volver automáticamente a tu aplicación. Muchos tipos de métodos de pago *requieren* una URL de retorno. Si no proporcionas una, no podremos presentar a tus usuarios métodos de pago que requieran una URL de retorno, aunque los hayas habilitado.

Para proporcionar una URL de retorno:

1. [Registrar](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme) una URL personalizada. No se admiten enlaces universales.
1. [Configurar](https://reactnative.dev/docs/linking) tu URL personalizada.
1. Configura tu componente raíz para reenviar la URL al SDK de Stripe como se muestra a continuación.

> Si utilizas Expo, [configura tu esquema](https://docs.expo.io/guides/linking/#in-a-standalone-app) en el archivo `app.json`.

```jsx
import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}
```

Además, debes especificar `returnURL` cuando invoques el método `initPaymentSheet`:

```js
await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});
```

Para obtener más información sobre los esquemas de URL nativos, consulta la documentación para [Android](https://developer.android.com/training/app-links/deep-linking) e [iOS](https://developer.apple.com/documentation/xcode/allowing_apps_and_websites_to_link_to_your_content/defining_a_custom_url_scheme_for_your_app).

## Administrar eventos posteriores al pago

Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se efectiviza el pago. Usa la [herramienta webhook del Dashboard](https://dashboard.stripe.com/webhooks) o sigue las indicaciones de la [guía de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para recibir estos eventos y acciones de ejecución, como enviar a tu cliente un correo electrónico de confirmación del pedido, registrar la venta en una base de datos o iniciar el flujo de trabajo de los envíos.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada. 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 el cliente inicia el pago correctamente, pero este aún no se ha efectivizado. En la mayoría de los casos, este evento se envía cuando el cliente inicia un adeudo bancario. Más adelante, le seguirá el evento `payment_intent.succeeded` o `payment_intent.payment_failed`. | Envía al cliente una confirmación del pedido que indique que su pago está pendiente. Para los productos digitales, es posible que desees completar el pedido antes de esperar a que se efectivice el pago. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Se envía cuando el cliente intenta realizar un pago, pero este 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   | Situación                                                                                                                                                                                                                                                                                       | Cómo hacer pruebas                                                                                                        |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se realiza correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y 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). | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 4000000000009995    | La tarjeta se rechaza con un código de rechazo como, por ejemplo, `insufficient_funds`.                                                                                                                                                                                                         | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |
| 6205500000000000004 | La tarjeta UnionPay tiene una longitud variable de 13-19 dígitos.                                                                                                                                                                                                                               | Rellena el formulario de tarjeta de crédito con el número de tarjeta y cualquier fecha de caducidad, CVC y código postal. |

#### Redireccionamientos bancarios

| Método de pago    | Situación                                                                                                                                                                                                            | Cómo hacer pruebas                                                                                                                                                                                     |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 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 el método de pago basado en redireccionamiento, rellena los datos solicitados y confirma el pago. A continuación, haz clic en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank       | Tu cliente paga correctamente con un método de pago basado en redireccionamiento y [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 clic 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 clic en **Error en el pago de prueba** en la página de redireccionamiento.                                      |
| BLIK              | Los pagos BLIK fallan de varias maneras: fallos inmediatos (por ejemplo, el código ha caducado o no es válido), errores demorados (el banco los rechaza) o tiempos de espera (el cliente no ha respondido a tiempo). | Usa patrones de correo electrónico para [simular los diferentes fallos.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                  |

#### Adeudos bancarios

| Método de pago      | Situación                                                                                     | Cómo hacer pruebas                                                                                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Adeudo directo SEPA | Tu cliente paga correctamente con adeudo directo SEPA.                                        | Rellena el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado processing y, tres minutos más tarde, a succeeded. |
| Adeudo directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Rellena 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.

## Habilitar escaneo de tarjetas [Lado del cliente]

> Es necesario habilitar el escaneo de tarjetas para el proceso de revisión de aplicaciones iOS de Apple. El escaneo de tarjetas no es necesario para el proceso de revisión de aplicaciones Android, pero recomendamos habilitarlo.

### iOS

Para habilitar la compatibilidad con el escaneo de tarjetas en iOS, establece la `NSCameraUsageDescription` (**Privacidad - Descripción del uso de la cámara**) en la `Info.plist` de tu aplicación, y proporciona un motivo para acceder a la cámara (por ejemplo, “Escanear tarjetas”).

### (Optional) Android

Para habilitar la compatibilidad con el escaneo de tarjetas, [solicita 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 la [Consola de Google Pay y Monedero](https://pay.google.com/business/console?utm_source=devsite&utm_medium=devsite&utm_campaign=devsite).

- Si has habilitado Google Pay, la función de escaneo de tarjetas estará disponible automáticamente en nuestra interfaz de usuario 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 función de escaneo de tarjetas solo aparece en compilaciones firmadas con la misma clave de firma registrada en la [Consola de Google Pay y Monedero](https://pay.google.com/business/console). Las compilaciones de prueba o depuración que utilicen claves de firma diferentes (por ejemplo, las 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:
  - Firma tus compilaciones de prueba con tu clave de firma de producción
  - Añade la huella digital de tu clave de firma de prueba a la Consola de Google Pay y Monedero

## Optional: Habilita Link

Activa Link en tu [configuración de método 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 mediante el botón de proceso de compra rápida con 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 previamente la mayor cantidad de información posible para optimizar el proceso de compra.

Para completar previamente el nombre, la dirección de correo electrónico y el número de teléfono del cliente, proporciona a `defaultBillingDetails` la información de tu cliente en `initPaymentSheet`.

```javascript
await initPaymentSheet({
  ...
  defaultBillingDetails: {
    name: 'Jenny Rosen',
    email: 'jenny.rosen@example.com',
    phone: '888-888-8888',
  },
});
```

## Optional: Habilitar Apple Pay

### Regístrate para obtener un ID de comerciante de Apple

Obtén un ID de comerciante Apple [registrándote para obtener un nuevo identificador](https://developer.apple.com/account/resources/identifiers/add/merchant) en el sitio web de Apple para desarrolladores.

Rellena el formulario incluyendo una descripción y el identificador. La descripción es solo para ti y podrás modificarla después. Stripe te recomienda que uses como identificador el nombre de tu aplicación (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 **Añadir aplicación nueva** y sigue las indicaciones.

Descarga un archivo de petición 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 un certificado de manera exacta. 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 un CSR y un certificado nuevos.

### Integrar con Xcode

Añade la funcionalidad Apple Pay a tu aplicación. En Xcode, abre la configuración del proyecto, selecciona la pestaña **Firma y funcionalidades** y añade la funcionalidad **Apple Pay**. Aquí, es posible que se te pida que inicies 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)

Habilita la funcionalidad Apple Pay en Xcode

### Añadir Apple Pay

#### Pago único

Especifica tu ID de comerciante cuando creas `StripeProvider`:

```javascript
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="<<YOUR_PUBLISHABLE_KEY>>"
      merchantIdentifier="MERCHANT_ID"
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

Cuando llamas a `initPaymentSheet`, pasa tus [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams):

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});
```

#### Pagos recurrentes

Cuando llames a `initPaymentSheet`, introduce un [ApplePayParams](https://stripe.dev/stripe-react-native/api-reference/modules/PaymentSheet.html#ApplePayParams) con `merchantCountryCode` configurado en el código de país de tu empresa.

De acuerdo con las [directrices de Apple](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Supporting-subscriptions) para pagos recurrentes, también debes establecer un`cardItems` que incluye un[RecurringCartSummaryItem](https://stripe.dev/stripe-react-native/api-reference/modules/ApplePay.html#RecurringCartSummaryItem) con la cantidad que pretendes cobrar (por ejemplo, “59,95 USD al mes”).

También puedes adoptar [tokens comerciales](https://developer.apple.com/apple-pay/merchant-tokens/) estableciendo la `request` con su `type` establecido en `PaymentRequestType.Recurring`

Para obtener más información sobre cómo usar pagos recurrentes con Apple Pay, consulta la [documentación de Apple sobre PassKit](https://developer.apple.com/documentation/passkit/pkpaymentrequest).

#### iOS (React Native)

```javascript
const initializePaymentSheet = async () => {
  const recurringSummaryItem = {
    label: 'My Subscription',
    amount: '59.99',
    paymentType: 'Recurring',
    intervalCount: 1,
    intervalUnit: 'month',
    // Payment starts today
    startDate: new Date().getTime() / 1000,

    // Payment ends in one year
    endDate: new Date().getTime() / 1000 + 60 * 60 * 24 * 365,
  };

  const {error} = await initPaymentSheet({
    // ...
    applePay: {
      merchantCountryCode: 'US',
      cartItems: [recurringSummaryItem],
      request: {
        type: PaymentRequestType.Recurring,
        description: 'Recurring',
        managementUrl: 'https://my-backend.example.com/customer-portal',
        billing: recurringSummaryItem,
        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.'",
      },
    },
  });
};
```

### Seguimiento de pedidos

Para añadir información de [seguimiento de pedidos](https://developer.apple.com/design/human-interface-guidelines/technologies/wallet/designing-order-tracking) en iOS 16 o en una versión posterior, configura una función de devolución de llamada `setOrderTracking`. Stripe llama a tu implementación después de que se haya completado el pago, pero antes de que iOS descarte la hoja de Apple Pay.

Al implementar la función de devolución de llamada `setOrderTracking`setOrderTracking’, obtén los detalles del pedido de tu servidor para el pedido completado y transfiere los detalles a la función de `completion` proporcionada.

Para obtener más información sobre el seguimiento de pedidos, consulta la [documentación de Apple sobre los pedidos por monedero](https://developer.apple.com/documentation/walletorders).

#### iOS (React Native)

```javascript
await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});
```

## Optional: Habilitar Google Pay

### Configura tu integración

Para usar Google Pay, debes añadir lo siguiente a la etiqueta `<application>` de tu **AndroidManifest.xml** para habilitar la API de Google Pay:

```xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Para obtener más detalles, consulta la documentación de Google Pay sobre cómo [configurar la API de Google Pay](https://developers.google.com/pay/api/android/guides/setup) para Android.

### Añadir Google Pay

Al iniciar `PaymentSheet`, establece `merchantCountryCode` en el código de país de tu empresa  y establece `googlePay` en verdadero.

También puedes usar el entorno de prueba estableciendo el parámetro `testEnv`. Solo puedes probar Google&nbsp;Pay en un dispositivo físico Android. Consulta la [documentación de React Native](https://reactnative.dev/docs/running-on-device) para probar tu aplicación en un dispositivo físico.

```javascript
const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});
```

## Optional: Personalizar la hoja [Lado del cliente]

Todo lo que se quiera personalizar se configura con `initPaymentSheet`.

### Aspecto

Personaliza los colores, las fuentes, etc. para que coincidan con el aspecto de tu aplicación mediante la [API de apariencia](https://docs.stripe.com/elements/appearance-api/mobile.md?platform=react-native).

### Nombre con el que aparecerá el comerciante

Configura `merchantDisplayName` para especificar el nombre de empresa que quieres que vea el cliente; de forma predeterminada, será el nombre de tu aplicación.

```javascript
await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});
```

### 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). Esto se puede cambiar si estableces la propiedad `style`en `alwaysLight` o `alwaysDark` en iOS.

```javascript
await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});
```

En Android, debes establecer el modo claro u oscuro en tu aplicación:

```
// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
```

## Optional: Gestiona el cierre de sesión de usuarios

`PaymentSheet` almacena cierta información localmente para recordar si un usuario ha utilizado Link dentro de una aplicación. Para borrar el estado interno de `PaymentSheet`, llama al método `resetPaymentSheetCustomer()` cuando tu usuario cierra sesión.

```javascript
export default function CheckoutScreen() {
  // continued from above
  const { initPaymentSheet, presentPaymentSheet, resetPaymentSheetCustomer } = useStripe();

  const logout = async () => {
    await resetPaymentSheetCustomer();
  };

  return (
    <Screen>
      <Button
        title="Checkout"
        onPress={openPaymentSheet}
      />
      <Button
        title="Checkout"
        onPress={logout}
      />
    </Screen>
  );
}
```

## Optional: Efectiviza el pago en tu interfaz de usuario

Puedes presentar una hoja de pago para recopilar solo los datos del método de pago y a continuación 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/react-native-multi-step.84d8a0a44b1baa596bda491322b6d9fd.png)

> Tienes un ejemplo de integración [disponible en nuestro GitHub](https://github.com/stripe/stripe-react-native/blob/master/example/src/screens/PaymentsUICustomScreen.tsx).

1. Primero, llama a `initPaymentSheet` y especifica `customFlow: true`. `initPaymentSheet` se resuelve con una opción de pago inicial que contiene una imagen y una etiqueta que representan el método de pago del cliente. Actualiza tu interfaz de usuario con estos datos.

```javascript
const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption
```

1. Usa `presentPaymentSheet` para recopilar datos del pago. Una vez que el cliente termina, la hoja se cierra y se resuelve la promesa. Actualiza la interfaz de usuario con los datos del método de pago seleccionado.

```javascript
const { error, paymentOption } = await presentPaymentSheet();
```

1. Usa `confirmPaymentSheetPayment` para confirmar el pago. Esto se resuelve con el resultado del pago.

```javascript
const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}
```

Establecer `allowsDelayedPaymentMethods` en true permite utilizar métodos de pago de [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification) como cuentas bancarias de EE.&nbsp;UU. Para estos métodos de pago, el estado final del pago no se conoce cuando se completa la `PaymentSheet`, sino que se efectúa correctamente o con errores más tarde. Si aceptas este tipo de métodos de pago, infórmale al cliente de que su pedido está confirmado y solo complétalo (por ejemplo, envía el producto) cuando el pago se haya realizado correctamente.