# Acepta un pago de Afterpay o Clearpay

Descubre cómo aceptar Afterpay (también conocido como Clearpay en Reino Unido), un método de pago en EE. UU., CA, Reino Unido, AU y NZ.

> Stripe puede presentar automáticamente los métodos de pago pertinentes a tus clientes evaluando la moneda, las restricciones de los métodos de pago y otros parámetros.
> 
> - Sigue la guía [Aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) para crear una integración de Checkout que utilice [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).
- Si no quieres utilizar métodos de pago dinámicos, sigue los pasos que se indican a continuación para configurar manualmente los métodos de pago en tu integración de Checkout.

Afterpay es un método de pago [de uso único](https://docs.stripe.com/payments/payment-methods.md#usage) y de [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification) que requiere que el cliente [autentique](https://docs.stripe.com/payments/payment-methods.md#customer-actions) su pago. Se redirige a los clientes al sitio web de Afterpay, donde aceptan las condiciones del plan de pago en cuotas. Cuando el cliente acepta las condiciones, Afterpay se asegura de que los fondos estén disponibles para el cliente y transfiere los fondos a tu cuenta de Stripe. El cliente paga a Afterpay directamente a lo largo del tiempo.

> Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods).

## Determina la compatibilidad

**Ubicación geográfica del cliente**: Australia, Canada, New Zealand, UK, US

**Divisas aceptadas**: `aud, cad, nzd, gbp, usd`

**Divisas de pago**: `aud, cad, nzd, gbp, usd`

**Modo de pago**: Yes

**Modo de configuración**: No

**Modo de suscripción**: No

Una sesión de Checkout debe cumplir con todas las condiciones para aceptar pagos con Afterpay:

- Solo puedes utilizar partidas puntuales (no se aceptan 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).
- Debes expresar los *Prices* (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) en tu divisa nacional.

## Aceptar un pago

> Esta guía se basa en la integración fundamental de [aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted) en Checkout.

Esta guía te explica cómo habilitar Afterpay y muestra las diferencias entre aceptar pagos mediante métodos de pago dinámicos y configurar manualmente los métodos de pago.

### Habilitar Afterpay como método de pago

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

1. Añadir `afterpay_clearpay` a la lista de `payment_method_types`.
1. Asegúrate de que todos tus `line_items` utilicen tu divisa nacional y de que el importe total no supere los [límites de importe de las transacciones](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay.
1. Opcionalmente, especifica en qué países Checkout permite realizar envíos a través de `shipping_address_collection[allowed_countries]`.

#### 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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  -d "shipping_address_collection[allowed_countries][0]=AU" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_address_collection[allowed_countries][2]=GB" \
  -d "shipping_address_collection[allowed_countries][3]=NZ" \
  -d "shipping_address_collection[allowed_countries][4]=US" \
  --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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "shipping_address_collection[allowed_countries][0]=AU" \
  -d "shipping_address_collection[allowed_countries][1]=CA" \
  -d "shipping_address_collection[allowed_countries][2]=GB" \
  -d "shipping_address_collection[allowed_countries][3]=NZ" \
  -d "shipping_address_collection[allowed_countries][4]=US" \
  -d ui_mode=embedded_page
```

Si no quieres recopilar las direcciones de envío con Checkout, también puedes proporcionar la dirección de envío con `payment_intent_data[shipping]`. Hacerlo ayuda a mejorar las tasas de aceptación de préstamos.

#### 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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --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]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=afterpay_clearpay" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Completa tus pedidos

[Usa un método como los webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) para gestionar la *ejecución* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) del pedido, en lugar de esperar a que tu cliente vuelva a la página de estado del pago.

Los siguientes eventos se envían cuando el estado del pago cambia:

| Nombre del evento                                                                                                      | Descripción                                                                                                                            | Próximos pasos                                                                 |
| ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)       | El cliente ha autorizado correctamente el pago al enviar el formulario del proceso de finalización de compra.                          | Esperar hasta asegurarte de si el pago se ha realizado correctamente o no.     |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)           | El pago del cliente se ha efectuado satisfactoriamente. El `PaymentIntent` pasa a `succeeded`.                                         | Suministrar los bienes o servicios que el cliente ha comprado.                 |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) | Se ha rechazado el pago del cliente o ha fallado por alguna otra razón. El `PaymentIntent` vuelve al estado `requires_payment_method`. | Enviar un correo electrónico al cliente para pedirle que haga un nuevo pedido. |

Obtén más información sobre [completar pedidos](https://docs.stripe.com/checkout/fulfillment.md).

## Prueba tu integración

Al probar tu integración de Checkout, selecciona Afterpay como método de pago y haz clic en el botón **Pagar**.

Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de `requires_action` a `succeeded`.

Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en **Error en el pago en modo de prueba**. El PaymentIntent pasará de `requires_action` a `requires_payment_method`.

Para la [captura manual](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture) de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.

## Pagos fallidos

Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).

Siempre debes presentar más opciones de pago como `card` en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

Para un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de Afterpay con un estado de `requires_action`, los clientes deben efectivizar el pago en el transcurso de las 3&nbsp;horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3&nbsp;horas, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto del [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.

## Códigos de error

Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:

| Código de error                          | Acción recomendada                                                                                                                                                                                                                                              |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Un error genérico que indica que el pago con Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo.                                                                                                          |
| `payment_method_provider_decline`        | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información.                                                                                                                          |
| `payment_intent_payment_attempt_expired` | El cliente no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. |
| `payment_method_not_available`           | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde.                                                                                                                                |
| `amount_too_small`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |
| `amount_too_large`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |

## See also

- [Más información sobre Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md)
- [Cumplimiento de Checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personaliza Checkout](https://docs.stripe.com/payments/checkout/customization.md)

# API Checkout Sessions

> This is a API Checkout Sessions for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=elements&api-integration=checkout.

Para determinar qué API se adapta mejor a las necesidades de tu empresa, consulta la [guía comparativa](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Usa el [Payment Element](https://docs.stripe.com/payments/payment-element.md) para integrar un formulario de pago de Stripe personalizado en tu sitio web o aplicación y ofrecer métodos de pago a los clientes. Para obtener información sobre configuraciones y personalizaciones avanzadas, consulta la guía de integración [Cómo aceptar pagos](https://docs.stripe.com/payments/accept-a-payment.md).

## Determina la compatibilidad

**Ubicación geográfica del cliente**: Australia, Canada, New Zealand, UK, US

**Divisas aceptadas**: `aud, cad, nzd, gbp, usd`

**Divisas de pago**: `aud, cad, nzd, gbp, usd`

**Modo de pago**: Yes

**Modo de configuración**: No

**Modo de suscripción**: No

Una sesión de Checkout debe cumplir con todas las condiciones para aceptar pagos con Afterpay:

- Solo puedes utilizar partidas puntuales (no se aceptan 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).
- Debes expresar los *Prices* (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) en tu divisa nacional.

## Configura el servidor [Lado del servidor]

Utiliza las bibliotecas oficiales de Stripe para acceder a la API desde tu aplicación.

#### Ruby

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

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

## Crea una sesión de Checkout [Lado del servidor]

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

Recomendamos utilizar [métodos de pago dinámicos](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) para mostrar de forma dinámica los métodos de pago elegibles más relevantes para cada cliente y maximizar así la conversión. También puedes [enumerar manualmente los métodos de pago](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), lo que desactiva los métodos de pago dinámicos.

#### Gestiona métodos de pago desde el Dashboard

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

#### Enumera los métodos de pago de forma manual

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['afterpay_clearpay'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## Configura el front-end [Lado del cliente]

#### HTML + JS

Incluye la secuencia de comandos de Stripe.js en tu página de Checkout al añadirlo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas la secuencia de comandos en un paquete ni alojes una copia en tus sistemas.

Asegúrate de tener la última versión de Stripe incluyendo la siguiente etiqueta de script `<script src=“https://js.stripe.com/dahlia/stripe.js”></script>`. Obtén más información sobre [las versiones de Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe proporciona un paquete npm que puedes usar para cargar Stripe.js como módulo. Consulta el [proyecto en GitHub](https://github.com/stripe/stripe-js). Se requiere la versión [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o posterior.

Inicializa stripe.js.

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

#### React

Instala [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) y el [cargador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) del registro público NPM. Necesitas al menos la versión 5.0.0 para React Stripe.js y la versión 8.0.0 para el cargador Stripe.js.

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

Inicia una instancia `stripe` en tu front-end con tu clave publicable.

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

## Iniciar proceso de compra [Lado del cliente]

#### HTML + JS

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

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

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

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

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

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

Envuelve tu solicitud de acceso con el componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), especificando `clientSecret` y la instancia `Stripe`.

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

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

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

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

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

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

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

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

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

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

#### HTML + JS

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

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

Como alternativa, puedes:

- Especifica el [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), la [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Account` configurada por cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Customer`) al crear la sesión Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
- Especificar un correo electrónico que ya hayas validado en [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

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

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

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

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

Como alternativa, puedes:

- Especifica el [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), la [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Account` configurada por cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos `Customer`) al crear la sesión Checkout. Stripe valida los correos electrónicos proporcionados de esta manera.
- Especificar un correo electrónico que ya validaste en la [confirmación](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

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

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

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

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

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

export default EmailInput;
```

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

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

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

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

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

#### HTML + JS

Primero, crea un elemento DOM contenedor para montar el [Payment Element](https://docs.stripe.com/payments/payment-element.md). A continuación, crea una instancia del `Payment Element` mediante [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) y móntala llamando a [element.mount](https://docs.stripe.com/js/element/mount), proporcionando un selector CSS o el elemento DOM contenedor.

```html
<div id="payment-element"></div>
```

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

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

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

#### React

Monta el componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) dentro del [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

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

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

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

  return (
    <form>

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

export default CheckoutForm;
```

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

Puedes [personalizar el aspecto](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos los elementos especificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) en el [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Envía el pago [Lado del cliente]

#### HTML + JS

Presenta un botón **Pagar** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde la instancia de `Checkout` para enviar el pago.

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

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Presenta un botón **Pagar** que llame a [confirm](https://docs.stripe.com/js/custom_checkout/confirm) desde [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) para enviar el pago.

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

const PayButton = () => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Prueba tu integración

Para probar tu integración, elige el método de pago y toca **Pagar**. En un *entorno de prueba* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), esto te redirige a una página de pago de prueba donde puedes aprobar o rechazar el pago.

En modo activo, al tocar **Pagar**, te redirige al sitio web de Afterpay (no tienes la opción de aprobar o rechazar el pago con Afterpay).


# API Payment Intents

> This is a API Payment Intents for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

Para determinar qué API se adapta mejor a las necesidades de tu empresa, consulta la [guía comparativa](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Usa el [Payment Element](https://docs.stripe.com/payments/payment-element.md) para integrar un formulario de pago de Stripe personalizado en tu sitio web o aplicación y ofrecer métodos de pago a los clientes. Para obtener información sobre configuraciones y personalizaciones avanzadas, consulta la guía de integración [Cómo aceptar pagos](https://docs.stripe.com/payments/accept-a-payment.md).

## Configura Stripe [Lado del servidor]

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

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

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

Ya tienes todo listo para recopilar datos de 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 de forma segura a Stripe través de una conexión HTTPS. Evita colocar el Payment Element en otro iframe, ya que algunos métodos de pago requieren redirigir a otra página para confirmar el pago.

La dirección de la página del proceso de compra debe empezar por `https://` en lugar de `http://` para que tu integración funcione. 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

### Configura Stripe.js

El Payment Element se encuentra disponible automáticamente como función de Stripe.js. Incluye el script de Stripe.js en tu página del proceso de compra añadiéndolo al `head` de tu archivo HTML. Carga siempre Stripe.js directamente desde js.stripe.com para cumplir con la normativa PCI. No incluyas el script en un paquete ni alojes una copia en tus sistemas.

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

Crea una instancia de Stripe con el siguiente JavaScript en tu página de proceso 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>>');
```

### Agregar el Payment Element a tu página del proceso de pago

El Payment Element necesita un lugar en tu página del proceso 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 anterior, crea una instancia de Elements con un `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: 'usd',
  // 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');
```

#### Enumera métodos de pago manualmente

Para crear manualmente una lista con los métodos de pago que deseas que estén disponibles, añade cada uno de ellos a `paymentMethodTypes`.

A continuación, crea una instancia del Payment Element y móntala en el nodo DOM del contenedor.

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'usd',
  paymentMethodTypes: ['afterpay_clearpay'],
  // 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

### Configura Stripe.js

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

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

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

Para utilizar el componente de Payment Element, ajusta el componente de la página del proceso de compra en un [proveedor de Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Llama a `loadStripe` con tu clave publicable y pasa el `Promise` devuelto al proveedor d `Elements`.

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

El proveedor de `Elements` también acepta un `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: 'usd',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Enumera 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: 'usd',
    paymentMethodTypes: ['afterpay_clearpay'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Añade el componente Payment Element

Utiliza el componente `PaymentElement` para crear el 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

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

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

## Crea un PaymentIntent [Lado del servidor]

> #### Ejecuta la lógica de negocio personalizada inmediatamente antes de la confirmación del pago
> 
> Dirígete 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 comercial personalizada inmediatamente antes de la confirmación del pago. De lo contrario, sigue los pasos a continuación para una integración más simple, que usa `stripe.confirmPayment` en el cliente para confirmar el pago y manejar las acciones siguientes.

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

Cuando el cliente envíe tu formulario de pago, utiliza 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 un `amount` y `currency`. Para evitar que clientes malintencionados elijan sus propios precios, decide siempre cuánto cobrar del lado del servidor (un entorno de confianza) y no del lado del cliente.

Un `PaymentIntent` incluye un *client secret* (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 para que Stripe.js lo use para completar el proceso de pago de forma segura.

#### Cuentas 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: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Clientes 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: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Enumera métodos de pago manualmente

Cuando el cliente envíe tu formulario de pago, utiliza 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 un `amount`, una `currency` y uno o más métodos de pago usando `payment_method_types`. Para evitar que clientes malintencionados elijan sus propios precios, decide siempre cuánto cobrar del lado del servidor (un entorno de confianza) y no del lado del cliente.

En un PaymentIntent se incluye un *client secret* (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 para 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: 'usd',
    payment_method_types: ['afterpay_clearpay'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Envía 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 de Payment Element.

Proporciona una [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para indicar dónde redirige Stripe al usuario después de completar el pago. Es posible que en un primer momento se redirija al usuario a un sitio intermedio, como una página de autorización bancaria, antes de redirigirle al `return_url`. Los pagos con tarjeta redireccionan de inmediato al `return_url` cuando el pago se ha hecho efectivo.

Si no quieres redireccionar los pagos con tarjeta después de completar el pago, puedes configurar el [redireccionamiento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) como `if_required`. Esto solo redirecciona a los clientes que finalizan su compra con métodos de pago basados en redireccionamiento.

#### HTML + JS

```javascript

const form = document.getElementById('payment-form');
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: Administrar eventos posteriores al pago

Stripe envía un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) cuando se completa el pago. Utiliza 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 socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide).

- **Gestiona eventos manualmente en el Dashboard**

  Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos.

- **Crea 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.

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

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

## Optional: Separa la autorización y la captura

Puedes separar la autorización y la captura para crear un cargo ahora y capturar los fondos más tarde. Stripe cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled) cancelado si el pago no se captura durante el plazo de 7 días.

Si estás seguro de que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 7 días.

### Indícale a Stripe que autorice solamente

Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de {% $pm_display_name %.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d confirm=true \
  -d currency=usd \
  -d "payment_method_types[]=afterpay_clearpay" \
  -d "payment_method_data[type]=payment_method" \
  -d capture_method=manual \
  --data-urlencode "return_url=https://www.example.com/checkout/done"
```

### Captura los fondos

Una vez que la autorización se realiza correctamente, el [estado de PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una solicitud de [captura](https://docs.stripe.com/api/payment_intents/capture.md) de PaymentIntent.

```curl
curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \
  -u "<<YOUR_SECRET_KEY>>:"
```

Stripe captura el importe total autorizado de forma predeterminada. También puedes especificar `amount_to_capture` que sea menor o igual que el total.

### (Opcional) Cancela la autorización

Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md).

## Prueba tu integración

Para probar tu integración, elige el método de pago y toca **Pagar**. En un *entorno de prueba* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), esto te redirige a una página de pago de prueba donde puedes aprobar o rechazar el pago.

En modo activo, al tocar **Pagar**, te redirige al sitio web de Afterpay (no tienes la opción de aprobar o rechazar el pago con Afterpay).

## Códigos de error

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

| Código de error                                           | Acción recomendada                                                                                                                                                                                                                                                                                                                                                                                   |
| --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Introduce una divisa aceptada.                                                                                                                                                                                                                                                                                                                                                                       |
| `missing_required_parameter`                              | Lee el mensaje de error para obtener más información sobre el parámetro necesario.                                                                                                                                                                                                                                                                                                                   |
| `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. Consulta el mensaje de error para obtener una razón de error detallada y sugerencias sobre la gestión de 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 obtener un motivo de error detallado y una sugerencia sobre la gestión de errores. Este error se produce cuando activas manualmente un error al probar tu integración. |
| `payment_intent_redirect_confirmation_without_return_url` | Proporciona una `return_url` al confirmar un PaymentIntent.                                                                                                                                                                                                                                                                                                                                          |


> El contenido de esta sección se refiere a un producto *heredado* (Technology that's no longer recommended). En su lugar, debes usar la guía [Aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md) para el proceso de integración más reciente. Aunque Stripe sigue aceptando este producto, podría dejar de aceptarlo si el producto queda obsoleto.

Los usuarios de Stripe pueden utilizar la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), una ruta de integración única para crear pagos usando cualquier método aceptado, para aceptar pagos con [Afterpay](https://www.afterpay.com/) de clientes de los siguientes países:

- Australia
- Canadá
- Nueva Zelanda
- Reino Unido
- Estados Unidos

Afterpay es un método de pago [de uso único](https://docs.stripe.com/payments/payment-methods.md#usage) y de [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification) que requiere que el cliente [autentique](https://docs.stripe.com/payments/payment-methods.md#customer-actions) su pago. Se redirige a los clientes al sitio web de Afterpay, donde aceptan las condiciones del plan de pago en cuotas. Cuando el cliente acepta las condiciones, se garantizan los fondos y se transfieren a tu cuenta de Stripe. El cliente paga a Afterpay directamente a lo largo del tiempo.

> Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods).

## Configura Stripe [Lado del servidor]

Primero, necesitas una cuenta de Stripe. [Regístrate ahora](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'
```

## Crea 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 cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa. Primero, crea un `PaymentIntent` en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), añade `afterpay_clearpay` 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) para tu `PaymentIntent`.

Puedes gestionar los métodos de pago desde el [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestiona la devolución de métodos de pago que cumplan los requisitos en función de factores como el importe de la transacción, la divisa y el flujo de pago. En el siguiente ejemplo se usa el atributo [automatic_payment_methods](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-automatic_payment_methods-enabled), pero puedes enumerar `afterpay_clearpay` con [tipos de métodos de pago](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types). En la última versión de la API, especificar el parámetro `automatic_payment_methods` es opcional porque Stripe habilita sus funciones de forma predeterminada. Independientemente de la opción que elijas, asegúrate de habilitar Afterpay Clearpay en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

### Recupera el secreto del cliente

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

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

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

#### Ruby

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

Y luego busca el secreto del cliente con JavaScript del lado del cliente:

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

#### Renderización del lado del servidor

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

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

#### Ruby

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

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

### Mejora las tasas de éxito de los pagos con información adicional

Opcionalmente, especifica los datos de [envío](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping) para mejorar las tasas de conversión. En esta integración, especifica los datos de envío del cliente después de que tu cliente seleccione un método de pago.

Si envías una dirección de envío, debe incluir valores válidos para `line1`, `city`, `state`, `postal_code` y `country`.

### Opciones de métodos de pago adicionales

Puedes especificar un parámetro `reference` opcional en las [opciones de método de pago](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference) de tu `PaymentIntent`, que establece un identificador interno del pedido para el pago. Aunque normalmente ni la empresa ni el consumidor pueden verlo, el equipo de soporte interno de Afterpay puede acceder a él durante las solicitudes de asistencia manual. El identificador tiene un límite de 128 caracteres y solo puede contener letras, dígitos, guiones bajos, barras invertidas y guiones.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  // Shipping address is optional but recommended to pass in.
  -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 \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

## Envía el pago a Stripe [Lado del cliente]

En este paso, efectivizarás los pagos de Afterpay en el lado del cliente con [Stripe.js](https://docs.stripe.com/payments/elements.md).

### Configura Stripe.js

Cuando un cliente haga clic para pagar con Afterpay, recomendamos utilizar Stripe.js para enviar el pago a Stripe. Stripe.js es nuestra biblioteca JavaScript principal para crear flujos de pago. Automáticamente gestiona las complejidades como los redireccionamientos que se describen a continuación, y te dan la posibilidad de ampliar fácilmente tu integración a otros métodos de pago en el futuro. Incluye la secuencia de comandos de Stripe.js en tu página de proceso de compra añadiéndola al encabezado de tu archivo HTML.

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

Crea una instancia de Stripe.js 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
var stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>',
);
```

En lugar de enviarle al cliente el objeto PaymentIntent completo, utiliza el [secreto de cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del [paso 2](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#web-create-payment-intent). Esta clave es diferente de las claves de API que autentican las solicitudes de API de Stripe.

Aún debes administrar el secreto de cliente con cuidado porque sirve para completar el cargo. No lo registres, no lo insertes en URL ni lo expongas a nadie excepto al cliente.

Usa [stripe.confirmAfterpayClearpayPayment](https://docs.stripe.com/js/payment_intents/confirm_afterpay_clearpay_payment) para gestionar la redirección fuera de tu página y completar el pago. Añade un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a esta función para especificar a dónde redirige Stripe al usuario después de completar el pago en el sitio web o la aplicación móvil de Afterpay.

```javascript
// Redirects away from the client
const {error} = await stripe.confirmAfterpayClearpayPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },
    return_url: 'https://example.com/checkout/complete',
  }
);
if (error) {
  // Inform the customer that there was an error.
}
```

Cuando tu cliente envía un pago, Stripe lo redirige a la `return_url` e incluye los siguientes parámetros de consulta de URL. La página de retorno puede usarlos para obtener el estado del PaymentIntent y mostrarle al cliente el estado del pago.

Cuando especifiques el `return_url`, también puedes anexar tus propios parámetros de consulta para usarlos en la página de retorno.

| 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`. Para las integraciones de suscripciones, este client_secret también se expone en el objeto `Invoice` a través de [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) |

Cuando se redirige al cliente de nuevo a tu sitio web, puedes usar el `payment_intent_client_secret` para consultar el PaymentIntent y mostrarle al cliente el estado de la transacción.

## Optional: Añade partidas al PaymentIntent

Opcionalmente, puedes aceptar los datos de la partida para proporcionar más señales de riesgo a Afterpay. Actualmente, esta función está disponible en versión beta privada. Si quieres solicitar acceso a dicha función, contacta con nosotros usando el formulario de [soporte de Stripe](https://support.stripe.com).

## Optional: Separa la autorización y la captura

A diferencia de la [autorización y captura separadas para los pagos con tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md), Afterpay cobra al cliente la primera cuota del pago en el momento de la autorización. Tienes hasta 13&nbsp;días después de la autorización para capturar el resto del pago. Si no registras el pago en este período, el cliente recibirá el reembolso de la primera cuota y no se le cobrará ninguna otra. En estos casos, Stripe también cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled).

Si sabes que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 13&nbsp;días. La cancelación proactiva del PaymentIntent reembolsa inmediatamente la primera cuota a tu cliente, evitando cualquier confusión sobre los cargos en su extracto.

### Indicarle a Stripe que autorice solamente

Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de Afterpay.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -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
```

Una vez que la autorización se realiza correctamente, Stripe envía un evento [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consulta nuestra [guía de eventos](https://docs.stripe.com/api/events.md) para obtener ayuda.

### Capturar los fondos

Una vez que la autorización se realiza correctamente, el [estado](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) del PaymentIntent pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una petición de [captura](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más de ese importe, pero sí menos.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (Opcional) Cancela la autorización

Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).

## Optional: Gestiona el redireccionamiento de Afterpay de forma manual

Te recomendamos que uses Stripe.js para gestionar las redirecciones y los pagos de Afterpay del lado del cliente con `confirmAfterpayClearpayPayment`. El uso de Stripe.js te ayuda a ampliar tu integración a otros métodos de pago. No obstante, también puedes redirigir manualmente a tus clientes en tu servidor siguiendo estos pasos:

- Crea y confirma un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) del tipo `afterpay_clearpay`. Debes proporcionar la propiedad `payment_method_data.billing_details` que requiere Afterpay. `payment_intent.shipping` es opcional, pero se recomienda para mejorar las tasas de autenticación. Al especificar `payment_method_data`, Stripe crea un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) y lo usará inmediatamente con este PaymentIntent.

  También debes proporcionarle la URL de redireccionamiento a tu cliente después de que complete el pago en el campo `return_url`. En esta URL, también puedes aportar tus propios parámetros de consulta. Estos parámetros se incluyen en la URL final tras completar el flujo de redireccionamiento.

  #### curl

  ```bash
  curl https://api.stripe.com/v1/payment_intents \
    -u <<YOUR_SECRET_KEY>>: \
    -d "amount"=1099 \
    -d "currency"="usd" \
    -d "confirm"="true" \
    -d "payment_method_types[]"="afterpay_clearpay" \
    -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 \
    -d "payment_method_data[billing_details][name]"="Jenny Rosen" \
    -d "payment_method_data[billing_details][email]"="jenny@example.com" \
    -d "payment_method_data[billing_details][address][line1]"="1234 Main Street" \
    -d "payment_method_data[billing_details][address][city]"="San Francisco" \
    -d "payment_method_data[billing_details][address][state]"="CA" \
    -d "payment_method_data[billing_details][address][country]"="US" \
    -d "payment_method_data[billing_details][address][postal_code]"=94111 \
    -d "payment_method_data[type]"="afterpay_clearpay" \
    -d "return_url"="https://example.com/checkout/complete"
  ```

  El `PaymentIntent` que se ha creado tiene el estado `requires_action` y el tipo para `next_action` es `redirect_to_url`.

  #### Json

  ```json
  {"status": "requires_action",
    "next_action": {
      "type": "redirect_to_url",
      "redirect_to_url": {
        "url": "https://hooks.stripe.com/...",
        "return_url": "https://example.com/checkout/complete"
      }
    },
    "id": "pi_1G1sgdKi6xqXeNtkldRRE6HT",
    "object": "payment_intent",
    "amount": 1099,
    "client_secret": "pi_1G1sgdKi6xqXeNtkldRRE6HT_secret_h9B56ObhTN72fQiBAuzcVPb2E",
    "confirmation_method": "automatic",
    "created": 1579259303,
    "currency": "usd",
    "livemode": true,
    "charges": {
      "data": [],
      "object": "list",
      "has_more": false,
      "url": "/v1/charges?payment_intent=pi_1G1sgdKi6xqXeNtkldRRE6HT"
    },
    "payment_method_options": {
      "afterpay_clearpay": {}
    },
    "payment_method_types": [
      "afterpay_clearpay"
    ]
  }
  ```

- Redirige al cliente a la URL proporcionada en la propiedad `next_action.redirect_to_url.url`. El código de ejemplo aquí es aproximado; el método de redireccionamiento puede ser diferente en tu entorno web.

  #### Ruby

  ```ruby
  if payment_intent.status == 'requires_action' && payment_intent.next_action.type == 'redirect_to_url'
    url = payment_intent.next_action.redirect_to_url.url
    redirect(url)
  end
  ```

Cuando el cliente finaliza el proceso de pago, se le envía al `return_url` configurado en el paso&nbsp;1. Los parámetros de consulta de URL `payment_intent` y `payment_intent_client_secret` están incluidos, y puedes especificar tus propios parámetros de consulta, tal y como se ha descrito anteriormente.

Te recomendamos [recurrir a los webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks) para confirmar el estado del pago.

## Optional: Gestiona 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. Utiliza 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 socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide).

- **Gestiona eventos manualmente en el Dashboard**

  Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos.

- **Crea 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.

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

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

## Optional: Prueba la integración de Afterpay

Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de `requires_action` a `succeeded`.

Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en **Error en el pago en modo de prueba**. El PaymentIntent pasará de `requires_action` a `requires_payment_method`.

Para la [captura manual](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture) de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.

## Optional: Mostrar mensajes de métodos de pago en tu sitio web

El [Payment Method Messaging Element](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) es un componente integrable de interfaz de usuario que ayuda a tus clientes a saber qué opciones de pago de «compra ahora, paga después» tienen en el proceso de compra directamente desde tus páginas de producto, carrito o pago.

Para añadir el Payment Method Messaging Element a tu sitio web, consulta [Mostrar mensajes de métodos de pago](https://docs.stripe.com/elements/payment-method-messaging.md).

## Pagos fallidos

Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).

Siempre debes presentar más opciones de pago como `card` en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

Para un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de Afterpay con un estado de `requires_action`, los clientes deben efectivizar el pago en el transcurso de las 3&nbsp;horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3&nbsp;horas, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto del [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.

## Códigos de error

Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:

| Código de error                          | Acción recomendada                                                                                                                                                                                                                                              |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Un error genérico que indica que el pago con Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo.                                                                                                          |
| `payment_method_provider_decline`        | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información.                                                                                                                          |
| `payment_intent_payment_attempt_expired` | El cliente no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. |
| `payment_method_not_available`           | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde.                                                                                                                                |
| `amount_too_small`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |
| `amount_too_large`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |

# iOS

> This is a iOS for when payment-ui is mobile and platform is ios. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=ios.

Aceptar Afterpay en tu aplicación consiste en mostrar una vista web para que el cliente autentique su pago. A continuación, el cliente vuelve a tu aplicación y puedes *confirmar* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) automáticamente si el pago se ha efectuado correctamente o ha dado error.

> Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods).

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

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

### Lado del servidor

Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor:

#### Ruby

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

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

### Lado del cliente

El [SDK para iOS de Stripe](https://github.com/stripe/stripe-ios) es de código abierto, está [plenamente documentado](https://stripe.dev/stripe-ios/index.html) y es compatible con aplicaciones que admiten iOS 13 o posterior.

#### Administrador de paquetes Swift

Para instalar el SDK, sigue estos pasos:

1. En Xcode, elige **Archivo** > **Añadir dependencias de paquetes…** e introduce `https://github.com/stripe/stripe-ios-spm` como la URL del repositorio.
1. Selecciona el número de versión más reciente en nuestra [página de versiones](https://github.com/stripe/stripe-ios/releases).
1. Añade el producto **StripePaymentsUI** al [objetivo de tu aplicación](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Si aún no lo has hecho, instala la última versión de [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Si no tienes un [Podfile](https://guides.cocoapods.org/syntax/podfile.html), ejecuta el siguiente comando para crear uno:
   ```bash
   pod init
   ```
1. Añade esta línea a tu `Podfile`:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Ejecuta el siguiente comando:
   ```bash
   pod install
   ```
1. De ahora en adelante, no olvides usar el archivo `.xcworkspace` en lugar del archivo `.xcodeproj` para abrir tu proyecto en Xcode.
1. En el futuro, para actualizar a la última versión del SDK, ejecuta lo siguiente:
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. Si aún no lo has hecho, instala la última versión de [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Añade esta línea a tu `Cartfile`:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Sigue las [instrucciones de instalación de Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Asegúrate de incrustar todos los frameworks obligatorios enumerados [aquí](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. En el futuro, para actualizar a la última versión del SDK, ejecuta el siguiente comando:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Plataforma manual

1. Ve a nuestra [página de versiones de GitHub](https://github.com/stripe/stripe-ios/releases/latest) y descarga y descomprime **Stripe.xcframework.zip**.
1. Arrastra **StripePaymentsUI.xcframework** a la sección **Binarios incrustados** de la configuración **General** de tu proyecto en Xcode. Asegúrate de seleccionar **Copiar elementos si es necesario**.
1. Repite el paso 2 para todos los frameworks obligatorios enumerados [here](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. En el futuro, para actualizar a la última versión de nuestro SDK, repite los pasos 1 a 3.

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

Configura el SDK con tu [clave publicable](https://dashboard.stripe.com/test/apikeys) de Stripe al iniciar la aplicación para que tu aplicación haga solicitudes a la API de Stripe.

#### Swift

```swift
import UIKitimportStripePaymentsUI

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<<YOUR_PUBLISHABLE_KEY>>"
        // do any other necessary launch configuration
        return true
    }
}
```

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

## Crea un PaymentIntent [Lado del servidor] [Lado del cliente]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) es un objeto que representa tu intención de cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa.

### Lado del servidor

Primero, crea un `PaymentIntent` en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), añade `afterpay_clearpay` 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) para tu `PaymentIntent`.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### Opciones de métodos de pago adicionales

Puedes especificar un parámetro `reference` opcional en las [opciones de método de pago](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference) de tu `PaymentIntent`, que establece un identificador interno del pedido para el pago. Aunque normalmente ni la empresa ni el consumidor pueden verlo, el equipo de soporte interno de Afterpay puede acceder a él durante las solicitudes de asistencia manual. El identificador tiene un límite de 128 caracteres y solo puede contener letras, dígitos, guiones bajos, barras invertidas y guiones.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

### Lado del cliente

El PaymentIntent devuelto 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 puede utilizar el lado del cliente para completar el proceso de pago de forma segura en lugar de especificar el objeto PaymentIntent completo. En el lado del cliente, solicita un PaymentIntent desde tu servidor y almacena el secreto de cliente.

#### Swift

```swift
import UIKit
import StripePayments

class CheckoutViewController: UIViewController {
  var paymentIntentClientSecret: String?

  func startCheckout() {
      // Request a PaymentIntent from your server and store its client secret
  }
}
```

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

Afterpay requiere que los datos de facturación estén presentes para que el pago se efectúe correctamente. En tu aplicación, recolecta los datos de facturación necesarios del cliente:

- Nombre completo (nombre y apellido)
- Dirección de correo electrónico
- Dirección de facturación completa

Crea un objeto [STPPaymentMethodParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodParams.html) con estos datos.

Además, aunque no se requieren datos de envío, pueden ayudar a mejorar las tasas de autenticación. Para recolectar los datos de envío, debes recolectar del cliente la siguiente información:

- Nombre completo
- Dirección de envío completa

Crea un [STPPaymentIntentShippingDetailsAddressParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentShippingDetailsAddressParams.html) con estos datos.

#### Swift

```swift
// Billing details
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
billingDetails.email = "email@email.com"
let billingAddress = STPPaymentMethodAddress()
billingAddress.line1 = "510 Townsend St."
billingAddress.postalCode = "94102"
billingAddress.country = "US"
billingDetails.address = billingAddress

// Afterpay PaymentMethod params
let afterpayParams = STPPaymentMethodParams(afterpayClearpay: STPPaymentMethodAfterpayClearpayParams(),
                                                                             billingDetails: billingDetails,
                                                                             metadata: nil)

// Shipping details
// Shipping details are optional but recommended to pass in.
let shippingAddress = STPPaymentIntentShippingDetailsAddressParams(line1: "510 Townsend St.")
shippingAddress.country = "US"
shippingAddress.postalCode = "94102"
let shippingDetails = STPPaymentIntentShippingDetailsParams(address: shippingAddress, name: "Jane Doe")
```

## Envía el pago a Stripe [Lado del cliente]

Recupera el secreto de cliente del PaymentIntent que creaste en el paso 2 y llama al método [STPPaymentHandler confirmPayment:](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). Esto presenta una vista web donde el cliente puede completar el pago, después de lo cual se llama al bloque de finalización con el resultado del pago.

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
paymentIntentParams.paymentMethodParams = afterpayParams
// Shipping details are optional but recommended to pass in.
paymentIntentParams.shipping = shippingDetails

STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // Payment succeeded

    case .canceled:
        // Payment was canceled

    case .failed:
        // Payment failed

    @unknown default:
        fatalError()
    }
}
```

## Optional: Añade partidas al PaymentIntent

Opcionalmente, puedes aceptar los datos de la partida para proporcionar más señales de riesgo a Afterpay. Actualmente, esta función está disponible en versión beta privada. Si quieres solicitar acceso a dicha función, contacta con nosotros usando el formulario de [soporte de Stripe](https://support.stripe.com).

## Optional: Separa la autorización y la captura

A diferencia de la [autorización y captura separadas para los pagos con tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md), Afterpay cobra al cliente la primera cuota del pago en el momento de la autorización. Tienes hasta 13&nbsp;días después de la autorización para capturar el resto del pago. Si no registras el pago en este período, el cliente recibirá el reembolso de la primera cuota y no se le cobrará ninguna otra. En estos casos, Stripe también cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled).

Si sabes que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 13&nbsp;días. La cancelación proactiva del PaymentIntent reembolsa inmediatamente la primera cuota a tu cliente, evitando cualquier confusión sobre los cargos en su extracto.

### Indicarle a Stripe que autorice solamente

Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de Afterpay.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -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
```

Una vez que la autorización se realiza correctamente, Stripe envía un evento [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consulta nuestra [guía de eventos](https://docs.stripe.com/api/events.md) para obtener ayuda.

### Capturar los fondos

Una vez que la autorización se realiza correctamente, el [estado](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) del PaymentIntent pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una petición de [captura](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más de ese importe, pero sí menos.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (Opcional) Cancela la autorización

Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).

## Optional: Gestiona 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. Utiliza 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 socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide).

- **Gestiona eventos manualmente en el Dashboard**

  Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos.

- **Crea 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.

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

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

## Optional: Prueba la integración de Afterpay

Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de `requires_action` a `succeeded`.

Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en **Error en el pago en modo de prueba**. El PaymentIntent pasará de `requires_action` a `requires_payment_method`.

Para la [captura manual](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture) de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.

## Pagos fallidos

Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).

Siempre debes presentar más opciones de pago como `card` en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

Para un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de Afterpay con un estado de `requires_action`, los clientes deben efectivizar el pago en el transcurso de las 3&nbsp;horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3&nbsp;horas, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto del [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.

## Códigos de error

Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:

| Código de error                          | Acción recomendada                                                                                                                                                                                                                                              |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Un error genérico que indica que el pago con Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo.                                                                                                          |
| `payment_method_provider_decline`        | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información.                                                                                                                          |
| `payment_intent_payment_attempt_expired` | El cliente no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. |
| `payment_method_not_available`           | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde.                                                                                                                                |
| `amount_too_small`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |
| `amount_too_large`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |


# Android

> This is a Android for when payment-ui is mobile and platform is android. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=android.

Aceptar Afterpay en tu aplicación consiste en mostrar una vista web para que el cliente autentique su pago. A continuación, el cliente vuelve a tu aplicación y puedes *confirmar* (Confirming an intent indicates that the customer intends to use the current or provided payment method. Upon confirmation, the intent attempts to initiate the portions of the flow that have real-world side effects) automáticamente si el pago se ha efectuado correctamente o ha dado error.

> Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods).

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

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

### Lado del servidor

Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa las bibliotecas oficiales para acceder a la API de Stripe desde tu servidor:

#### Ruby

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

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

### Lado del cliente

El [SDK para Android de Stripe](https://github.com/stripe/stripe-android) es de código abierto y está [completamente documentado](https://stripe.dev/stripe-android/).

Para instalar el SDK, añade `stripe-android` al bloque `dependencies` de tu archivo [app/build.gradle](https://developer.android.com/studio/build/dependencies):

#### Kotlin

```kotlin
plugins {
    id("com.android.application")
}

android { ... }

dependencies {
  // ...

  // Stripe Android SDK
  implementation("com.stripe:stripe-android:23.3.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.3.0")
}
```

> Para conocer detalles de la última versión y de versiones anteriores del SDK, consulta la página [Versiones](https://github.com/stripe/stripe-android/releases) de GitHub. Para recibir una notificación cuando se publique una nueva versión, [mira las versiones del repositorio](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

Configura el SDK con tu [clave publicable](https://dashboard.stripe.com/apikeys) de Stripe para que pueda hacer solicitudes a la API de Stripe, así como en tu subclase `Application`:

#### Kotlin

```kotlin
import com.stripe.android.PaymentConfiguration

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        PaymentConfiguration.init(
            applicationContext,
            "<<YOUR_PUBLISHABLE_KEY>>"
        )
    }
}
```

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

Los ejemplos de Stripe también utilizan [OkHttp](https://github.com/square/okhttp) y [GSON](https://github.com/google/gson) para hacer solicitudes HTTP a un servidor.

## Crea un PaymentIntent [Lado del servidor] [Lado del cliente]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) es un objeto que representa tu intención de cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa.

### Lado del servidor

Primero, crea un `PaymentIntent` en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), añade `afterpay_clearpay` 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) para tu `PaymentIntent`.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### Opciones de métodos de pago adicionales

Puedes especificar un parámetro `reference` opcional en las [opciones de método de pago](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-afterpay_clearpay-reference) de tu `PaymentIntent`, que establece un identificador interno del pedido para el pago. Aunque normalmente ni la empresa ni el consumidor pueden verlo, el equipo de soporte interno de Afterpay puede acceder a él durante las solicitudes de asistencia manual. El identificador tiene un límite de 128 caracteres y solo puede contener letras, dígitos, guiones bajos, barras invertidas y guiones.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \-d "payment_method_options[afterpay_clearpay][reference]"="order_123"
```

### Lado del cliente

El PaymentIntent devuelto 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 puede utilizar el lado del cliente para completar el proceso de pago de forma segura en lugar de especificar el objeto PaymentIntent completo. En el lado del cliente, solicita un PaymentIntent desde tu servidor y almacena el secreto de cliente.

#### Kotlin

```kotlin
class AfterpayPaymentActivity: AppCompatActivity() {
    private lateinit var paymentIntentClientSecret: String

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
        startCheckout()
    }


    private fun startCheckout() {
        // Request a PaymentIntent from your server and store its client secret
    }
}
```

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

Afterpay requiere que los datos de facturación estén presentes para que el pago se efectúe correctamente. En tu aplicación, recolecta los datos de facturación necesarios del cliente:

- Nombre completo (nombre y apellido)
- Dirección de correo electrónico
- Dirección de facturación completa

Crea un [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) con estos datos.

Además, aunque no se requieren datos de envío, pueden ayudar a mejorar las tasas de autenticación. Para recolectar los datos de envío, debes recolectar del cliente la siguiente información:

- Nombre completo
- Dirección de envío completa

Crea un [ConfirmPaymentIntentParams.Shipping](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-confirm-payment-intent-params/-shipping/index.html) con estos datos.

#### Kotlin

```kotlin
val billingDetails = PaymentMethod.BillingDetails(
  name = "Jenny Rosen",
  email = "jenny@rosen.com",
  address = Address.Builder()
    .setLine1("1234 Market St")
    .setCity("San Francisco")
    .setState("CA")
    .setCountry("US")
    .setPostalCode("94111")
    .build()
)
val paymentMethodCreateParams = PaymentMethodCreateParams.createAfterpayClearpay(billingDetails)

// Shipping details are optional but recommended to pass in.
val shippingDetails = ConfirmPaymentIntentParams.Shipping(
  name = "Jenny Rosen",
  address = Address.Builder()
    .setLine1("1234 Market St")
    .setCity("San Francisco")
    .setState("CA")
    .setCountry("US")
    .setPostalCode("94111")
    .build()
)
```

## Envía el pago a Stripe [Lado del cliente]

Recupera el secreto de cliente del PaymentIntent que has creado en el paso 2 y solicita el método[PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Esto ofrece una vista web donde el cliente puede completar el pago en la web o aplicación de su banco. Después, se llama a onActivityResult con el resultado del pago.

#### Kotlin

```kotlin

class AfterpayPaymentActivity : AppCompatActivity() {
    // ...
    private lateinit var paymentIntentClientSecret: String
    private val paymentLauncher: PaymentLauncher by lazy {
        val paymentConfiguration = PaymentConfiguration.getInstance(applicationContext)
        PaymentLauncher.Companion.create(
            this,
            paymentConfiguration.publishableKey,
            paymentConfiguration.stripeAccountId,
            ::onPaymentResult
        )
    }

    private fun startCheckout() {
        // ...

        // Shipping details are optional but recommended to pass in.
        val confirmParams = ConfirmPaymentIntentParams
            .createWithPaymentMethodCreateParams(
                paymentMethodCreateParams = paymentMethodCreateParams,
                clientSecret = paymentIntentClientSecret,
                shipping = shippingDetails
            )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // show success UI
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer may need to choose a new payment
                // method)
            }
        }
    }
}
```

## Optional: Añade partidas al PaymentIntent

Opcionalmente, puedes aceptar los datos de la partida para proporcionar más señales de riesgo a Afterpay. Actualmente, esta función está disponible en versión beta privada. Si quieres solicitar acceso a dicha función, contacta con nosotros usando el formulario de [soporte de Stripe](https://support.stripe.com).

## Optional: Separa la autorización y la captura

A diferencia de la [autorización y captura separadas para los pagos con tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md), Afterpay cobra al cliente la primera cuota del pago en el momento de la autorización. Tienes hasta 13&nbsp;días después de la autorización para capturar el resto del pago. Si no registras el pago en este período, el cliente recibirá el reembolso de la primera cuota y no se le cobrará ninguna otra. En estos casos, Stripe también cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled).

Si sabes que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 13&nbsp;días. La cancelación proactiva del PaymentIntent reembolsa inmediatamente la primera cuota a tu cliente, evitando cualquier confusión sobre los cargos en su extracto.

### Indicarle a Stripe que autorice solamente

Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de Afterpay.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -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
```

Una vez que la autorización se realiza correctamente, Stripe envía un evento [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consulta nuestra [guía de eventos](https://docs.stripe.com/api/events.md) para obtener ayuda.

### Capturar los fondos

Una vez que la autorización se realiza correctamente, el [estado](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) del PaymentIntent pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una petición de [captura](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más de ese importe, pero sí menos.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (Opcional) Cancela la autorización

Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).

## Optional: Gestiona 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. Utiliza 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 socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide).

- **Gestiona eventos manualmente en el Dashboard**

  Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos.

- **Crea 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.

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

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

## Optional: Prueba la integración de Afterpay

Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de `requires_action` a `succeeded`.

Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en **Error en el pago en modo de prueba**. El PaymentIntent pasará de `requires_action` a `requires_payment_method`.

Para la [captura manual](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture) de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.

## Pagos fallidos

Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).

Siempre debes presentar más opciones de pago como `card` en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

Para un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de Afterpay con un estado de `requires_action`, los clientes deben efectivizar el pago en el transcurso de las 3&nbsp;horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3&nbsp;horas, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto del [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.

## Códigos de error

Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:

| Código de error                          | Acción recomendada                                                                                                                                                                                                                                              |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Un error genérico que indica que el pago con Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo.                                                                                                          |
| `payment_method_provider_decline`        | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información.                                                                                                                          |
| `payment_intent_payment_attempt_expired` | El cliente no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. |
| `payment_method_not_available`           | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde.                                                                                                                                |
| `amount_too_small`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |
| `amount_too_large`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |


# React Native

> This is a React Native for when payment-ui is mobile and platform is react-native. View the full page at https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment?payment-ui=mobile&platform=react-native.

> El contenido de esta sección se refiere a un producto *heredado* (Technology that's no longer recommended). En su lugar, debes usar la guía [Aceptar un pago](https://docs.stripe.com/payments/accept-a-payment.md) para el proceso de integración más reciente. Aunque Stripe sigue aceptando este producto, podría dejar de aceptarlo si el producto queda obsoleto.

Los usuarios de Stripe pueden utilizar la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), una ruta de integración única para crear pagos usando cualquier método aceptado, para aceptar pagos con [Afterpay](https://www.afterpay.com/) de clientes de los siguientes países:

- Australia
- Canadá
- Nueva Zelanda
- Reino Unido
- Estados Unidos

Afterpay es un método de pago [de uso único](https://docs.stripe.com/payments/payment-methods.md#usage) y de [notificación inmediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification) que requiere que el cliente [autentique](https://docs.stripe.com/payments/payment-methods.md#customer-actions) su pago. Se redirige a los clientes al sitio web de Afterpay, donde aceptan las condiciones del plan de pago en cuotas. Cuando el cliente acepta las condiciones, se garantizan los fondos y se transfieren a tu cuenta de Stripe. El cliente paga a Afterpay directamente a lo largo del tiempo.

> Antes de iniciar la integración, asegúrate de que tu cuenta sea apta para Afterpay. Para ello, accede a la [configuración de los métodos de pago](https://dashboard.stripe.com/settings/payment_methods).

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

### Lado del servidor

Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa nuestras librerías oficiales para acceder a la API de Stripe desde tu servidor:

#### Ruby

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

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

### Lado del cliente

El [SDK para React Native](https://github.com/stripe/stripe-react-native) es de código abierto y está plenamente documentado. Internamente, utiliza el SDK de [iOS nativo](https://github.com/stripe/stripe-ios) y [Android](https://github.com/stripe/stripe-android). Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (en función del administrador de paquetes que utilices):

#### hilado

```bash
yarn add @stripe/stripe-react-native
```

#### npm

```bash
npm install @stripe/stripe-react-native
```

A continuación, instala otras dependencias necesarias:

- Para iOS, navega hasta el directorio de **ios** y ejecuta `pod install` para asegurarte de instalar también las dependencias nativas necesarias.
- Para Android, no hay más dependencias para instalar.

> Recomendamos seguir la [guía oficial de TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) para añadir compatibilidad con TypeScript.

### Inicialización de Stripe

Para inicializar Stripe en tu aplicación React Native, ajusta tu pantalla de pago con el componente `StripeProvider` o usa el método de inicialización `initStripe`. Solo se requiere la [clave publicable](https://docs.stripe.com/keys.md#obtain-api-keys) de la API en `publishableKey`. El siguiente ejemplo muestra cómo inicializar Stripe mediante el componente `StripeProvider`.

```jsx
import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}
```

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

## Crea un PaymentIntent [Lado del servidor] [Lado del cliente]

Un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) es un objeto que representa tu intención de cobrarle a un cliente y hace el seguimiento del ciclo de vida del proceso de pago en cada etapa.

### Lado del servidor

Primero, crea un `PaymentIntent` en tu servidor y especifica el importe que hay que cobrar y la divisa. Si ya tienes una integración que utiliza la [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), añade `afterpay_clearpay` 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) para tu `PaymentIntent`.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay"
```

### Lado del cliente

El PaymentIntent devuelto 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 puede utilizar el lado del cliente para completar el proceso de pago de forma segura en lugar de especificar el objeto PaymentIntent completo. En el lado del cliente, solicita un PaymentIntent desde tu servidor y almacena el secreto de cliente.

```javascript
const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'usd',
      payment_method_types: ['afterpay_clearpay'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};
```

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

Afterpay requiere que los datos de facturación estén presentes para que el pago se efectúe correctamente. En tu aplicación, recolecta los datos de facturación necesarios del cliente:

- Nombre completo (nombre y apellido)
- Dirección de correo electrónico
- Dirección de facturación completa

Además, aunque no se requieren datos de envío, pueden ayudar a mejorar las tasas de autenticación. Para recolectar los datos de envío, debes recolectar del cliente la siguiente información:

- Nombre completo
- Dirección de envío completa

```javascript
export default function AfterpayClearpayPaymentScreen() {
  const [email, setEmail] = useState('');

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      email,
      phone: '+48888000888',
      addressCity: 'Houston',
      addressCountry: 'US',
      addressLine1: '1459  Circle Drive',
      addressLine2: 'Texas',
      addressPostalCode: '77063',
      name: 'Jenny Rosen',
    };

    // Shipping details are optional but recommended to pass in.
    const shippingDetails: PaymentMethodCreateParams.ShippingDetails = {
      addressLine1: '1459  Circle Drive',
      addressCountry: 'US',
      addressPostalCode: '77063',
      name: 'Jenny Rosen',
    };

    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
    </Screen>
  );
}
```

## Envía el pago a Stripe [Lado del cliente]

Recupera el secreto de cliente del PaymentIntent que has creado y llama al `confirmPayment`. Deberías seguir gestionando el secreto de cliente con cuidado, ya que sirve para completar el cargo. No lo registres, no lo insertes en URL ni lo expongas a nadie que no sea el cliente.

```javascript
export default function AfterpayClearpayPaymentScreen() {
  const [email, setEmail] = useState('');

  const handlePayPress = async () => {
    // ...

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'AfterpayClearpay',
      paymentMethodData: {
        billingDetails,
        // Shipping details are optional but recommended to pass in.
        shippingDetails,
      },
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert(
        'Success',
        `The payment was confirmed successfully! currency: ${paymentIntent.currency}`,
      );
    }
  };

  return <Screen>{/* ... */}</Screen>;
}
```

## Optional: Gestiona la vinculación profunda

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

Para proporcionar una URL de retorno:

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

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

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

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

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

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

    getUrlAsync();

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

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

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

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

## Optional: Añade partidas al PaymentIntent

Opcionalmente, puedes aceptar los datos de la partida para proporcionar más señales de riesgo a Afterpay. Actualmente, esta función está disponible en versión beta privada. Si quieres solicitar acceso a dicha función, contacta con nosotros usando el formulario de [soporte de Stripe](https://support.stripe.com).

## Optional: Separa la autorización y la captura

A diferencia de la [autorización y captura separadas para los pagos con tarjeta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md), Afterpay cobra al cliente la primera cuota del pago en el momento de la autorización. Tienes hasta 13&nbsp;días después de la autorización para capturar el resto del pago. Si no registras el pago en este período, el cliente recibirá el reembolso de la primera cuota y no se le cobrará ninguna otra. En estos casos, Stripe también cancela el PaymentIntent y envía un evento [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled).

Si sabes que no puedes capturar el pago, te recomendamos [que canceles el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) en lugar de esperar a que transcurra el plazo de 13&nbsp;días. La cancelación proactiva del PaymentIntent reembolsa inmediatamente la primera cuota a tu cliente, evitando cualquier confusión sobre los cargos en su extracto.

### Indicarle a Stripe que autorice solamente

Para indicar que quieres separar la autorización y la captura, establece [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) en `manual` al crear el PaymentIntent. Este parámetro le indica a Stripe que solo debe autorizar el importe en la cuenta del cliente de Afterpay.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "payment_method_types[]"="afterpay_clearpay" \
  -d "capture_method"="manual" \
  -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
```

Una vez que la autorización se realiza correctamente, Stripe envía un evento [payment_intent.amount_capturable_updated](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.amount_capturable_updated). Consulta nuestra [guía de eventos](https://docs.stripe.com/api/events.md) para obtener ayuda.

### Capturar los fondos

Una vez que la autorización se realiza correctamente, el [estado](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) del PaymentIntent pasa a `requires_capture`. Para capturar los fondos autorizados, realiza una petición de [captura](https://docs.stripe.com/api/payment_intents/capture.md) del PaymentIntent. De forma predeterminada, se captura el importe total autorizado; no puedes capturar más de ese importe, pero sí menos.

```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount_to_capture=750
```

### (Opcional) Cancela la autorización

Si necesitas cancelar una autorización, puedes [cancelar el PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).

## Optional: Gestiona 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. Utiliza 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 socio para recibir estos eventos y ejecutar acciones como, por ejemplo, enviar un correo electrónico para confirmar el pedido al cliente, registrar la venta en una base de datos o iniciar el flujo de tareas de envío.

Escucha estos eventos en lugar de esperar una devolución de llamada del cliente. Por su parte, el cliente puede cerrar la ventana del navegador o salir de la aplicación antes de que se ejecute la devolución de llamada y los clientes malintencionados podrían manipular la respuesta. Configurar tu integración para escuchar eventos asincrónicos también te ayudará a aceptar más métodos de pago en el futuro. Obtén más información sobre las [diferencias entre todos los métodos de pago aceptados](https://stripe.com/payments/payment-methods-guide).

- **Gestiona eventos manualmente en el Dashboard**

  Utiliza el Dashboard para [ver tus pagos de prueba en el Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por correo electrónico, gestionar pagos o reintentar pagos fallidos.

- **Crea 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.

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

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

## Optional: Prueba la integración de Afterpay

Para probar tu integración de Afterpay con las claves de la API en modo de prueba, consulta la página de redireccionamiento. Puedes probar el caso de pago satisfactorio autenticando el pago en la página de redireccionamiento. El PaymentIntent pasará de `requires_action` a `succeeded`.

Para probar el caso en el que el usuario no pueda autenticarse, utiliza las claves de la API en modo de prueba y consulta la página de redireccionamiento. En la página de redireccionamiento, haz clic en **Error en el pago en modo de prueba**. El PaymentIntent pasará de `requires_action` a `requires_payment_method`.

Para la [captura manual](https://docs.stripe.com/payments/afterpay-clearpay/accept-a-payment.md#manual-capture) de PaymentIntents en modo de prueba, el PaymentIntent no capturado vencerá automáticamente 10 minutos después de la autorización satisfactoria.

## Pagos fallidos

Afterpay tiene en cuenta varios factores a la hora de decidir si acepta o rechaza una transacción (por ejemplo, el tiempo que el comprador lleva utilizando Afterpay, el importe pendiente de pago del cliente, el valor del pedido actual).

Siempre debes presentar más opciones de pago como `card` en el flujo del proceso de compra, ya que los pagos con Afterpay tiene una tasa de rechazos superior que muchos métodos de pago. En estos casos, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

Para un [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) de Afterpay con un estado de `requires_action`, los clientes deben efectivizar el pago en el transcurso de las 3&nbsp;horas posteriores a redirigirles al sitio de Afterpay (esto no se aplica a los pagos rechazados). Si no realiza ninguna acción en el transcurso de 3&nbsp;horas, el [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) se separa y el estado del objeto del [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) pasa automáticamente a `requires_payment_method`.

En estos casos, informa a tus clientes que deben intentarlo de nuevo con una opción de pago diferente de tu flujo de proceso de compra.

## Códigos de error

Estos son algunos códigos de error comunes y las correspondientes acciones recomendadas:

| Código de error                          | Acción recomendada                                                                                                                                                                                                                                              |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Un error genérico que indica que el pago con Afterpay ha fallado. También puede tratarse de un rechazo que no aparece como código de error de rechazo.                                                                                                          |
| `payment_method_provider_decline`        | Afterpay ha rechazado el pago del cliente. Como siguiente paso, el cliente debe contactarse con Afterpay para obtener más información.                                                                                                                          |
| `payment_intent_payment_attempt_expired` | El cliente no completó el pago en la página Afterpay del proceso de compra, y la sesión de pago ha caducado. Los PaymentIntents de Stripe caducan automáticamente si no se autorizan correctamente transcurridas 3 horas desde el inicio del proceso de compra. |
| `payment_method_not_available`           | Afterpay ha experimentado un error relacionado con el servicio y no puede completar la solicitud. Vuelve a intentarlo más tarde.                                                                                                                                |
| `amount_too_small`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |
| `amount_too_large`                       | Introduce un importe dentro de los [límites de transacciones predeterminados](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule) de Afterpay para el país.                                                                              |