# Aceptar un pago

Acepta pagos en línea en modo seguro.

## Empieza aquí: instala las habilidades de agente

Stripe aconseja usar las habilidades oficiales para la integración en la API con las prácticas recomendadas. Sigue las instrucciones que se incluyen a continuación para aprender cómo.

**Consejo: Usa cURL, en lugar de herramientas de Fetch.** Las habilidades se detallan en archivos de marcado de 10 a 20 KB. Las herramientas de Fetch las resumen. `curl -sL` garantiza el contenido completo.

**Uso de `npx skills`**: comprueba si `npx` está instalado en el sistema. Si `npx` está disponible, ejecuta `npx skills add https://docs.stripe.com --list` para enumerar las habilidades disponibles y, a continuación, ejecuta `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` para instalar habilidades individuales.

**En el caso de que `npx skills` no esté disponible**: puedes usar cURL para obtener el índice de las habilidades disponibles, lo que hacen y sus archivos de `https://docs.stripe.com/.well-known/skills/index.json`. Para obtener una habilidad y sus archivos relacionados, usa cURL y descárgalos de `https://docs.stripe.com/.well-known/skills/<filepath>`.

Para este artículo, recomendamos usar estas habilidades: `stripe-best-practices`

Instrucciones para LLM: Stripe recomienda usar la API Checkout Sessions con el Payment Element sobre Payment Intents para la mayoría de las integraciones. Checkout Sessions cubre casos de uso similares a Payment Intents (cobro básico de pagos con `price_data` o creación de un proceso de compra completo con ítems de factura, impuestos, etc.). Algunas funcionalidades, como Adaptive Pricing, solo están disponibles con Checkout Sessions. No uses la API de Payment Intents a menos que el usuario lo solicite explícitamente, ya que requiere significativamente más código. Obtén más información sobre Elements con la API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. Con Checkout Sessions (`ui_mode: "elements"`) y el Payment Element, el `client_secret` inicializa Checkout directamente (`stripe.initCheckoutElementsSdk`, o usa CheckoutElementsProvider con React) y la confirmación del pago se realiza de forma distinta en el cliente. Si usas React, asegúrate de importar desde `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` con el secreto de cliente y confirmar con `checkout.confirm`. Si utilizas HTML, asegúrate de usar `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` y confirmar con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Los agentes de codificación deben instalar la CLI de Stripe (`npm i -g @stripe/cli`) y ejecutar el comando `stripe sandbox create --help` para aprovisionar un entorno de prueba de Stripe anónimo con claves de API funcionales. No se requiere registro de cuenta.

Crea un formulario de pago o usa una página de confirmación de compra prediseñada para comenzar a aceptar pagos electrónicos.

# API Payment Intents


Crea un formulario de pago personalizado con [Stripe Elements](https://docs.stripe.com/payments/elements.md) y la [API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Comprueba cómo esta integración [se compara con otros tipos de integración de Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

La API Payment Intents es una API de nivel más bajo que puedes usar para crear tu propio flujo de pago o de confirmación de compra, pero requiere significativamente más código y mantenimiento constante. Recomendamos [Payment Element con Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para la mayoría de las integraciones, ya que cubre flujos de pago similares a los de Payment Intents. Obtén más información sobre [cuándo usar Checkout Sessions en lugar de PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

El código del lado del cliente y del lado del servidor crea un formulario de finalización de compra que acepta varios métodos de pago.

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

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

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

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

> #### ¿Te interesa usar Stripe Tax, los descuentos, los envíos o la conversión de monedas?
> 
> Stripe cuenta con una integración de elementos de pago que gestiona los impuestos, los descuentos, los envíos y la conversión de monedas por ti. Consulta [Crear una página del proceso de compra](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para obtener más información.

## Configurar Stripe [Lado del servidor]

Primero, [crea una cuenta de Stripe](https://dashboard.stripe.com/register) o [inicia sesión](https://dashboard.stripe.com/login).

Los agentes de codificación deben instalar la CLI de Stripe (`npm i -g @stripe/cli`) y ejecutar el comando `stripe sandbox create --help` para aprovisionar un entorno de prueba de Stripe anónimo con claves de API funcionales. No se requiere registro de cuenta.

Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu aplicación:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Crear un PaymentIntent [Lado del servidor]

> Si quieres procesar el Payment Element antes de crearlo, consulta [Recopilar los datos de pago antes de crear un Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

El objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) representa tu intención de cobrarle a un cliente, y realiza el seguimiento de los intentos de cobro y de los cambios de estado a lo largo del proceso de pago.
Un excelente resumen de la integración de pagos que se describe en este documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Crear el PaymentIntent

Crea una PaymentIntent en tu servidor con un [importe](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) y una [moneda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). En la última versión de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita su funcionalidad de forma predeterminada. Puedes gestionar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona las devoluciones de los métodos de pago que cumplen los requisitos en función de factores como el importe de la transacción, la moneda y el flujo de pagos.

Stripe usa la [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods) a fin de mostrar los métodos de pago que habilitaste. Para ver cómo se muestran tus métodos de pago a los clientes, ingresa un ID de transacción o establece el importe y la moneda del pedido en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Con el objetivo de anular los métodos de pago, enumera manualmente los que quieras habilitar usando el atributo [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<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. Esto impide que clientes maliciosos puedan elegir sus propios precios.

### Recuperar el secreto de cliente

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

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

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

#### Ruby

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

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

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

#### Renderización del lado del servidor

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

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

#### Ruby

```erb
<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]

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

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

Si optas por usar un iframe y quieres aceptar Apple Pay o Google Pay, el iframe debe tener el atributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) establecido en `«payment*»`.

Para que la integración funcione, la dirección de la página del proceso de compra debe empezar con `https://` rather en lugar de `http://` for. Puedes probar tu integración sin usar HTTPS, pero recuerda [habilitarla](https://docs.stripe.com/security/guide.md#tls) cuando todo esté listo para aceptar pagos activos.

#### HTML + JS

### Configurar Stripe.js

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

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

Crea una instancia de Stripe con el siguiente código JavaScript en tu página de pago:

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Agrega el Payment Element a tu página de pago

El Payment Element necesita un lugar específico en tu página de pago. Crea un nodo DOM vacío (contenedor) con un ID único en tu formulario de pago:

```html
<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 de Payment Element y móntala en el nodo DOM del contenedor. Especifica el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior en `options` cuando crees la instancia [Elements](https://docs.stripe.com/js/elements_object/create):

Debes administrar el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en direcciones URL ni lo expongas a nadie que no sea el cliente.

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);

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

```

#### React

### Configurar Stripe.js

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

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

### Agrega y configura el proveedor Elements en tu página de pago

Para usar el componente Payment Element, envuelve el componente de tu página de confirmación de compra con un [proveedor Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y especifica el valor `Promise` devuelto en el proveedor `Elements`. También debes especificar el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del paso anterior como `options` al proveedor `Elements`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<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'));
```

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

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

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

### Personaliza el aspecto

Personaliza el Payment Element para que coincida con el diseño de tu sitio especificando el [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) en `options` al crear el proveedor `Elements`.

### Recopila las direcciones

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

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

### Solicita un token de comerciante de Apple Pay

Si configuraste tu integración para [aceptar pagos de Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), te recomendamos que configures la interfaz Apple Pay que devuelva un token de comercio, lo que permite habilitar transacciones iniciadas por el comercio (MIT). [Solicita el tipo de token de comercio correspondiente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) en el Payment Element.

## Optional: Guardar y recuperar métodos de pago del cliente

Puedes configurar el Payment Element para guardar los métodos de pago de tu cliente para uso futuro. En esta sección, se muestra cómo integrar la [función de métodos de pago guardados](https://docs.stripe.com/payments/save-customer-payment-methods.md), que permite que el Payment Element realice lo siguiente:

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

Guardar métodos de pago.
![El Payment Element con un método de pago guardado seleccionado](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Reutiliza un método de pago guardado previamente.

### Cómo habilitar la función para guardar el método de pago en el Payment Element

Al crear un [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) que proporcione el ID del cliente (usando `customer` para un objeto `Customer` o `customer_account` para un objeto `Account` configurado por el cliente) y habilitando el componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) para tu sesión. Configura qué [funcionalidades](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) de métodos de pago guardados 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 su uso futuro.

Puedes especificar `setup_future_usage` en una PaymentIntent o sesión de Checkout para anular el comportamiento predeterminado para guardar métodos de pago. Esto garantiza que guardes automáticamente el método de pago para uso futuro, incluso si el cliente no elige guardarlo explícitamente. Si tienes la intención de especificar `setup_future_usage`, no establezcas `payment_method_save_usage` en la misma transacción porque esto causa un error de integración.

> #### Usa la API Accounts v2 para representar a los clientes
> 
> La API Accounts v2 suele estar disponible para usuarios Connect y en versión preliminar pública para otros usuarios de Stripe. Si eres parte de la versión preliminar Accounts v2, debes especificar una [versión preliminar](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) en tu código.
> 
> Para solicitar el acceso a la versión preliminar Accounts v2, 
> 
> Para la mayoría de los casos de uso, te recomendamos que[modeles a tus clientes como objetos Account configurados por el cliente](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) en lugar de usar objetos [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts&nbsp;v2

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_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
```

#### Customers&nbsp;v1

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.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 = client.v1.customer_sessions.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Tu instancia de Elements utiliza el *secreto de cliente* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) de CustomerSession para acceder a los métodos de pago guardados de ese cliente. [Gestiona errores](https://docs.stripe.com/error-handling.md) correctamente al crear la CustomerSession. Si se produce un error, no es necesario que proporciones el secreto de cliente de CustomerSession a la instancia de Elements, ya que es opcional.

Crea la instancia de Elements utilizando los secretos de cliente tanto para PaymentIntent como para CustomerSession. Luego, usa esta instancia de Elements para crear un Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

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

Al confirmar el PaymentIntent, Stripe.js controla automáticamente la configuración de [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) en el PaymentIntent y [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) en el PaymentMethod, dependiendo de si el cliente marcó la casilla para guardar sus datos de pago.

### Exigir la recopilación del CVC

Opcionalmente, especifica `require_cvc_recollection` [al crear el PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) para cumplir con la recopilación del CVC cuando un cliente está pagando con tarjeta.

### Cómo detectar la selección de un método de pago guardado

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

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

## Optional: Link in your checkout page [Lado del cliente]

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

Recopila una dirección de correo electrónico del cliente para la autenticación o la inscripción en Link

### Opciones de integración

Hay dos formas de integrar Link con el elemento Payment. De estas, Stripe recomienda pasar una dirección de correo electrónico del cliente al elemento Payment si está disponible. Recuerda tener en cuenta cómo funciona tu flujo de compra al decidir entre estas opciones:

| Opción de integración                                                                  | Flujo de compra                                                                                                                                                                                                                                | Descripción                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Pasa la dirección de correo electrónico de un cliente al Payment Element (Recomendado) | - Tu cliente introduce su dirección de correo electrónico antes de llegar a la página de finalización de compra (en un paso de creación de cuenta anterior, por ejemplo).
  - Prefieres usar tu propio campo de entrada de correo electrónico. | Establece mediante programación una dirección de correo electrónico del cliente en el elemento Payment. En este escenario, un cliente se autentica en Link directamente en el formulario de pago, no en un componente de interfaz de usuario (IU) por separado. |
| Recopilar una dirección de correo electrónico de un cliente en el Payment Element      | - Tus clientes pueden elegir introducir su correo electrónico y autenticarse o inscribirse con Link directamente en el elemento Payment durante el proceso de confirmación de compra.
  - No requiere(n) programación.                         | Si un cliente no se inscribió en Link y elige un método de pago admitido en el elemento Payment, se le pedirá que guarde sus datos a través de Link. Para los que ya se inscribieron, Link completa automáticamente la información de pago.                     |

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

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

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

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

Es posible que quieras actualizar los atributos en el PaymentIntent después de renderizar el Payment Element, como el [importe](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (por ejemplo, códigos de descuento o costos de envío). Puedes [actualizar el PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) en tu servidor y luego llamar a [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) para ver el nuevo importe reflejado en el Payment Element. Este ejemplo muestra cómo crear el punto de conexión del servidor que actualiza el importe en el PaymentIntent:

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

Este ejemplo ilustra cómo actualizar la interfaz de usuario para que estos cambios se vean del lado del cliente:

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

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

Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para completar el pago con los datos del Payment Element. Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar a dónde Stripe debe redirigir al usuario después de completar el pago. Es posible que primero se redirija al usuario a un sitio intermedio, como una página de autorización del banco y, luego, a la`return_url`. Los pagos con tarjeta redirigen inmediatamente a la `return_url` cuando un pago se realiza correctamente.

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

#### HTML + JS

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Para llamar a [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) desde el componente del formulario de pago, usa los hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) y [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Si prefieres componentes de clase tradicionales en lugar de hooks, puedes usar un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

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

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

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

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }
const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <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 rastrean la sesión del navegador del cliente, es posible que debas agregar el dominio `stripe.com` a la lista de exclusión de referentes. Los redireccionamientos hacen que algunas herramientas creen nuevas sesiones, lo que te impide realizar un seguimiento de la sesión completa.

Usa uno de los parámetros de consulta para recuperar el PaymentIntent. Examina el [estado del PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) para decidir qué mostrarás a tus clientes. También puedes adjuntar tus propios parámetros de consulta cuando proporciones la `return_url`, que se mantendrán durante el proceso de redireccionamiento.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<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;
```

## Gestionar eventos posteriores al pago [Lado del servidor]

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

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. De su lado, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada, y clientes malintencionados podrían manipular la respuesta. Si configuras tu integración para escuchar eventos asincrónicos, podrás aceptar [diferentes tipos de métodos de pago](https://stripe.com/payments/payment-methods-guide) con una sola integración.

Además de administrar el evento `payment_intent.succeeded`, recomendamos administrar estos otros eventos si se cobran pagos con el Payment Element:

| Evento                                                                                                                          | Descripción                                                                                                                                                                                                                                                    | Acción                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Se envía cuando un cliente completa correctamente un pago.                                                                                                                                                                                                     | Envía al cliente una confirmación del pedido y *completa* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) el pedido.   |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Se envía cuando un cliente inicia con éxito un pago, pero éste aún no se completó. Este evento se envía normalmente cuando el cliente inicia un débito bancario. Le sigue un evento `payment_intent.succeeded` o `payment_intent.payment_failed` en el futuro. | Envía al cliente una confirmación del pedido que indique que el pago está pendiente. En caso de productos digitales, quizá te convenga completar el pedido antes de esperar que se complete el pago. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado cuando un cliente intenta un pago, pero el pago falla.                                                                                                                                                                                                 | Si un pago pasa de `processing` a `payment_failed`, ofrécele al cliente otro intento de pago.                                                                                                        |

## Prueba tu integración

Para probar tu integración de pagos personalizados:

1. Crea una intención de pago y recupera el secreto del cliente.
2. Completa los datos del pago con un método de la siguiente tabla.
   - Ingresa una fecha futura como fecha de vencimiento.
   - Ingresa cualquier número de 3 dígitos como CVC.
   - Ingresa un código postal de facturación.
3. Envía el pago a Stripe. Se te redirigirá a tu `return_url`.
4. Ve al Dashboard y busca el pago en la [página Transacciones](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Si tu pago se realizó correctamente, lo verás en esa lista.
5. Haz clic en el pago para ver más detalles, como la información de facturación y la lista de artículos comprados. Puedes usar esta información para completar el pedido.

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

#### Tarjetas

| Número de tarjeta   | Escenario                                                                                                                                                                                                                                                                                       | Cómo hacer la prueba                                                                                                                   |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | El pago con tarjeta se efectúa correctamente y no requiere autenticación.                                                                                                                                                                                                                       | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. |
| 4000002500003155    | El pago con tarjeta requiere *autenticación* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. |
| 4000000000009995    | La tarjeta es rechazada con un código de rechazo `insufficient_funds`.                                                                                                                                                                                                                          | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. |
| 6205500000000000004 | La tarjeta UnionPay puede tener entre 13 y 19 dígitos.                                                                                                                                                                                                                                          | Completa el formulario de tarjeta de crédito con el número de tarjeta de crédito y la fecha de vencimiento, el CVC o el código postal. |

#### Billeteras

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

#### Redireccionamientos bancarios

| Método de pago                      | Escenario                                                                                                                                                                                                            | Cómo hacer la prueba                                                                                                                                                                                   |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Débito directo BECS                 | Tu cliente paga satisfactoriamente con débito directo BECS.                                                                                                                                                          | Completa el formulario con el número de cuenta `900123456` y BSB `000000`. El PaymentIntent confirmado pasa en un principio al estado `processing` y, 3 minutos más tarde, a `succeeded`.              |
| Débito directo BECS                 | El pago de tu cliente falla con un código de error `account_closed`.                                                                                                                                                 | Completa el formulario con el número de cuenta `111111113` y BSB `000000`.                                                                                                                             |
| Bancontact, EPS, iDEAL y Przelewy24 | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación inmediata.                                                               | Elige cualquier método de pago basado en redireccionamiento, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento. |
| Pay by Bank                         | Tu cliente paga satisfactoriamente con un método de pago basado en redireccionamiento y con [notificación diferida](https://docs.stripe.com/payments/payment-methods.md#payment-notification).                       | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Completar el pago de prueba** en la página de redireccionamiento.                                    |
| Pay by Bank                         | Tu cliente no pasa la autenticación en la página de redireccionamiento de un método de pago basado en redireccionamiento y con notificación diferida.                                                                | Elige el método de pago, completa los datos solicitados y confirma el pago. Luego, haz click en **Error en el pago de prueba** en la página de redireccionamiento.                                     |
| BLIK                                | Los pagos BLIK generan errores de varias maneras: errores inmediatos (por ejemplo, el código venció o no es válido), errores demorados (el banco lo rechaza) o tiempos de espera (el cliente no respondió a tiempo). | Usa patrones de correo electrónico para [simular los diferentes errores.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                 |

#### Débitos bancarios

| Método de pago      | Escenario                                                                                     | Cómo hacer la prueba                                                                                                                                                                   |
| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Débito directo SEPA | Tu cliente paga satisfactoriamente con débito directo SEPA.                                   | Completa el formulario con el número de cuenta `AT321904300235473204`. El PaymentIntent confirmado pasa inicialmente al estado “en proceso” y, tres minutos más tarde, a “completado”. |
| Débito directo SEPA | El estado del intento de pago de tu cliente pasa de `processing` a `requires_payment_method`. | Completa el formulario con el número de cuenta `AT861904300235473202`.                                                                                                                 |

#### Vales

| Método de pago | Escenario                                  | Cómo hacer la prueba                                                                                     |
| -------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------- |
| Boleto, OXXO   | Tu cliente paga con un vale Boleto u OXXO. | Selecciona Boleto u OXXO como método de pago y envía el pago. Cierra el diálogo después de que aparezca. |

Consulta [Pruebas](https://docs.stripe.com/testing.md) para obtener información adicional para probar tu integración.

## Optional: Agregar más métodos de pago

El Payment Element [admite muchos métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) de forma predeterminada. Tienes que tomar medidas adicionales para habilitar y mostrar algunos métodos de pago.

### Affirm

Para comenzar a usar Affirm, debes habilitarlo en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Al crear un PaymentIntent con el método de pago Affirm, debes incluir una [dirección de envío](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Este ejemplo sugiere especificar la información de envío del cliente después de que el cliente [seleccione su método de pago](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Obtén más información sobre cómo usar [Affirm](https://docs.stripe.com/payments/affirm.md) con Stripe.

#### HTML + JS

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

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

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's an immediate error when
    // confirming the payment. Show error to your customer (for example,
    // payment details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

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

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

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example,
      // payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default CheckoutForm;
```

#### Probar Affirm

Obtén información sobre cómo probar diferentes escenarios con la siguiente tabla:

| Escenario                                                                         | Cómo hacer la prueba                                                                                     |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Tu cliente efectúa correctamente un pago con Affirm.                              | Completa el formulario (asegúrate de incluir una dirección de envío) y autentica el pago.                |
| Tu cliente no pasa la autenticación en la página de redireccionamiento de Affirm. | Completa el formulario y haz click en **Error en el pago de prueba** en la página de redireccionamiento. |

### Afterpay (Clearpay)

Al crear un PaymentIntent con el método de pago Afterpay, necesitas incluir una [dirección de envío](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Obtén más información sobre cómo usar [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) con Stripe.

Puedes administrar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona la devolución de los métodos de pago que cumplen con los requisitos establecidos en factores como el monto de la transacción, las monedas y el flujo de pago. En la versión más reciente de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita sus funcionalidades de forma predeterminada. Asegúrate de habilitar Afterpay y 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"
```

#### Probar Afterpay (Clearpay)

Obtén información sobre cómo probar diferentes escenarios con la siguiente tabla:

| Escenario                                                                           | Cómo hacer la prueba                                                                                     |
| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Tu cliente efectúa correctamente un pago con Afterpay.                              | Completa el formulario (asegúrate de incluir una dirección de envío) y autentica el pago.                |
| Tu cliente no pasa la autenticación en la página de redireccionamiento de Afterpay. | Completa el formulario y haz click en **Error en el pago de prueba** en la página de redireccionamiento. |

### Apple Pay y Google Pay

Cuando [habilitas pagos con tarjeta](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), mostramos Apple Pay y Google Pay para los clientes cuyo entorno cumple con las [condiciones de visualización de la cartera](https://docs.stripe.com/testing/wallets.md). Para aceptar pagos de estas carteras, también debes realizar lo siguiente:

- Habilítalos en tu [configuración de métodos de pago](https://dashboard.stripe.com/settings/payment_methods). Apple Pay está habilitado de forma predeterminada.
- Entrega el contenido de tu aplicación a través de HTTPS durante el desarrollo y la producción.
- [Registra tu dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Obtén actualizaciones del servidor](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) si actualizas el importe de un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para mantener sincronizado el cuadro de diálogo de pago de la cartera.

> #### Pruebas regionales
> 
> Stripe Elements no es compatible con Google Pay o Apple Pay para cuentas y clientes de Stripe en la India. Por lo tanto, no puedes probar tu integración de Google Pay o Apple Pay si la dirección IP de quien realiza la prueba es de la India, incluso si la cuenta de Stripe está establecida fuera de la India.

Obtén más información sobre cómo usar [Apple Pay](https://docs.stripe.com/apple-pay.md) y [Google Pay](https://docs.stripe.com/google-pay.md) con Stripe.

### Débito directo ACH

Al usar el Payment Element con débito directo ACH como método de pago, sigue estos pasos:

1. Crea un objeto [Cuenta](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) configurado por el cliente o un objeto [Cliente](https://docs.stripe.com/api/customers/create.md) para representar a tu cliente.

#### Accounts v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Customers v1

```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 "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### Customers v1

   ```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 setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. Selecciona un [método de verificación](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Cuando uses el método de pago de débito directo ACH con el elemento de pago, solo podrás seleccionar `automatic` o `instant`.

Obtén más información sobre cómo usar el [débito directo ACH](https://docs.stripe.com/payments/ach-direct-debit.md) con Stripe.

#### Probar el débito directo ACH

| Escenario                                                                                                        | Cómo hacer la prueba                                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU mediante la verificación instantánea. | Selecciona **Cuenta bancaria de EE. UU.** y completa el formulario. Haz click en la entidad de prueba. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Haz click en el botón de pago.                                                                                                                                                                                  |
| Tu cliente efectúa correctamente el pago con una cuenta bancaria de EE. UU usando microdepósitos.                | Selecciona **Cuenta bancaria de EE.&nbsp;UU.** y completa el formulario. Haz clic en **Ingresar datos bancarios manualmente**. Sigue las instrucciones del cuadro de diálogo para vincular tu cuenta bancaria. Puedes usar estos [números de cuenta de prueba](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 la cuenta bancaria.                                          | Selecciona **Cuenta bancaria de EE. UU.** y haz click en la entidad de prueba o en **Ingresar datos bancarios manualmente**. Cierra el cuadro de diálogo sin completarlo.                                                                                                                                                                                                                              |

### BLIK

Al usar el Payment Element con BLIK, el usuario puede cerrar el cuadro de diálogo modal en el que se le solicita que autorice el pago en su aplicación bancaria. Esta acción activa un redireccionamiento a tu `return_url` y no devuelve al usuario a la página de finalización de compra. Obtén más información sobre cómo usar [BLIK](https://docs.stripe.com/payments/blik.md) con Stripe.

Para gestionar casos en que los usuarios cierran el cuadro de diálogo, inspecciona el `status` del Payment Intent en el controlador del lado del servidor de tu `return_url` para verificar si pasó a `succeeded` o todavía está en estado `requires_action` (lo que significa que el usuario o la usuaria cerró el cuadro de diálogo sin autorización), gestionando cada caso según sea necesario.

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

Al usar el Payment Element con un método de pago basado en código QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), el usuario puede cerrar el cuadro de diálogo modal del código QR. Como consecuencia, se desencadena un redireccionamiento a tu `return_url` y no devuelve al usuario a la página de finalización de compra.

Para gestionar los casos en que los usuarios cierran los cuadros de diálogo modales de los códigos QR, inspecciona el `status` del Payment Intent en el controlador del lado del servidor de tu `return_url` para comprobar si es `succeeded` o sigue siendo `requires_action` (lo que significa que el usuario cerró el cuadro de diálogo modal sin haber pagado). Esta inspección permite gestionar cada caso según sea necesario.

Como alternativa, evita el redireccionamiento automático a tu `return_url` al pasar el parámetro avanzado opcional [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), que evita el redireccionamiento cuando se cierra un cuadro de diálogo modal de código QR.

### Cash App Pay

El Payment Element renderiza un formulario dinámico de manera diferente en la web de escritorio o en la web móvil, ya que utiliza diferentes métodos de autenticación de clientes. Obtén más información sobre cómo usar [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) con Stripe.

#### Elemento de aplicación web móvil

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

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

Cash App Pay es un método de pago de código QR en la web de escritorio, donde Payment Element renderiza un cuadro de diálogo de código QR. Su cliente necesita escanear el código QR con una aplicación de escaneo de código QR o la aplicación móvil Cash App.

En el modo activo, se redirige al cliente a la `return_url` apenas se lo redirige a la aplicación Cash. En entornos de prueba, pueden aprobar o rechazar el pago antes de ser redirigidos a la `return_url`. Los clientes también pueden cerrar el cuadro de diálogo del código QR antes de completar el pago, lo que activa un redireccionamiento a tu `return_url`.

Asegúrate de que la `return_url` corresponda a una página de tu sitio web para inspeccionar el `status` del Payment Intent. El `status` del Payment Intent puede ser `succeeded`, `failed` o `requires_action` (por ejemplo, el cliente ha cerrado el cuadro de diálogo sin escanear el código QR).

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

### PayPal

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

## Cuéntales a tus clientes qué es Stripe

Stripe recopila información sobre las interacciones de los clientes con Elements para proporcionarte servicios, mejorarlos y prevenir el fraude. Esto incluye el uso de cookies y direcciones IP para identificar qué Elements vio un cliente durante una sola sesión de finalización de compra. Tienes la responsabilidad de divulgar y obtener todos los derechos y consentimientos necesarios para que Stripe use los datos para dichos fines. Si deseas obtener más información, visita nuestro [centro de privacidad](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).

## See also

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Configurar pagos futuros](https://docs.stripe.com/payments/save-and-reuse.md)
- [Guardar los datos de pago durante el pago](https://docs.stripe.com/payments/save-during-payment.md)
- [Calcula el impuesto sobre las ventas, GST e IVA en tu flujo de pago](https://docs.stripe.com/tax/standalone-tax-api.md)