# Aceptar un pago único

Aprende a aceptar un pago único Pix, un método de pago común en Brasil.

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/pix/accept-a-payment?payment-ui=checkout.

Los usuarios de Stripe pueden aceptar pagos de Pix de clientes en Brasil. Los clientes pagan copiando y pegando una cadena de Pix o escaneando un código QR directamente en sus aplicaciones bancarias.

## Determinar compatibilidad

**Ubicaciones comerciales admitidas**: BR, US, EU, CA, GB, AU, SG, CH

**Monedas admitidas**: `brl`

**Monedas de pago**: `brl`

**Modo de pago**: Yes

**Modo configuración**: Yes

**Modo suscripción**: Yes

Para aceptar pagos con Pix, la sesión de Checkout debe cumplir todas estas condiciones:

- *Los 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) de todos los ítems deben estar en la moneda `brl`.
- Solo puedes usar ítems de línea de pago único para pagos únicos con Pix. El modo de configuración y los planes de *suscripción* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) recurrentes son compatibles a través de [Pix Automático](https://docs.stripe.com/payments/pix/accept-a-recurring-payment.md).

## Aceptar un pago

> Crea una integración para [aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) con Checkout antes de usar esta guía.

Esto te orienta para habilitar Pix y muestra las diferencias entre aceptar pagos con métodos de pago dinámicos y configurar métodos de pago manualmente.

### Habilitar Pix como método de pago

Al crear una nueva [sesión de Checkout](https://docs.stripe.com/api/checkout/sessions.md), debes:

1. Agrega `pix` a la lista de `payment_method_types`.
1. Asegúrate de que todos los `line_items` usen la moneda `brl`.

#### Página alojada en Stripe

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=brl" \
  -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 "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulario integrado

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=brl" \
  -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 "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Opciones de métodos de pago adicionales

Puedes establecer el número de segundos antes de que venza un pago pendiente de Pix especificando el parámetro opcional [expires_after_seconds](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pix-expires_after_seconds) en `payment_method_options`. Por ejemplo, si un cliente completa la sesión de Checkout con `expires_after_seconds` establecido en `600` el lunes a las 14:00, tiene hasta el lunes a las 14:10 para transferir los fondos y completar el pago.

Puedes establecer `expires_after_seconds` en un valor entre 10 segundos y 1209600 segundos (14 días). El valor predeterminado es 14400 segundos (4 horas).

#### Página alojada en Stripe

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=brl" \
  -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 "payment_method_options[pix][expires_after_seconds]=600" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulario integrado

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=brl" \
  -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 "payment_method_options[pix][expires_after_seconds]=600" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Redirigir a una página de instrucciones alojadas por Stripe

> A diferencia de los pagos con tarjeta, no redirigimos a tu cliente a la [success_url](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-success_url) con pagos de Pix.

Después de enviar el formulario de pago con éxito, redirigimos a tu cliente a `hosted_instructions_url`. Tu cliente escanea el código QR o copia la cadena Pix de la página de instrucciones alojada en Stripe.

Enviamos un evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) cuando se crea correctamente un código Pix. Busca la `hosted_instructions_url` en [payment_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) para enviar por correo electrónico el enlace de instrucciones a tus clientes. Obtén más información sobre cómo [supervisar un PaymentIntent con webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks).

Permitimos la personalización de las interfaces de usuario del cliente en la página de [configuración de imagen de marca](https://dashboard.stripe.com/account/branding). Puedes aplicar la siguiente configuración de marca a la página de instrucciones alojada en Stripe:

- **Ícono**: tu imagen de marca y el nombre público de la empresa
- **Color de énfasis**: se utiliza como el color del botón **Copiar código**
- **Color de marca**: se utiliza como color de fondo

### Completa los pedidos

Debido a que Pix es un método de pago con notificación diferida, tienes que usar un método como los *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para supervisar el estado del pago y gestionar *el cumplimiento del pedido* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected). Obtén más información sobre [cómo configurar webhooks y completar pedidos](https://docs.stripe.com/checkout/fulfillment.md).

Enviamos los siguientes eventos cuando cambia el estado del pago:

| Nombre del evento                                                                                                                            | Descripción                                                                                                                                                                                                       | Próximos pasos                                                                  |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)                             | Tu cliente envía correctamente el formulario de pago y Stripe genera el código Pix.

  Puedes elegir enviar la `hosted_instructions_url` por correo electrónico a tu cliente en caso de que pierda el código Pix. | Espera a que tu cliente pague el Pix.                                           |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Tu cliente pagó correctamente el Pix. El `PaymentIntent` pasa a `succeeded`.                                                                                                                                      | Entrega los bienes o servicios que compró tu cliente.                           |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | El código Pix ha caducado o el pago ha fallado por algún otro motivo. El estado del `PaymentIntent` vuelve a ser `requires_payment_method`.                                                                       | Envía un correo electrónico a tu cliente y solicítale que haga un nuevo pedido. |

## Prueba tu integración

Para probar tu integración:

1. Selecciona Pix.
1. Introduce los datos del comprador y toca **Pagar**. En un entorno de prueba, puedes usar `000.000.000-00` como identificador fiscal de prueba (CPF o CNPJ).
1. Haz clic en **Simular escaneo** para abrir una página de pago de prueba de Pix alojada en Stripe. Desde esta página, puedes autorizar o caducar el pago de prueba.

En modo activo, el botón **Pagar** muestra un código QR de Pix. Necesitas una cuenta bancaria brasileña con Pix habilitado para completar o cancelar este flujo de pago.

También puedes establecer [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) en los siguientes valores para probar diferentes escenarios.

| Correo electrónico                             | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula un Pix que un cliente paga después de 3 minutos. El [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) llega aproximadamente después de 3 minutos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula un Pix que tu cliente paga de inmediato. El webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) llega en cuestión de segundos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `succeed_immediately@example.com`                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula un Pix que vence antes de que pague el cliente. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega en unos segundos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_immediately@example.com`                                                                                                                                                                                                   |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula un Pix que vence antes de que tu cliente lo pague. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega aproximadamente después de 3 minutos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_with_delay@example.com`                                                                                                                                                                             |
| `{any_prefix}fill_never@{any_domain}`          | Simula un Pix que nunca se completa con éxito. Vence según el parámetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) o [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega una vez que finaliza la simulación.

  Ejemplo: `fill_never@example.com`                                                                                                                                                                                                                     |

## Optional: Rembolsos [Lado del servidor]

Puedes reembolsar los pagos de Pix a través del [Dashboard](https://dashboard.stripe.com/test/payments) o la [API](https://docs.stripe.com/api.md#create_refund).

## See also

- [Cumplimiento del proceso de compra](https://docs.stripe.com/checkout/fulfillment.md)
- [Cómo personalizar Checkout](https://docs.stripe.com/payments/checkout/customization.md)


# Elements

> This is a Elements for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/pix/accept-a-payment?payment-ui=elements.

### Consideraciones específicas de Pix

- El gobierno brasileño exige que los compradores proporcionen una identificación fiscal (CPF/CNPJ) cuando completen transacciones transfronterizas. Stripe Elements captura la identificación, independientemente de si confirmas el PaymentIntent del lado del cliente o del lado del servidor.

- Los códigos QR de Pix vencen a las 4 horas desde su creación. Los clientes no pueden usar un código QR de Pix vencido para completar un pago. En cuanto vence un código QR de Pix, Stripe envía un evento `payment_intent.payment_failed`.

## Configurar Stripe [Lado del servidor]

Para empezar, [crea una cuenta de Stripe](https://dashboard.stripe.com/register).

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'
```

## Recopila datos de pago [Lado del cliente]

Ya tienes todo listo para recopilar datos del pago del lado del cliente con Payment Element. El Payment Element es un componente de interfaz de usuario prediseñado que simplifica la recopilación de datos de pago para una amplia variedad de métodos de pago.

El Payment Element contiene un iframe que envía la información de pago a Stripe de manera segura mediante una conexión HTTPS. No coloques el Payment Element dentro de otro iframe porque, para algunos métodos de pago, se requiere el redireccionamiento a otra página a fin de confirmar el pago.

Para que la integración funcione, la dirección de la página de confirmación de compra debe empezar con `https://` en lugar de `http://`. 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 reales.

#### HTML + JS

### Configurar Stripe.js

El Payment Element se encuentra disponible automáticamente como funcionalidad de Stripe.js. Incluye el script de Stripe.js en tu página de confirmación de compra agregándolo al `head` de tu archivo HTML. Siempre debes cargar Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.

```html
<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 finalización de compra:

```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>>');
```

### Cómo agregar el Payment Element a tu página de finalización de compra

Payment Element necesita un lugar en tu página de finalización de compra. 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>
```

#### Controla los métodos de pago desde el Dashboard

Después de cargar el formulario que aparece arriba, crea una instancia de Elements con `mode`, `amount` y `currency`. Estos valores determinan qué métodos de pago ve tu cliente. Para proporcionar un nuevo método de pago en tu formulario, asegúrate de habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'brl',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### Enumerar métodos de pago manualmente

Para enumerar manualmente los métodos de pago que quieres que estén disponibles, agrega cada uno a `paymentMethodTypes`.

Luego, crea una instancia de Payment Element y móntala en el nodo DOM del contenedor.

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'brl',
  paymentMethodTypes: ['pix'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout formconst 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 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
```

### Cómo agregar y configurar el proveedor Elements en tu página de finalización de compra

Para usar el componente Payment Element, envuelve el componente de tu página de confirmación de compra con un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica el valor `Promise` devuelto en el proveedor `Elements`.

#### Controla los métodos de pago desde el Dashboard

El proveedor de `Elements` también acepta `mode`, `amount` y `currency`. Estos valores determinan qué métodos de pago ve tu cliente. Para proporcionar un nuevo método de pago en tu formulario, asegúrate de habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```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 = {mode:'payment',
    amount:1099,
    currency: 'brl',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Enumerar métodos de pago manualmente

```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 = {mode:'payment',
    amount:1099,
    currency: 'brl',
    paymentMethodTypes: ['pix'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Agregar el componente Payment Element

Usa el componente `PaymentElement` para crear tu formulario.

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

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

export default CheckoutForm;
```

Puedes personalizar el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto appearance](https://docs.stripe.com/elements/appearance-api.md) en `options` al crear el proveedor `Elements`.

### Recopila las direcciones

Por defecto, el Payment Element solo junta los detalles necesarios de la dirección de facturación. Algunos comportamientos, como el [cálculo de impuestos](https://docs.stripe.com/api/tax/calculations/create.md) o la introducción de datos de envío, requieren la dirección completa de tu cliente. Puedes realizar lo siguiente:

- Utiliza el [Address Element](https://docs.stripe.com/elements/address-element.md) para aprovechar las funcionalidades de autocompletar y localizar para obtener la dirección completa de tu cliente. Esto ayuda a garantizar el cálculo de impuestos más preciso.
- Recopila los datos de la dirección mediante tu propio formulario personalizado.

## Crear un PaymentIntent [Lado del servidor]

> #### Ejecuta la lógica de negocio personalizada inmediatamente antes de la confirmación del pago
> 
> Ve al [paso&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) en la guía de finalización de pagos para ejecutar tu lógica empresarial personalizada inmediatamente antes de la confirmación del pago. De lo contrario, realiza los pasos que se describen a continuación para una integración más simple, que usa `stripe.confirmPayment` en el cliente para confirmar el pago y manejar las próximas acciones.

#### Controla los métodos de pago desde el Dashboard

Cuando el cliente envíe tu formulario de pago, usa 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) para facilitar el proceso de confirmación y pago. Crea un PaymentIntent en tu servidor con `amount` y `currency`. Para evitar que clientes malintencionados puedan elegir sus propios precios, decide cuánto cobrar siempre del lado del servidor (un entorno de confianza) y no del lado del cliente.

En un `PaymentIntent` se 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)). Devuelve este valor a tu cliente a fin de que Stripe.js lo use para completar el proceso de pago de forma segura.

#### Accounts v2

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: "{{CUSTOMER_ACCOUNT_ID}}",
    amount: 1099,
    currency: 'brl',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers v1

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'brl',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Enumerar métodos de pago manualmente

Cuando el cliente envíe tu formulario de pago, usa 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) para facilitar el proceso de confirmación y pago. Crea un PaymentIntent en tu servidor con `amount`, `currency` y uno o más métodos de pago usando `payment_method_types`. Para evitar que clientes malintencionados puedan elegir sus propios precios, decide cuánto cobrar siempre del lado del servidor (un entorno de confianza) y no del lado del cliente.

En un PaymentIntent se 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)). Devuelve este valor a tu cliente a fin de que Stripe.js lo use para completar el proceso de pago de forma segura.

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 1099,
    currency: 'brl',
    payment_method_types: ['pix'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Enviar el pago a Stripe [Lado del cliente]

Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos del Payment Element.

Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar a dónde Stripe redirige al usuario después de completar el pago. Es posible que se redirija inicialmente al usuario a un sitio intermedio, como una página de autorización bancaria, antes de que se lo redirija a la `return_url`. Los pagos con tarjeta redirigen inmediatamente a la `return_url` cuando un pago se realiza correctamente.

Si no quieres realizar el redireccionamiento de pagos con tarjeta una vez que se completan los pagos, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) en `if_required`. Esto solo redirigirá a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit');

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } 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';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setLoading(true);

    // Trigger form validation and wallet collection
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch("/create-intent", {
      method: "POST",
    });

    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      handleError(error);
    } 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`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: Gestionar 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 completa el pago. Usa el Dashboard, un *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personalizado o una solución de un socio para recibir estos eventos y ejecutar acciones como enviar un correo electrónico para confirmarle el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de envío.

Recibe notificaciones de estos eventos en lugar de esperar una devolución de llamada del cliente. Del lado del cliente, este podría cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para recibir notificaciones de estos eventos asincrónicos, también podrás aceptar más métodos de pago en el futuro. Descubre las [diferencias entre todos los métodos de pago admitidos](https://stripe.com/payments/payment-methods-guide).

- **Gestionar eventos manualmente en el Dashboard**

  Usa el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar transferencias (a cuenta bancaria) o reintentar pagos con error.

- **Crear un webhook personalizado**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrar una aplicación prediseñada**

  Gestiona eventos empresariales comunes, como la [automatización](https://stripe.partners/?f_category=automation) o la [comercialización y las ventas](https://stripe.partners/?f_category=marketing-and-sales), integrando la aplicación de un socio.

## Prueba tu integración

Para probar tu integración:

1. Selecciona Pix.
1. Introduce los datos del comprador y toca **Pagar**. En un entorno de prueba, puedes usar `000.000.000-00` como identificador fiscal de prueba (CPF o CNPJ).
1. Haz clic en **Simular escaneo** para abrir una página de pago de prueba de Pix alojada en Stripe. Desde esta página, puedes autorizar o caducar el pago de prueba.

En modo activo, el botón **Pagar** muestra un código QR de Pix. Necesitas una cuenta bancaria brasileña con Pix habilitado para completar o cancelar este flujo de pago.

También puedes establecer [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) en los siguientes valores para probar diferentes escenarios.

| Correo electrónico                             | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula un Pix que un cliente paga después de 3 minutos. El [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) llega aproximadamente después de 3 minutos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula un Pix que tu cliente paga de inmediato. El webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) llega en cuestión de segundos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `succeed_immediately@example.com`                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula un Pix que vence antes de que pague el cliente. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega en unos segundos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_immediately@example.com`                                                                                                                                                                                                   |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula un Pix que vence antes de que tu cliente lo pague. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega aproximadamente después de 3 minutos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_with_delay@example.com`                                                                                                                                                                             |
| `{any_prefix}fill_never@{any_domain}`          | Simula un Pix que nunca se completa con éxito. Vence según el parámetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) o [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega una vez que finaliza la simulación.

  Ejemplo: `fill_never@example.com`                                                                                                                                                                                                                     |

## Códigos de error

En la siguiente tabla se detallan los códigos de error más comunes y las acciones recomendadas:

| Código de error                                           | Acción recomendada                                                                                                                                                                                                                                                                                                                                                                              |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Introduce una moneda admitida.                                                                                                                                                                                                                                                                                                                                                                  |
| `missing_required_parameter`                              | Consulta el mensaje de error para obtener más información sobre el parámetro requerido.                                                                                                                                                                                                                                                                                                         |
| `payment_intent_payment_attempt_failed`                   | Este código puede aparecer en el campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de un PaymentIntent. Revisa el mensaje de error para ver el motivo del error detallado y las sugerencias sobre cómo manejar los errores.                                                                                  |
| `payment_intent_authentication_failure`                   | Este código puede aparecer en el campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de un PaymentIntent. Comprueba el mensaje de error para ver el motivo del error detallado y sugerencias sobre el manejo de errores. Este error se produce cuando se activa manualmente un error al probar la integración. |
| `payment_intent_redirect_confirmation_without_return_url` | Proporciona una `return_url` cuando confirmes un PaymentIntent.                                                                                                                                                                                                                                                                                                                                 |


# API Direct

> This is a API Direct for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/pix/accept-a-payment?payment-ui=direct-api.

Los usuarios de Stripe pueden aceptar pagos de Pix de clientes en Brasil. Los clientes pagan copiando y pegando una cadena de Pix o escaneando un código QR directamente en sus aplicaciones bancarias.

El gobierno brasileño exige que los compradores proporcionen un identificador fiscal (CPF o CNPJ) al completar transacciones transfronterizas. Si tu cuenta de Stripe está establecida en EE.&nbsp;UU. y aceptas pagos de Pix con una integración de API directa, debes recopilar el `tax_id` del comprador en el [hash](https://docs.stripe.com/api/payment_methods/object.md?api-version=2025-04-30.basil#payment_method_object-billing_details-tax_id) `billing_details` del método de pago.

## Configura Stripe [Lado del servidor]

Para empezar, [crea una cuenta de Stripe](https://dashboard.stripe.com/register).

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]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) es un objeto que representa tu intención de cobrar a un cliente y hace el seguimiento del ciclo de vida del proceso de pago. Crea un `PaymentIntent` en tu servidor y especifica el importe por cobrar y la moneda admitida. Si ya tienes una integración con [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), agrega `pix` a la lista de [tipos de métodos de pago](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "payment_method_types[]=pix" \
  -d amount=1000 \
  -d currency=brl
```

`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)). Envía el secreto de cliente a tu cliente para completar el proceso de pago en modo seguro en lugar de pasarle el objeto `PaymentIntent` completo.

### Recuperar el secreto de cliente

El PaymentIntent incluye un *secreto de cliente* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) que el lado del cliente usa para completar el proceso de pago de forma segura. Puedes usar diferentes métodos para pasar el secreto del cliente al lado del cliente.

#### Aplicación de una sola página

Recupera el secreto de cliente de un punto de conexión de tu servidor con la funcionalidad `fetch` del navegador. Este método es más conveniente si tu lado del cliente es una aplicación de una sola página, especialmente, si fue diseñada con un marco de front-end moderno como React. Crea el punto de conexión del servidor que se usa para el secreto de cliente:

#### Ruby

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

Luego recupera el secreto de cliente con JavaScript del lado del cliente:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Renderización del lado del servidor

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

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

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

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

## Recopilar datos del método de pago [Lado del cliente]

#### HTML + JS

Crea un formulario de pago del lado del cliente para recopilar los datos de facturación necesarios:

| Campo    | Valor                                                                                                              |
| -------- | ------------------------------------------------------------------------------------------------------------------ |
| `name`   | El nombre completo del cliente.                                                                                    |
| `email`  | La dirección de correo electrónico del cliente.                                                                    |
| `tax_id` | El identificador fiscal del cliente: un CPF si el cliente es un particular o un CNPJ si el cliente es una empresa. |

```html
<form id="payment-form">
  <div class="form-row">
    <label for="name">Full Name:</label>
    <input id="name" name="name" required>
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input id="email" name="email" required>
  </div>
  <div class="form-row">
    <label for="tax-id">CPF or CNPJ:</label>
    <input id="tax-id" name="tax-id" required>
  </div>

  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>

  <button id="submit-button">Pay with Pix</button>
</form>
```

#### React

#### npm

Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) desde el registro público npm.

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

#### umd

También proporcionamos una versión de UMD para sitios que no usan npm ni módulos.

Incluye el script de Stripe.js, que exporta la función global `Stripe`, y la versión de UMD de Stripe.js para React, que exporta el objeto global `ReactStripe`. Carga siempre el script de Stripe.js directamente desde **js.stripe.com** para cumplir con la normativa PCI. No lo incluyas en un paquete ni alojes una copia en tus sistemas.

```html
<!-- Stripe.js -->
<script src="https://js.stripe.com/dahlia/stripe.js"></script>

<!-- React Stripe.js development build -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.js"></script>

<!-- When you are ready to deploy your site to production, remove the
      above development script, and include the following production build. -->
<script src="https://unpkg.com/@stripe/react-stripe-js@latest/dist/react-stripe.umd.min.js"></script>
```

> La [demo en CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) te permite probar Stripe.js para React sin la necesidad de crear un nuevo proyecto.

### Agrega Stripe.js y Elements a tu página

Para utilizar los componentes de Element, ajusta el componente de tu página de confirmación 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 el valor `Promise` devuelto en el 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() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutForm />
    </Elements>
  );
};

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

## Muestra el código QR de Pix con Stripe [Lado del cliente]

Crea un pago del lado del cliente con el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del `PaymentIntent`. El secreto de cliente es diferente de tus [claves API](https://docs.stripe.com/keys.md) que autentican solicitudes API Stripe. Gestiona el secreto de cliente cuidadosamente porque puede completar el cargo: no lo registres, no lo insertes en direcciones URL ni lo expongas a nadie excepto al cliente.

Llama a [stripe.confirmPixPayment](https://docs.stripe.com/js/payment_intents/confirm_pix_payment) para obtener el código QR que le permita a tu cliente completar su pago. Incluye una `return_url` para redirigir al cliente después de que efectúa el pago.

```javascript
var stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Redirects away from the client
const {error} = await stripe.confirmPixPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        tax_id: document.getElementById('tax-id').value,
      }
    },
    return_url: 'https://example.com/checkout/complete',
  }
);

if (error) {
  // Inform the customer that there was an error.
}
```

### Cómo gestionar el redireccionamiento

Cuando Stripe redirige al cliente a `return_url`, se proporcionan 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`. |

También puedes agregar tus propios parámetros de consulta al proporcionar la `return_url`. Estos se mantienen durante todo el proceso de redirección. La `return_url` debe corresponder a una página de tu sitio web que muestre el estado del pago. Debes verificar el estado del `PaymentIntent` al mostrar la página de retorno. Puedes hacerlo usando la función `retrievePaymentIntent` de Stripe.js y pasando el `payment_intent_client_secret`.

```javascript
(async () => {
  const url = new URL(window.location);
  const clientSecret = url.searchParams.get('payment_intent_client_secret');

  const {paymentIntent, error} = await stripe.retrievePaymentIntent(clientSecret);
  if (error) {
    // Handle error
  } else if (paymentIntent && paymentIntent.status === 'succeeded') {
    // Handle successful payment
  }
})();
```

## Optional: Muestra el código QR de Pix [Lado del cliente]

Te recomendamos que uses Stripe.js para mostrar los detalles de Pix con confirmPixPayment. No obstante, también puedes mostrar manualmente la cadena Pix y/o el código QR a tus clientes.

Especifica `handleActions: false` al llamar a stripe.confirmPixPayment en el paso 3 para manejar manualmente la siguiente acción de mostrar los datos de Pix a tu cliente.

```javascript
var form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const result = await stripe.confirmPixPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      // payment method details omitted for brevity
    },
    {
      handleActions: false
    }
  );

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  } else {
    // Pix details were successfully created
    const amount = result.paymentIntent.amount;
    const currency = result.paymentIntent.currency;
    const details = result.paymentIntent.next_action.pix_display_qr_code;
    // Pix string, also known as Pix “copy and paste”
    const emvString = details.data;
    // SVG image Pix QR code
    const imageUrlSvg = details.image_url_svg;
    // PNG image Pix QR code
    const imageUrlPng = details.image_url_png;
    // Pix expiration date as a unix timestamp
    const expires_at = details.expires_at;
    // Handle the next action by displaying the Pix details to your customer
    // You can also use the generated hosted instructions
    const hosted_instructions_url = details.hosted_instructions_url;
  }
});
```

Te sugerimos que muestres lo siguiente:

| Detalle                   | Descripción                                                                                                                                                                                                                                                                                                 |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Cadena de píxeles         | Muestra la cadena de Pix para que tus clientes la copien en su portapapeles usando la cadena [payment_intent.next_action.pix_display_qr_code.data](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-data) del PaymentIntent.                     |
| Código QR como imagen SVG | Muestra el código QR de Pix para que tus clientes lo escaneen con su teléfono usando la cadena [payment_intent.next_action.pix_display_qr_code.image_url_svg](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_svg) del PaymentIntent. |
| Código QR como imagen PNG | Muestra el código QR de Pix para que tus clientes lo escaneen con su teléfono usando la cadena [payment_intent.next_action.pix_display_qr_code.image_url_png](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_png) del PaymentIntent. |
| Fecha de vencimiento      | Muestra la fecha de vencimiento de Pix. Usa [payment_intent.next_action.pix_display_qr_code.expires_at](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-expires_at) para ver la fecha de vencimiento.                                           |

También puedes redirigir a los clientes a la página de instrucciones alojada por Stripe, que es similar al cuadro de diálogo abierto por `confirmPixPayment`. Usa [payment_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) para encontrar la URL de la página de instrucciones alojada en Stripe en el objeto PaymentIntent.

## Prueba tu integración

Para probar tu integración:

1. Selecciona Pix.
1. Introduce los datos del comprador y toca **Pagar**. En un entorno de prueba, puedes usar `000.000.000-00` como identificador fiscal de prueba (CPF o CNPJ).
1. Haz clic en **Simular escaneo** para abrir una página de pago de prueba de Pix alojada en Stripe. Desde esta página, puedes autorizar o caducar el pago de prueba.

En modo activo, el botón **Pagar** muestra un código QR de Pix. Necesitas una cuenta bancaria brasileña con Pix habilitado para completar o cancelar este flujo de pago.

También puedes establecer [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) en los siguientes valores para probar diferentes escenarios.

| Correo electrónico                             | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula un Pix que un cliente paga después de 3 minutos. El [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) llega aproximadamente después de 3 minutos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula un Pix que tu cliente paga de inmediato. El webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) llega en cuestión de segundos. En producción, este webhook llega inmediatamente después de que se paga el Pix.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `succeed_immediately@example.com`                                                                                                                            |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula un Pix que vence antes de que pague el cliente. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega en unos segundos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_immediately@example.com`                                                                                                                                                                                                   |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula un Pix que vence antes de que tu cliente lo pague. El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega aproximadamente después de 3 minutos.

  Stripe ignora los parámetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) y [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) en este caso.

  Ejemplo: `expire_with_delay@example.com`                                                                                                                                                                             |
| `{any_prefix}fill_never@{any_domain}`          | Simula un Pix que nunca se completa con éxito. Vence según el parámetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) o [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). El webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) llega una vez que finaliza la simulación.

  Ejemplo: `fill_never@example.com`                                                                                                                                                                                                                     |


## Fecha de vencimiento

Los códigos de Pix vencen después de la marca de tiempo UNIX `expires_at` especificada. Una vez que venzan el Pix, confirma el PaymentIntent con otro método de pago o cancélalo. Establece parámetros de vencimiento en las [opciones de métodos de pago](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix) en la clave `pix`.

Un cliente no puede pagar un Pix después de que caduque.

| Campo                   | Valor                                                                                                                                       | Valor predeterminado                            | Obligatorio | Ejemplo                                                                                                                                                                                                                          |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `expires_after_seconds` | La cantidad de segundos antes de que venza un pago pendiente con Pix. Los valores válidos van de 10 segundos a 259200 segundos (3 días)     | 14400 segundos (4 horas)                        | No          | Si confirmas un Pix el lunes a las 14:00 y estableces `expires_after_seconds` en 600, el Pix vencerá el lunes a las 14:10. Ten en cuenta que la hora de inicio no es cuando se crea el `PaymentIntent`, sino cuando se confirma. |
| `expires_at`            | Una marca de tiempo de Unix que muestra cuándo vence el pago pendiente de Pix. Los valores válidos van de 10 segundos a 3 días en el futuro | El valor predeterminado es 4 horas en el futuro | No          | Si creas un Pix el lunes a las 14:00 y estableces `expires_at` en 2 días en el futuro, el Pix vence el miércoles a las 14:00                                                                                                     |

`expires_after_seconds` y `expires_at` no están incluidos. Se produce un error si ambos se establecen. Los dos son también opcionales y, si no se establece ninguno de ellos, el vencimiento predeterminado es 4 horas desde la confirmación del `PaymentIntent`.

> El valor devuelto en `expires_at` de la respuesta `next_action` es el mismo que el valor de entrada establecido en [payment_method_options.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at). Sin embargo, en escenarios reales, la marca de tiempo de vencimiento real podría diferir. Esta variación no afecta la experiencia de pago de tus clientes con Pix, pero se recomienda confiar en el evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?event_types-payment_intent.payment_failed) para considerar si la intención de pago venció.

## Cancelación

Para cancelar los pagos de Pix antes de que venzan, [cancela el PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) asociado con el pago de Pix.