# Aceitar um pagamento OXXO

Veja como aceitar OXXO, uma forma de pagamento comum no México.

# Checkout

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

> A Stripe pode apresentar automaticamente as formas de pagamento relevantes aos seus clientes avaliando moedas, restrições de formas de pagamento e outros parâmetros.
> 
> - Siga o guia [Aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted) para elaborar uma integração de checkout que usa [formas de pagamento dinâmicas](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md).
- Se você não quiser usar o formas de pagamento dinâmico, siga as etapas abaixo para configurar manualmente as formas de pagamento em sua integração de checkout.

O OXXO é uma forma de pagamento de [uso único](https://docs.stripe.com/payments/payment-methods.md#usage), que exige que o cliente [siga instruções adicionais](https://docs.stripe.com/payments/payment-methods.md#customer-actions) para finalizar o pagamento. Os *clientes* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) pagam em dinheiro apresentando uma guia OXXO com um número gerado em uma loja de conveniência OXXO.

## Verificar a compatibilidade

**Localizações aceitas para empresas**: MX

**Moedas aceitas**: `mxn`

**Moedas de apresentação**: `mxn`

**Modo de pagamento**: Yes

**Modo de configuração**: No

**Modo de assinatura**: No

Uma sessão do Checkout precisa cumprir todas as condições a seguir para aceitar pagamentos com OXXO:

- Os *preços* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) de todos os produtos incluídos no checkout precisam estar na mesma moeda. Se você tiver produtos em moedas diferentes, crie sessões do Checkout separadas para cada moeda.
- Use apenas itens de linha cujas vendas sejam avulsas (isto é, não são aceitos planos de *assinatura* (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) recorrentes).

## Aceitar um pagamento

> Crie uma integração para [aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md?integration=checkout) com o Checkout antes de usar este guia.

Isto orienta você na ativação da OXXO e mostra as diferenças entre aceitar pagamentos usando formas de pagamento dinâmicas e configurar manualmente as formas de pagamento.

### Habilitar OXXO como forma de pagamento

Ao criar uma [sessão do Checkout](https://docs.stripe.com/api/checkout/sessions.md), é preciso:

1. Acrescentar `oxxo` à lista de `payment_method_types`.
1. Verifique se todos os `line_items` usam a moeda `mxn`.

#### Página hospedada pela Stripe

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

#### Página incorporada completa

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

### Outras opções de forma de pagamento

Você pode especificar o parâmetro opcional `expires_after_days` nas [opções da forma de pagamento](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-oxxo-expires_after_days) para o `Session`, definindo o número de dias corridos após os quais uma guia OXXO vence. Por exemplo: se você criar uma guia OXXO na segunda-feira e a configuração de `expires_after_days` for&nbsp;2, a guia vencerá na quarta-feira, às&nbsp;23h59, horário da América/Mexico_City (UTC-6). O parâmetro `expires_after_days` pode ser de&nbsp;1&nbsp;a&nbsp;7&nbsp;dias. O padrão é 3&nbsp;dias.

#### Página hospedada pela Stripe

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_options[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Página incorporada completa

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=mxn" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_options[oxxo][expires_after_days]=2" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=oxxo" \
  --data-urlencode "return_url=https://example.com/return" \
  -d ui_mode=embedded_page
```

### Redirecionar para a interface de guias da Stripe

Depois de enviar corretamente o formulário do Checkout, o cliente é redirecionado para `hosted_voucher_url`. O cliente pode encontrar o código de barras ou imprimir a guia OXXO nessa página. O `hosted_voucher_url` fica em [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url).

A Stripe permite personalizar as IUs exibidas para seus clientes na página [Configurações da marca](https://dashboard.stripe.com/account/branding). As seguintes definições de marca podem ser aplicadas à guia:

- **Ícone**: a imagem de sua marca e nome fantasia da empresa
- **Cor de destaque**: usada como a cor do botão Imprimir
- **Cor da marca**: usada como cor de fundo

### Executar seus pedidos

Como o OXXO é uma forma de pagamento de notificação posterior, é preciso usar um método como *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para monitorar o status do pagamento e gerenciar a *execução* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) de pedidos. Saiba [como configurar webhooks e executar pedidos](https://docs.stripe.com/checkout/fulfillment.md).

Os seguintes eventos são enviados quando há mudança no status do pagamento:

| Nome do evento                                                                                                                               | Descrição                                                                                                                                                                          | Próximas etapas                                                                      |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)                             | O cliente enviou o formulário do Checkout. A Stripe gerou a guia OXXO.

  Você pode enviar o link do `hosted_voucher_url` por e-mail, para o caso de o cliente perder a guia OXXO. | Espere que o cliente pague a guia OXXO.                                              |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | O cliente pagou a guia OXXO corretamente. O status do `PaymentIntent` muda para `succeeded`.                                                                                       | Execute o pedido de mercadorias ou serviços do cliente.                              |
| [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed)       | A guia OXXO venceu ou o pagamento não foi concluído. O `PaymentIntent` retorna para o status de `requires_payment_method`.                                                         | Entre em contato com o cliente por e-mail e solicite a realização de um novo pedido. |

## Teste sua integração

Para testar a integração do Checkout, selecione OXXO como forma de pagamento e clique em **Pagar**.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula uma guia OXXO paga pelo cliente depois de 3 minutos, com o webhook `payment_intent.succeeded` recebido depois de cerca de 3 minutos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula uma guia OXXO paga imediatamente pelo cliente, com o webhook `payment_intent.succeeded` recebido depois de alguns segundos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de alguns segundos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para o horário atual, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 3 minutos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para 3 minutos no futuro, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_with_delay@test.com    |
| `{any_prefix}fill_never@{any_domain}`          | Simula uma guia OXXO que expira sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 1&nbsp;dia e 2&nbsp;dias&nbsp;corridos. Em produção, este webhook chega no mesmo momento que no modo de teste.

  Exemplo: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                            |

## Optional: Enviar e-mails de instruções de pagamento

Você pode habilitar e-mails com instruções de pagamento OXXO na página [Configurações de e-mail](https://dashboard.stripe.com/settings/emails) no Dashboard. Após a habilitação, a Stripe envia e-mails com instruções de pagamento após a confirmação do PaymentIntent. Os e-mails contêm o número OXXO e um link para a página da guia hospedada na Stripe.

> Em ambientes de teste, os e-mails de instruções só são enviados para endereços de e-mail vinculados à conta Stripe.

## See also

- [Execução do checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personalizar o 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/oxxo/accept-a-payment?payment-ui=elements&api-integration=checkout.

Para determinar qual API atende melhor às necessidades do seu negócio, consulte o [guia de comparação](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Use o [Payment Element](https://docs.stripe.com/payments/payment-element.md) para incorporar um formulário de pagamento personalizado da Stripe e seu site ou aplicativo e oferecer formas de pagamento aos clientes. Para configurações avançadas e personalizações, consulte o guia de integração [Aceitar um Pagamento](https://docs.stripe.com/payments/accept-a-payment.md).

## Verificar a compatibilidade

**Localizações aceitas para empresas**: MX

**Moedas aceitas**: `mxn`

**Moedas de apresentação**: `mxn`

**Modo de pagamento**: Yes

**Modo de configuração**: No

**Modo de assinatura**: No

Uma sessão do Checkout precisa cumprir todas as condições a seguir para aceitar pagamentos com OXXO:

- Os preços de todos os produtos inclusos no checkout  precisam estar na mesma moeda. Se você tiver produtos em moedas diferentes, crie sessões do Checkout separadas para cada moeda.
- Você só pode usar itens de linha de uso único (planos de assinatura recorrentes não são compatíveis).

## Configure o servidor [Lado do servidor]

Use as bibliotecas Stripe oficiais para acessar o API do seu aplicativo.

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

## Criar um Checkout Session [Lado do servidor]

Adicione um endpoint ao seu servidor que cria uma [sessão do Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) e retorna seu [segredo do cliente](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) para o frontend. Uma sessão do Checkout representa a sessão do seu cliente enquanto ele paga por compras ou assinaturas avulsas. As sessões do Checkout expiram 24 horas após a criação.

Recomendamos usar [formas de pagamento dinâmicas](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) para exibir dinamicamente as formas de pagamento mais relevantes para cada cliente para maximizar a conversão. Você também pode [listar manualmente formas de pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), o que desativa formas de pagamento dinâmicas.

#### Gerencie formas de pagamento no 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: 'mxn',
          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');
});
```

#### Listar manualmente formas de pagamento

#### 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: 'mxn',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['oxxo'],
    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');
});
```

## Configurar o frontend [Do lado do cliente]

#### HTML + JS

Inclua o script Stripe.js na página de checkout, adicionando-o ao `head` do seu arquivo HTML. Sempre carregue o Stripe.js diretamente a partir do js.stripe.com para manter a conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.

Certifique-se de estar usando a versão mais recente do Stripe.js incluindo a seguinte tag de script `<script src=“https://js.stripe.com/dahlia/stripe.js”></script>`. Saiba mais sobre [versões do 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>
```

> A Stripe fornece um pacote npm que você pode usar para carregar o Stripe.js como um módulo. Veja o [projeto no GitHub](https://github.com/stripe/stripe-js). A versão [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) ou posterior é necessária.

Inicializar o 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

Instale o [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e o [carregador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) do registro público do npm. Você precisa de pelo menos a versão 5.0.0 do React Stripe.js e a versão 8.0.0 do carregador Stripe.js.

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

Inicialize uma instância de `stripe` no frontend com sua chave publicável.

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

## Inicializar o Checkout [Do lado do cliente]

#### HTML + JS

Chame [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), passando o `clientSecret`.

`initCheckoutElementsSdk` retorna um objeto [Checkout](https://docs.stripe.com/js/custom_checkout) que contém dados da Checkout Session e métodos para atualizá-lo.

Leia o `total` e `lineItems` de [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), e exibi-os na sua IU. Isso permite ativar novos recursos com mínimas alterações no código. Por exemplo, somando [preços de moeda manual](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) não requer alterações na IU se você exibir o `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

Envolva seu aplicativo com o componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), passando `clientSecret` e a instância `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;
```

Acesse o objeto [Checkout](https://docs.stripe.com/js/custom_checkout) no componente do seu formulário de checkout usando o hook `useCheckoutElements()`. O objeto `Checkout` contém dados do Checkout Session e métodos para atualizá-lo.

Leia o `total` e `lineItems` do objeto do `Checkout` e exibi-lo na sua IU. Isso permite que você ative recursos com mudanças mínimas no código. Por exemplo, somando [preços de moeda manualmente](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) não requer alterações na IU se você exibir o `total`.

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

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

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

## Coletar e-mail do cliente [Do lado do cliente]

#### HTML + JS

Ao concluir uma sessão do Checkout, é necessário fornecer um e-mail válido do cliente.

Essas instruções criam um campo de entrada de e‑mail e utilizam o método [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) do objeto `Checkout`.

Ou, você pode:

- Informe o [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Conta` configurados pelo cliente) ou [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos de `Cliente`) ao criar a Sessão de Checkout. A Stripe valida os e-mails fornecidos dessa forma.
- Informe um e‑mail que você já tenha validado no [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

Ao concluir uma sessão do Checkout, é necessário fornecer um e-mail válido do cliente.

Essas instruções criam um campo de entrada de e‑mail e utilizam o método [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) do objeto `Checkout`.

Ou, você pode:

- Informe o [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (para clientes representados como objetos de `Conta` configurados pelo cliente) ou [cliente](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (para clientes representados como objetos de `Cliente`) ao criar a Sessão de Checkout. A Stripe valida os e-mails fornecidos dessa forma.
- Informe um e‑mail que você já tenha validado no [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

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

const EmailInput = () => {
  const checkoutState = useCheckoutElements();
  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;
```

## Coletar dados de pagamento [Do lado do cliente]

Colete dados de pagamento no cliente com o [Payment Element](https://docs.stripe.com/payments/payment-element.md). O Payment Element é um componente de IU que simplifica a coleta de dados de pagamento para diversas formas de pagamento.

O Payment Element contém um iframe que envia dados de pagamento com segurança à Stripe por uma conexão HTTPS. Evite colocar o Payment Element dentro de outro iframe porque algumas formas de pagamento exigem o redirecionamento para outra página para confirmação do pagamento.

Se você optar por usar um iframe e quiser aceitar Apple Pay ou Google Pay, o iframe deve ter o atributo [permitir](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) definido como igual a `"pagamento *"`.

O endereço da página de Checkout deve começar com `https://` rather em vez de `http://` for para que sua integração funcione corretamente. Você pode testar sua integração sem usar HTTPS, mas lembre-se de [habilitá-lo](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos em tempo real.

#### HTML + JS

Primeiro, crie um elemento DOM de contêiner para montar o [Payment Element](https://docs.stripe.com/payments/payment-element.md). Em seguida, crie uma instância do `Payment Element` usando [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) e monte-a chamando [element.mount](https://docs.stripe.com/js/element/mount), fornecendo um seletor CSS ou o elemento DOM do contêiner.

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

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

Veja as opções disponíveis na documentação da [Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Você pode [personalizar a aparência](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos os Elements passando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) ao inicializar o Checkout no frontend.

#### React

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

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

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

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

Veja as opções disponíveis na documentação da [Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Você pode [personalizar a aparência](https://docs.stripe.com/payments/checkout/customization/appearance.md) de todos os Elements passando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) para o [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Enviar o pagamento [Do lado do cliente]

#### HTML + JS

Renderize um botão **Pagar** que chame a [confirmação](https://docs.stripe.com/js/custom_checkout/confirm) da instância `Checkout` para enviar o pagamento.

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

Renderize um botão **Pay** que chama [confirm](https://docs.stripe.com/js/custom_checkout/confirm) de [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) para enviar o pagamento.

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

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  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;
```

## Teste sua integração

Para testar sua integração, escolha a forma de pagamento e toque em **Pay**. Em uma *área restrita* (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), isso o redirecionará para uma página de pagamento de teste, onde você poderá aprovar ou recusar o pagamento.

No modo ao vivo, ao tocar em **Pay**, você será redireciona para o site oxxo — você não terá a opção de aprovar ou recusar o pagamento com o oxxo.


# 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/oxxo/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

Para determinar qual API atende melhor às necessidades do seu negócio, consulte o [guia de comparação](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Use o [Payment Element](https://docs.stripe.com/payments/payment-element.md) para incorporar um formulário de pagamento personalizado da Stripe e seu site ou aplicativo e oferecer formas de pagamento aos clientes. Para configurações avançadas e personalizações, consulte o guia de integração [Aceitar um Pagamento](https://docs.stripe.com/payments/accept-a-payment.md).

## Configurar a Stripe [Lado do servidor]

Para começar, [crie uma conta Stripe](https://dashboard.stripe.com/register).

Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:

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

## Coletar dados de pagamento [Do lado do cliente]

Está tudo pronto para você coletar dados de pagamento do cliente com o Payment Element. O Payment Element é um componente de IU pré-integrado que simplifica a coleta de dados de pagamento para diversas formas de pagamento.

O Payment Element contém um iframe que envia dados de pagamento com segurança à Stripe por uma conexão HTTPS. Evite colocar o Payment Element dentro de outro iframe porque algumas formas de pagamento exigem o redirecionamento para outra página para confirmação do pagamento.

O endereço da página de checkout deve começar com `https://` em vez de `http://` para que sua integração funcione. Você pode testar sua integração sem usar HTTPS, mas lembre-se de [habilitá-la](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos em tempo real.

#### HTML + JS

### Configurar Stripe.js

O Payment Element está automaticamente disponível como um recurso do Stripe.js. Inclua o script Stripe.js em sua página de checkout adicionando-o ao `head` do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não inclua o script em um pacote nem hospede pessoalmente uma cópia dele.

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

Crie uma instância da Stripe com o seguinte JavaScript na sua página de checkout:

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

### Adicione o Payment Element à sua página de checkout

O Payment Element precisa de um lugar na sua página de checkout. Crie um nó do DOM vazio (contêiner) com um ID único no seu formulário de pagamento:

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

#### Controlar formas de pagamento no Dashboard

Após carregar o formulário acima, crie uma instância do Elements com `mode`, `amount` e `currency`. Esses valores determinam quais formas de pagamento são vistas pelo cliente. Para informar uma nova forma de pagamento no formulário, habilite-a no [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```javascript
const options = {mode:'payment',
  amount:1099,
  currency: 'mxn',
  // 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');
```

#### Listar manualmente as formas de pagamento

Para listar manualmente as formas de pagamento que você deseja disponibilizar, adicione cada uma delas a `paymentMethodTypes`.

Em seguida, crie uma instância do Payment Element e monte-a no nó DOM do contêiner.

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

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

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

#### React

### Configurar Stripe.js

Instale o [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e o [carregador Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) do registro público npm.

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

### Adicione e configure o provedor do Elements na sua página de checkout

Para usar o componente Payment Element, encapsule o componente da página de checkout em um [provedor do Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Chame `loadStripe` com sua chave publicável e passe a `Promise` retornada para o provedor `Elements`.

#### Controlar formas de pagamento no Dashboard

O provedor do `Elements` também aceita `mode`, `amount` e `currency`. Esses valores determinam quais formas de pagamento são vistas pelo cliente. Para informar uma nova forma de pagamento no formulário, habilite-a no [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: 'mxn',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

#### Listar manualmente as formas de pagamento

```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: 'mxn',
    paymentMethodTypes: ['oxxo'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Adicione o componente Payment Element

Use o componente `PaymentElement` para criar seu formulário.

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

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

export default CheckoutForm;
```

É possível personalizar o Payment Element para corresponder ao design do seu site passando o [objeto appearance](https://docs.stripe.com/elements/appearance-api.md) em `options` na criação do provedor do `Elements`.

### Solicitar endereços

Por padrão, o Payment Element só recolhe os detalhes necessários do endereço de faturamento. Alguns comportamentos, como [calcular impostos](https://docs.stripe.com/api/tax/calculations/create.md) ou inserir detalhes de entrega, exigem o endereço completo do cliente. Você pode:

- Use o [Address Element](https://docs.stripe.com/elements/address-element.md) para aproveitar os recursos de autocompletar e traduzir para recolher o endereço completo do cliente. Isso ajuda a garantir um cálculo tributário mais preciso.
- Obtenha os detalhes do endereço usando seu próprio formulário personalizado.

## Crie um PaymentIntent [Lado do servidor]

> #### Execute uma lógica comercial personalizada imediatamente antes da confirmação do pagamento
> 
> Acesse a [etapa 5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) do guia de finalização de pagamentos para executar sua lógica de negócio personalizada imediatamente antes da confirmação do pagamento. Caso contrário, siga as etapas abaixo para ter uma integração mais simples, que usa `stripe.confirmPayment` no cliente para confirmar o pagamento e gerenciar as próximas ações.

#### Controlar formas de pagamento no Dashboard

Quando o cliente enviar seu formulário de pagamento, use um *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 o processo de confirmação e pagamento. Crie um PaymentIntent no seu servidor com `amount` e `currency`. Para evitar que clientes mal-intencionados escolham seus próprios preços, sempre decida quanto cobrar no lado do servidor (um ambiente confiável) e não no cliente.

Um `PaymentIntent` inclui um *segredo do 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)). Envie esse valor ao seu cliente para que o Stripe.js o utilize para concluir o processo de pagamento com segurança.

#### Accounts v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

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

#### Clientes v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

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

#### Listar manualmente as formas de pagamento

Quando o cliente enviar seu formulário de pagamento, use um *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 o processo de confirmação e pagamento. Crie um PaymentIntent no seu servidor com `amount`, `currency` e uma ou mais formas de pagamento usando `payment_method_types`. Para evitar que clientes mal-intencionados escolham seus próprios preços, sempre decida quanto cobrar no lado do servidor (um ambiente confiável) e não no cliente.

Incluído em um PaymentIntent está um *segredo do 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)). Retorne esse valor ao cliente para que o Stripe.js possa usá-lo na conclusão do processo de pagamento com segurança.

#### Accounts v2

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent' do
  intent = client.v1.payment_intents.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: customer_account.id,
    amount: 1099,
    currency: 'mxn',
    payment_method_types: ['oxxo'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Clientes v1

#### Ruby

```ruby
require 'stripe'
# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

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

## Enviar o pagamento para a Stripe [Do lado do cliente]

Use [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) para concluir o pagamento usando os detalhes do Payment Element.

Forneça um [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) a essa função para indicar para onde a Stripe redireciona o usuário após a conclusão do pagamento. Seu usuário pode ser redirecionado inicialmente para um site intermediário, como uma página de autorização bancária, antes de ser redirecionado para `return_url`. Os pagamentos com cartão são redirecionados imediatamente para `return_url` quando um pagamento é finalizado.

Se não quiser redirecionar pagamentos com cartão após a conclusão do pagamento, defina [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) como `if_required`. Isso somente redireciona os clientes que fazem checkout com formas de pagamento baseadas em redirecionamento.

#### 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: Processar eventos pós-pagamento

Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) quando o pagamento é concluído. Use o Dashboard, um *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) personalizado ou uma solução de parceiros para receber esses eventos e executar ações, como enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega.

Escute esses eventos em vez de aguardar um retorno de chamada do cliente. No cliente, o consumidor pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada, o que permite que clientes mal-intencionados manipulem a resposta. Configurar a integração para escutar eventos assíncronos também ajuda a aceitar mais formas de pagamento no futuro. Conheça as [diferenças entre todas as formas de pagamento aceitas](https://stripe.com/payments/payment-methods-guide).

- **Tratar eventos manualmente no Dashboard**

  Use o Dashboard para [visualizar seus pagamentos de teste no Dashboard](https://dashboard.stripe.com/test/payments), enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos que falharam.

- **Crie um webhook personalizado**

  [Crie um gerenciador de webhooks personalizado](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) para detectar eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração de webhook localmente usando o Stripe CLI.

- **Integrar um aplicativo pré-criado**

  Lide com eventos comuns da empresa, como [automação](https://stripe.partners/?f_category=automation) ou [marketing e vendas](https://stripe.partners/?f_category=marketing-and-sales), integrando um aplicativo de parceiros.

## Teste sua integração

Para testar sua integração, escolha a forma de pagamento e toque em **Pay**. Em uma *área restrita* (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), isso o redirecionará para uma página de pagamento de teste, onde você poderá aprovar ou recusar o pagamento.

No modo ao vivo, ao tocar em **Pay**, você será redireciona para o site oxxo — você não terá a opção de aprovar ou recusar o pagamento com o oxxo.

## Códigos de erro

Esta tabela detalha os códigos de erro comuns e as ações recomendadas:

| Código de erro                                            | Ação recomendada                                                                                                                                                                                                                                                                                                                                                                      |
| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Insira uma moeda aceita.                                                                                                                                                                                                                                                                                                                                                              |
| `missing_required_parameter`                              | Verifique a mensagem de erro para obter mais informações sobre o parâmetro exigido.                                                                                                                                                                                                                                                                                                   |
| `payment_intent_payment_attempt_failed`                   | Esse código pode aparecer no campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de um PaymentIntent. Verifique a mensagem de erro para obter um motivo de falha detalhado e sugestões sobre o tratamento de erros.                                                                                  |
| `payment_intent_authentication_failure`                   | Este código pode aparecer no campo [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) de um PaymentIntent. Verifique a mensagem de erro para obter um motivo detalhado da falha e sugestões de como lidar com o erro. Este erro ocorre quando você aciona manualmente uma falha ao testar sua integração. |
| `payment_intent_redirect_confirmation_without_return_url` | Informe um `return_url` quando confirmar um PaymentIntent.                                                                                                                                                                                                                                                                                                                            |


# 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/oxxo/accept-a-payment?payment-ui=mobile&platform=ios.

> Recomendamos seguir o guia [Aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md), a menos que precise usar confirmação manual no lado do servidor ou que sua integração exija apresentação separada de formas de pagamento. Se você já fez a integração com o Elements, consulte o [guia de migração do Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Para receber OXXO em seu aplicativo, é preciso exibir uma visualização web da guia OXXO. O *cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) recebe uma guia com um número específico e paga em dinheiro em uma loja de conveniência OXXO. Você recebe um aviso da Stripe quando o pagamento é recebido.

## Configurar a Stripe [Lado do servidor] [Lado do cliente]

Primeiro, você precisa de uma conta Stripe. [Inscreva-se aqui](https://dashboard.stripe.com/register).

### Lado do servidor

Esta integração exige que os endpoints do seu servidor se comuniquem com a API Stripe. Use as bibliotecas oficiais para acessar a API Stripe do seu 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 do cliente

O [SDK da Stripe para iOS](https://github.com/stripe/stripe-ios) é de código aberto, [totalmente documentado](https://stripe.dev/stripe-ios/index.html) e compatível com aplicativos que aceitam iOS 13 ou versões mais recentes.

#### Gerenciador de pacotes Swift

Para instalar o SDK, siga estas etapas:

1. No Xcode, selecione **Arquivo** > **Adicionar dependências de pacote…** e insira `https://github.com/stripe/stripe-ios-spm` como URL do repositório.
1. Selecione o número da última versão da nossa [página de lançamentos](https://github.com/stripe/stripe-ios/releases).
1. Adicione o produto **StripePaymentsUI** ao [alvo do seu aplicativo](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app).

#### CocoaPods

1. Se ainda não o fez, instale a versão mais recente do [CocoaPods](https://guides.cocoapods.org/using/getting-started.html).
1. Se não tiver um [Podfile](https://guides.cocoapods.org/syntax/podfile.html), execute o seguinte comando para criar um:
   ```bash
   pod init
   ```
1. Adicione esta linha ao seu `Podfile`:
   ```podfile
   pod 'StripePaymentsUI'
   ```
1. Execute o seguinte comando:
   ```bash
   pod install
   ```
1. Não se esqueça de usar o arquivo `.xcworkspace` para abrir seu projeto em Xcode, em vez do arquivo `.xcodeproj`, daqui em diante.
1. No futuro, para atualizar para a versão mais recente do SDK, execute:
   ```bash
   pod update StripePaymentsUI
   ```

#### Carthage

1. Se ainda não o fez, instale a versão mais recente do [Carthage](https://github.com/Carthage/Carthage#installing-carthage).
1. Adicione esta linha ao seu `Cartfile`:
   ```cartfile
   github "stripe/stripe-ios"
   ```
1. Siga as [instruções de instalação do Carthage](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Certifique-se de integrar todas as estruturas necessárias listadas [here](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. No futuro, para atualizar para a versão mais recente do SDK, execute o seguinte comando:
   ```bash
   carthage update stripe-ios --platform ios
   ```

#### Estrutura manual

1. Vá até a nossa [página de lançamentos do GitHub](https://github.com/stripe/stripe-ios/releases/latest) e baixe e descompacte o **Stripe.xcframework.zip**.
1. Arraste **StripePaymentsUI.xcframework** até a seção **Embedded Binaries** das configurações **General** no seu projeto Xcode. Certifique-se de selecionar **Copy items if needed**.
1. Repita a etapa 2 para todas as estruturas necessárias listadas [here](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking).
1. No futuro, para atualizar para a versão mais recente do nosso SDK, repita as etapas 1 a 3.

> Para obter mais informações sobre a versão mais recente e as versões anteriores do SDK, consulte a página [Lançamentos](https://github.com/stripe/stripe-ios/releases) no GitHub. Para receber notificações quando um novo lançamento for publicado, [assista aos lançamentos](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository) do repositório.

Configure o SDK com sua [chave publicável da Stripe](https://dashboard.stripe.com/test/apikeys) na inicialização do aplicativo. Isso permite que seu aplicativo faça solicitações à API da 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
    }
}
```

> Use suas [chaves de teste](https://docs.stripe.com/keys.md#obtain-api-keys) enquanto testa e desenvolve, e suas chaves de [modo de produção](https://docs.stripe.com/keys.md#test-live-modes) quando publicar seu aplicativo.

## Crie um PaymentIntent [Lado do servidor] [Do lado do cliente]

Um [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) é um objeto que representa sua intenção de coletar o pagamento de um cliente, acompanhando todas as etapas do ciclo de vida do processo de pagamento.

### Lado do servidor

Crie um PaymentIntent no seu servidor com um valor e a moeda `mxn` (OXXO não aceita outras moedas). Se você já tiver uma integração usando a [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), adicione `oxxo` à lista de [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) para o seu `PaymentIntent`.

#### curl

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

### Outras opções da forma de pagamento

Você pode especificar um parâmetro opcional `expires_after_days` nas [opções da forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) para o `PaymentIntent`, definindo os dias corridos até o vencimento de uma guia OXXO. Por exemplo, se você criar uma guia OXXO na segunda-feira e a configuração de `expires_after_days` for 2, a guia vencerá na quarta-feira, às 23h59, horário da América/Mexico_City (UTC-6). O parâmetro `expires_after_days` pode ser de 1 a 7 dias. O padrão é 3 dias.

### Lado do cliente

No cliente, solicite um PaymentIntent a partir de seu servidor e armazene o segredo de cliente.

#### Swift

```swift
class CheckoutViewController: UIViewController {
    var paymentIntentClientSecret: String?

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

## Coletar dados da forma de pagamento [Do lado do cliente]

Em seu aplicativo, colete os seguintes dados de cobrança obrigatórios do cliente. Crie um [STPPaymentIntentParams](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentIntentParams.html) com esses dados.

| Campo   | Valor                                                                                                              |
| ------- | ------------------------------------------------------------------------------------------------------------------ |
| `name`  | Nome completo (nome e sobrenome) do cliente. O nome e o sobrenome precisam ter pelo menos dois caracteres cada um. |
| `email` | Endereço de e-mail completo do cliente.                                                                            |

#### Swift

```swift
let billingDetails = STPPaymentMethodBillingDetails()
billingDetails.name = "Jane Doe"
billingDetails.email = "test@example.com" EOF )
```

## Enviar o pagamento para a Stripe [Do lado do cliente]

Obtenha o segredo do cliente no PaymentIntent criado da etapa 2 e chame [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:). Será apresentada uma visualização web da guia OXXO. Ao concluir, o bloco de conclusão é chamado com o resultado do pagamento.

#### Swift

```swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: paymentIntentClientSecret)
let oxxoParams = STPPaymentMethodOXXOParams();
paymentIntentParams.paymentMethodParams = STPPaymentMethodParams(
    oxxo: oxxoParams,
    billingDetails: billingDetails,
    metadata: nil
)

STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self) { (handlerStatus, paymentIntent, error) in
    switch handlerStatus {
    case .succeeded:
        // The OXXO voucher was displayed successfully. The customer can now pay the OXXO voucher at the OXXO convenience store.
    case .canceled:
        // Payment was canceled

    case .failed:
        // Payment failed

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

### Opcional: envie e-mail ao cliente com um link para a guia de pagamento

A Stripe envia um evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) quando uma guia OXXO é criada. Se precisar enviar um e-mail ao cliente com o link para a guia, [acesse o PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) para obter o link, após receber o evento. O campo `hosted_voucher_url` em [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contém o link para a guia.

### Opcional: personalizar a guia

A Stripe permite personalizar as IUs exibidas para seus clientes na página [Configurações da marca](https://dashboard.stripe.com/account/branding).

Estas configurações de marca podem ser aplicadas à guia:

- **Ícone**: a imagem de sua marca e nome fantasia da empresa
- **Cor de destaque**: usada no botão Copiar número
- **Cor da marca**: usada como cor de fundo

## Gerenciar eventos pós-pagamento [Lado do servidor]

OXXO é uma forma de pagamento com [notificação atrasada](https://docs.stripe.com/payments/payment-methods.md#payment-notification), portanto os fundos não ficam disponíveis imediatamente. *Customers* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) podem não pagar a guia OXXO em uma loja de conveniência OXXO imediatamente após finalizar o checkout.

A Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) no dia útil seguinte (de segunda a sexta, exceto feriados do calendário mexicano) para todas as guias OXXO pagas. Use o Dashboard ou crie um gerenciador de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para receber esses eventos e executar ações (por exemplo, enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega).

Após a data de expiração, o status do PaymentIntent passa para `processing` (processando) e o cliente não pode mais pagar a guiar OXXO vencida. Se o voucher OXXO não for pago antes de 23:59 America/Mexico_City (UTC-6) na data de expiração, a Stripe envia um evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) dentro de 10 dias corridos após a data de expiração (na maioria dos casos, esse evento é enviado dentro de 7 dias corridos). Por exemplo, se a guia OXXO vencer em 1º de setembro, esse evento será enviado até 10 de setembro, no máximo.

| Evento                           | Descrição                                          | Próximas etapas                                                                                    |
| -------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | A guia OXXO é criada.                              | Espere que o cliente pague a guia OXXO.                                                            |
| `payment_intent.processing`      | O cliente não pode mais pagar a guia OXXO.         | Aguarde a confirmação ou falha do pagamento.                                                       |
| `payment_intent.succeeded`       | O cliente pagou a guia OXXO antes do vencimento.   | Execute o pedido de mercadorias ou serviços do cliente.                                            |
| `payment_intent.payment_failed`  | O cliente não pagou o guia OXXO antes da validade. | Entre em contato com o cliente por e-mail ou notificação push e solicite outra forma de pagamento. |

### Receber eventos e tomar providências comerciais

#### Manualmente

Use o Stripe Dashboard para ver todos os pagamentos da Stripe, enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos com falha.

- [Veja os pagamentos de teste no Dashboard](https://dashboard.stripe.com/test/payments)

#### Código personalizado

Crie um gerenciador de webhooks para ouvir eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração do webhook localmente usando a CLI da Stripe.

- [Crie um Webhook personalizado](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Testar a integração

Em uma *área restrita* (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), defina [STPPaymentMethodBillingDetails email](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentMethodBillingDetails.html#/c:@M@StripePayments@objc\(cs\)STPPaymentMethodBillingDetails\(py\)email) de acordo com os valores a seguir ao chamar [STPPaymentHandler confirmPayment](https://stripe.dev/stripe-ios/stripe-payments/Classes/STPPaymentHandler.html#/c:@M@StripePayments@objc\(cs\)STPPaymentHandler\(im\)confirmPayment:withAuthenticationContext:completion:) para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula uma guia OXXO paga pelo cliente depois de 3 minutos, com o webhook `payment_intent.succeeded` recebido depois de cerca de 3 minutos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula uma guia OXXO paga imediatamente pelo cliente, com o webhook `payment_intent.succeeded` recebido depois de alguns segundos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de alguns segundos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para o horário atual, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 3 minutos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para 3 minutos no futuro, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_with_delay@test.com    |
| `{any_prefix}fill_never@{any_domain}`          | Simula uma guia OXXO que expira sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 1&nbsp;dia e 2&nbsp;dias&nbsp;corridos. Em produção, este webhook chega no mesmo momento que no modo de teste.

  Exemplo: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                            |

## Validade e cancelamento

As guias do OXXO expiram após o carimbo de data e hora do UNIX `expires_after` e o cliente não pode pagá-lo após a expiração. As guias do OXXO não podem ser canceladas antes de expirar.

Depois do vencimento da guia OXXO, o status do PaymentIntent muda para `requires_payment_method`. Neste ponto, você pode confirmar o PaymentIntent com outra forma de pagamento ou cancelar.


# 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/oxxo/accept-a-payment?payment-ui=mobile&platform=android.

> Recomendamos seguir o guia [Aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md), a menos que precise usar confirmação manual no lado do servidor ou que sua integração exija apresentação separada de formas de pagamento. Se você já fez a integração com o Elements, consulte o [guia de migração do Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Para receber OXXO em seu aplicativo, é preciso exibir uma visualização web da guia OXXO. O *cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) recebe uma guia com um número específico e paga em dinheiro em uma loja de conveniência OXXO. Você recebe um aviso da Stripe quando o pagamento é recebido.

## Configurar a Stripe [Lado do servidor] [Lado do cliente]

Primeiro, você precisa de uma conta Stripe. [Inscreva-se aqui](https://dashboard.stripe.com/register).

### Lado do servidor

Esta integração exige que os endpoints do seu servidor se comuniquem com a API Stripe. Use as bibliotecas oficiais para acessar a API Stripe do seu 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 do cliente

O [SDK da Stripe para Android](https://github.com/stripe/stripe-android) é de código aberto e [totalmente documentado](https://stripe.dev/stripe-android/).

Para instalar o SDK, adicione `stripe-android` ao bloco `dependencies` do arquivo [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.8.0")
  // Include the financial connections SDK to support US bank account as a payment method
  implementation("com.stripe:financial-connections:23.8.0")
}
```

> Veja mais informações sobre o último lançamento de SDK e as versões anteriores na página [Lançamentos](https://github.com/stripe/stripe-android/releases) no GitHub. Para receber notificações quando um novo lançamento for publicado, [assista aos lançamentos do repositório](https://docs.github.com/en/github/managing-subscriptions-and-notifications-on-github/configuring-notifications#configuring-your-watch-settings-for-an-individual-repository).

Configure o SDK com sua [chave publicável](https://dashboard.stripe.com/apikeys) da Stripe, de modo que seja possível fazer solicitações à API Stripe, como em sua subcategoria `Application`:

#### Kotlin

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

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

> Use suas [chaves de teste](https://docs.stripe.com/keys.md#obtain-api-keys) enquanto testa e desenvolve, e suas chaves de [modo de produção](https://docs.stripe.com/keys.md#test-live-modes) quando publicar seu aplicativo.

Nossas amostras de código também usam [OkHttp](https://github.com/square/okhttp) e [GSON](https://github.com/google/gson) para fazer solicitações HTTP a um servidor.

## Crie um PaymentIntent [Lado do servidor] [Do lado do cliente]

Um [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) é um objeto que representa sua intenção de coletar o pagamento de um cliente, acompanhando todas as etapas do ciclo de vida do processo de pagamento.

### Lado do servidor

Crie um PaymentIntent no seu servidor com um valor e a moeda `mxn` (OXXO não aceita outras moedas). Se você já tiver uma integração usando a [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), adicione `oxxo` à lista de [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) para o seu `PaymentIntent`.

#### curl

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

### Outras opções da forma de pagamento

Você pode especificar um parâmetro opcional `expires_after_days` nas [opções da forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) para o `PaymentIntent`, definindo os dias corridos até o vencimento de uma guia OXXO. Por exemplo, se você criar uma guia OXXO na segunda-feira e a configuração de `expires_after_days` for 2, a guia vencerá na quarta-feira, às 23h59, horário da América/Mexico_City (UTC-6). O parâmetro `expires_after_days` pode ser de 1 a 7 dias. O padrão é 3 dias.

### Lado do cliente

No cliente, solicite um PaymentIntent a partir de seu servidor e armazene o segredo de cliente.

#### Kotlin

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

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

## Coletar dados da forma de pagamento [Do lado do cliente]

No seu aplicativo, colete os seguintes dados de cobrança obrigatórios do cliente. Crie um [PaymentMethodCreateParams](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method-create-params/index.html) com esses dados.

| Campo   | Valor                                                                                                              |
| ------- | ------------------------------------------------------------------------------------------------------------------ |
| `name`  | Nome completo (nome e sobrenome) do cliente. O nome e o sobrenome precisam ter pelo menos dois caracteres cada um. |
| `email` | Endereço de e-mail completo do cliente.                                                                            |

#### Kotlin

```kotlin
val billingDetails =
  PaymentMethod.BillingDetails(email = "email@email.com", name = "Jenny Rosen")
val paymentMethodCreateParams = PaymentMethodCreateParams.createOxxo(billingDetails)
```

## Enviar o pagamento para a Stripe [Do lado do cliente]

Obtenha o segredo do cliente no PaymentIntent criado na etapa 2 e chame [PaymentLauncher confirm](https://stripe.dev/stripe-android/payments-core/com.stripe.android.payments.paymentlauncher/-payment-launcher/index.html#74063765%2FFunctions%2F-1622557690). Será apresentada uma visualização web da guia OXXO. Em seguida, `onPaymentResult` é chamado com o resultado do pagamento.

#### Kotlin

```kotlin
class OXXOActivity : 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() {
        // ...

        val confirmParams = ConfirmPaymentIntentParams
                .createWithPaymentMethodCreateParams(
                  paymentMethodCreateParams = paymentMethodCreateParams,
                  clientSecret = paymentIntentClientSecret
                )
        paymentLauncher.confirm(confirmParams)
    }

    private fun onPaymentResult(paymentResult: PaymentResult) {
        when (paymentResult) {
            is PaymentResult.Completed -> {
                // The OXXO voucher was displayed successfully.
                // The customer can now pay the OXXO voucher at the OXXO convenience store.
            }
            is PaymentResult.Canceled -> {
                // handle cancel flow
            }
            is PaymentResult.Failed -> {
                // handle failures
                // (for example, the customer may need to choose a new payment
                // method)
            }
        }
    }
}
```

### Opcional: envie e-mail ao cliente com um link para a guia de pagamento

A Stripe envia um evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) quando uma guia OXXO é criada. Se precisar enviar um e-mail ao cliente com o link para a guia, [acesse o PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) para obter o link, após receber o evento. O campo `hosted_voucher_url` em [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contém o link para a guia.

### Opcional: personalizar a guia

A Stripe permite personalizar as IUs exibidas para seus clientes na página [Configurações da marca](https://dashboard.stripe.com/account/branding).

Estas configurações de marca podem ser aplicadas à guia:

- **Ícone**: a imagem de sua marca e nome fantasia da empresa
- **Cor de destaque**: usada no botão Copiar número
- **Cor da marca**: usada como cor de fundo

## Gerenciar eventos pós-pagamento [Lado do servidor]

OXXO é uma forma de pagamento com [notificação atrasada](https://docs.stripe.com/payments/payment-methods.md#payment-notification), portanto os fundos não ficam disponíveis imediatamente. *Customers* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) podem não pagar a guia OXXO em uma loja de conveniência OXXO imediatamente após finalizar o checkout.

A Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) no dia útil seguinte (de segunda a sexta, exceto feriados do calendário mexicano) para todas as guias OXXO pagas. Use o Dashboard ou crie um gerenciador de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para receber esses eventos e executar ações (por exemplo, enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega).

Após a data de expiração, o status do PaymentIntent passa para `processing` (processando) e o cliente não pode mais pagar a guiar OXXO vencida. Se o voucher OXXO não for pago antes de 23:59 America/Mexico_City (UTC-6) na data de expiração, a Stripe envia um evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) dentro de 10 dias corridos após a data de expiração (na maioria dos casos, esse evento é enviado dentro de 7 dias corridos). Por exemplo, se a guia OXXO vencer em 1º de setembro, esse evento será enviado até 10 de setembro, no máximo.

| Evento                           | Descrição                                          | Próximas etapas                                                                                    |
| -------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | A guia OXXO é criada.                              | Espere que o cliente pague a guia OXXO.                                                            |
| `payment_intent.processing`      | O cliente não pode mais pagar a guia OXXO.         | Aguarde a confirmação ou falha do pagamento.                                                       |
| `payment_intent.succeeded`       | O cliente pagou a guia OXXO antes do vencimento.   | Execute o pedido de mercadorias ou serviços do cliente.                                            |
| `payment_intent.payment_failed`  | O cliente não pagou o guia OXXO antes da validade. | Entre em contato com o cliente por e-mail ou notificação push e solicite outra forma de pagamento. |

### Receber eventos e tomar providências comerciais

#### Manualmente

Use o Stripe Dashboard para ver todos os pagamentos da Stripe, enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos com falha.

- [Veja os pagamentos de teste no Dashboard](https://dashboard.stripe.com/test/payments)

#### Código personalizado

Crie um gerenciador de webhooks para ouvir eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração do webhook localmente usando a CLI da Stripe.

- [Crie um Webhook personalizado](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Testar a integração

Em uma área restrita, defina [PaymentMethod.BillingDetails#email](https://stripe.dev/stripe-android/payments-core/com.stripe.android.model/-payment-method/-billing-details/index.html) de acordo com os valores a seguir ao chamar [Stripe\# confirmPayment()](https://stripe.dev/stripe-android/payments-core/com.stripe.android/-stripe/confirm-payment.html) para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula uma guia OXXO paga pelo cliente depois de 3 minutos, com o webhook `payment_intent.succeeded` recebido depois de cerca de 3 minutos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula uma guia OXXO paga imediatamente pelo cliente, com o webhook `payment_intent.succeeded` recebido depois de alguns segundos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de alguns segundos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para o horário atual, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 3 minutos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para 3 minutos no futuro, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_with_delay@test.com    |
| `{any_prefix}fill_never@{any_domain}`          | Simula uma guia OXXO que expira sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 1&nbsp;dia e 2&nbsp;dias&nbsp;corridos. Em produção, este webhook chega no mesmo momento que no modo de teste.

  Exemplo: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                            |

## Validade e cancelamento

As guias do OXXO expiram após o carimbo de data e hora do UNIX `expires_after` e o cliente não pode pagá-lo após a expiração. As guias do OXXO não podem ser canceladas antes de expirar.

Depois do vencimento da guia OXXO, o status do PaymentIntent muda para `requires_payment_method`. Neste ponto, você pode confirmar o PaymentIntent com outra forma de pagamento ou cancelar.


# 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/oxxo/accept-a-payment?payment-ui=mobile&platform=react-native.

> Recomendamos seguir o guia [Aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md), a menos que precise usar confirmação manual no lado do servidor ou que sua integração exija apresentação separada de formas de pagamento. Se você já fez a integração com o Elements, consulte o [guia de migração do Payment Element](https://docs.stripe.com/payments/payment-element/migration.md).

Para receber OXXO em seu aplicativo, é preciso exibir uma visualização web da guia OXXO. O *cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) recebe uma guia com um número específico e paga em dinheiro em uma loja de conveniência OXXO. Você recebe um aviso da Stripe quando o pagamento é recebido.

## Configurar a Stripe [Lado do servidor] [Lado do cliente]

### Servidor

Esta integração exige que os endpoints do seu servidor se comuniquem com a API da Stripe. Use nossas bibliotecas oficiais para acessar a API da Stripe a partir do seu 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'
```

### Cliente

O [SDK do React Native](https://github.com/stripe/stripe-react-native) é de código aberto e totalmente documentado. Internamente, utiliza as SDKs de [iOS nativo](https://github.com/stripe/stripe-ios) e [Android](https://github.com/stripe/stripe-android). Para instalar o SDK do React Native da Stripe, execute um dos seguintes comandos no diretório do seu projeto (dependendo de qual gerenciador de pacotes você usa):

#### yarn

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

#### npm

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

Em seguida, instale algumas outras dependências necessárias:

- Para iOS, vá para o diretório **ios** e execute `pod install` para garantir a instalação das dependências nativas necessárias.
- Para Android, não há mais dependências para instalar.

> Recomendamos seguir o [guia oficial do TypeScript](https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project) para adicionar suporte ao TypeScript.

### Inicialização da Stripe

Para inicializar a Stripe no aplicativo React Native, insira sua tela de pagamento com o componente `StripeProvider` ou use o método de inicialização `initStripe`. Somente a [chave da API publicável](https://docs.stripe.com/keys.md#obtain-api-keys) em `publishableKey` é necessária. O exemplo a seguir mostra como inicializar a Stripe usando o 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>
  );
}
```

> Use suas [chaves de API de teste](https://docs.stripe.com/keys.md#obtain-api-keys) enquanto testa e desenvolve, e as chaves de [modo de produção](https://docs.stripe.com/keys.md#test-live-modes) quando publica seu aplicativo.

## Crie um PaymentIntent [Lado do servidor] [Do lado do cliente]

Um [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) é um objeto que representa sua intenção de coletar o pagamento de um cliente, acompanhando todas as etapas do ciclo de vida do processo de pagamento.

### Lado do servidor

Crie um PaymentIntent no seu servidor com um valor e a moeda `mxn` (OXXO não aceita outras moedas). Se você já tiver uma integração usando a [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), adicione `oxxo` à lista de [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) para o seu `PaymentIntent`.

#### curl

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

### Outras opções da forma de pagamento

Você pode especificar um parâmetro opcional `expires_after_days` nas [opções da forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) para o `PaymentIntent`, definindo os dias corridos até o vencimento de uma guia OXXO. Por exemplo, se você criar uma guia OXXO na segunda-feira e a configuração de `expires_after_days` for 2, a guia vencerá na quarta-feira, às 23h59, horário da América/Mexico_City (UTC-6). O parâmetro `expires_after_days` pode ser de 1 a 7 dias. O padrão é 3 dias.

### Do lado do cliente

No cliente, solicite um PaymentIntent a partir do seu servidor e armazene o *segredo 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)).

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

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

## Coletar dados da forma de pagamento [Do lado do cliente]

No seu aplicativo, colete o nome completo e endereço de e-mail do cliente.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

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

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

## Enviar o pagamento para a Stripe [Do lado do cliente]

Obtenha o segredo do cliente com o PaymentIntent criado e invoque `confirmPayment`. Será apresentada uma visualização web com a guia OXXO.

```javascript
export default function OxxoPaymentScreen() {
  const [name, setName] = useState();
  const [email, setEmail] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
      email,
    };

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Oxxo',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Payment confirmation error', error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.RequiresAction) {
        Alert.alert(
          'Success',
          `The OXXO voucher was created successfully. Awaiting payment from customer.`
        );
      } else {
        Alert.alert('Payment intent status:', paymentIntent.status);
      }
    }
  };

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

### Opcional: envie e-mail ao cliente com um link para a guia de pagamento

A Stripe envia um evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) quando uma guia OXXO é criada. Se precisar enviar um e-mail ao cliente com o link para a guia, [acesse o PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) para obter o link, após receber o evento. O campo `hosted_voucher_url` em [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contém o link para a guia.

### Opcional: personalizar a guia

A Stripe permite personalizar as IUs exibidas para seus clientes na página [Configurações da marca](https://dashboard.stripe.com/account/branding).

Estas configurações de marca podem ser aplicadas à guia:

- **Ícone**: a imagem de sua marca e nome fantasia da empresa
- **Cor de destaque**: usada no botão Copiar número
- **Cor da marca**: usada como cor de fundo

## Gerenciar eventos pós-pagamento [Lado do servidor]

OXXO é uma forma de pagamento com [notificação atrasada](https://docs.stripe.com/payments/payment-methods.md#payment-notification), portanto os fundos não ficam disponíveis imediatamente. *Customers* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) podem não pagar a guia OXXO em uma loja de conveniência OXXO imediatamente após finalizar o checkout.

A Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) no dia útil seguinte (de segunda a sexta, exceto feriados do calendário mexicano) para todas as guias OXXO pagas. Use o Dashboard ou crie um gerenciador de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para receber esses eventos e executar ações (por exemplo, enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega).

Após a data de expiração, o status do PaymentIntent passa para `processing` (processando) e o cliente não pode mais pagar a guiar OXXO vencida. Se o voucher OXXO não for pago antes de 23:59 America/Mexico_City (UTC-6) na data de expiração, a Stripe envia um evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) dentro de 10 dias corridos após a data de expiração (na maioria dos casos, esse evento é enviado dentro de 7 dias corridos). Por exemplo, se a guia OXXO vencer em 1º de setembro, esse evento será enviado até 10 de setembro, no máximo.

| Evento                           | Descrição                                          | Próximas etapas                                                                                    |
| -------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | A guia OXXO é criada.                              | Espere que o cliente pague a guia OXXO.                                                            |
| `payment_intent.processing`      | O cliente não pode mais pagar a guia OXXO.         | Aguarde a confirmação ou falha do pagamento.                                                       |
| `payment_intent.succeeded`       | O cliente pagou a guia OXXO antes do vencimento.   | Execute o pedido de mercadorias ou serviços do cliente.                                            |
| `payment_intent.payment_failed`  | O cliente não pagou o guia OXXO antes da validade. | Entre em contato com o cliente por e-mail ou notificação push e solicite outra forma de pagamento. |

### Receber eventos e tomar providências comerciais

#### Manualmente

Use o Stripe Dashboard para ver todos os pagamentos da Stripe, enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos com falha.

- [Veja os pagamentos de teste no Dashboard](https://dashboard.stripe.com/test/payments)

#### Código personalizado

Crie um gerenciador de webhooks para ouvir eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração do webhook localmente usando a CLI da Stripe.

- [Crie um Webhook personalizado](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Testar a integração

Em uma área restrita, use os e-mails a seguir ao chamar `confirmPayment` para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula uma guia OXXO paga pelo cliente depois de 3 minutos, com o webhook `payment_intent.succeeded` recebido depois de cerca de 3 minutos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula uma guia OXXO paga imediatamente pelo cliente, com o webhook `payment_intent.succeeded` recebido depois de alguns segundos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de alguns segundos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para o horário atual, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 3 minutos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para 3 minutos no futuro, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_with_delay@test.com    |
| `{any_prefix}fill_never@{any_domain}`          | Simula uma guia OXXO que expira sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 1&nbsp;dia e 2&nbsp;dias&nbsp;corridos. Em produção, este webhook chega no mesmo momento que no modo de teste.

  Exemplo: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                            |

## Validade e cancelamento

As guias do OXXO expiram após o carimbo de data e hora do UNIX `expires_after` e o cliente não pode pagá-lo após a expiração. As guias do OXXO não podem ser canceladas antes de expirar.

Depois do vencimento da guia OXXO, o status do PaymentIntent muda para `requires_payment_method`. Neste ponto, você pode confirmar o PaymentIntent com outra forma de pagamento ou cancelar.


# Direct API

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

> Esta seção trata de um produto *herdado* (Technology that's no longer recommended). Use o guia [Aceitar um pagamento](https://docs.stripe.com/payments/accept-a-payment.md) para ver o caminho de integração mais recente. Embora a Stripe ainda ofereça suporte a esse produto, ele pode terminar se o produto for descontinuado.

Usuários da Stripe no México podem aceitar pagamentos OXXO de clientes no México ao usar as APIs Payment Intents e Payment Methods. Os *clientes* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) pagam ao fornecer uma guia de pagamento OXXO com um número gerado e pagamento em espécie em uma loja de conveniência OXXO. Você é notificado pela Stripe após a conclusão do pagamento.

## Configurar a Stripe [Lado do servidor]

Primeiro, você precisa de uma conta da Stripe. [Inscreva-se aqui](https://dashboard.stripe.com/test/register).

Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:

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

## Crie um PaymentIntent [Lado do servidor]

A Stripe usa um objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para representar sua intenção de coletar o pagamento de um cliente, acompanhando mudanças de estado desde a criação da guia OXXO até seu pagamento.

Crie um PaymentIntent no seu servidor com um valor e a moeda `mxn` (OXXO não aceita outras moedas). Se você já tiver uma integração usando a [API Payment Intents](https://docs.stripe.com/payments/payment-intents.md), adicione `oxxo` à lista de [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) para o seu `PaymentIntent`.

#### curl

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

### Recuperar o segredo do cliente

O PaymentIntent inclui um *segredo do 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 o lado do cliente usa para concluir com segurança o processo de pagamento. Você pode usar abordagens diferentes para enviar a senha do cliente ao lado do cliente.

#### Aplicativo de página única

Recupere o segredo do cliente de um endpoint do servidor usando a função `fetch` do navegador. Essa abordagem é melhor quando o lado do cliente é um aplicativo com uma única página, principalmente se criado com uma estrutura de front-end moderna como o React. Crie o endpoint do servidor que envia o segredo do cliente:

#### Ruby

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

Em seguida, obtenha o segredo do cliente com JavaScript no lado do cliente:

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

#### Renderização do lado do servidor

Passe o segredo do cliente do servidor ao cliente. Essa abordagem funciona melhor quando o aplicativo gera conteúdo estático no servidor antes de enviá-lo ao navegador.

Adicione o [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) ao formulário de checkout. No código do lado do servidor, recupere o segredo do cliente do PaymentIntent:

#### Ruby

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

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

### Outras opções da forma de pagamento

Você pode especificar um parâmetro opcional `expires_after_days` nas [opções da forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days) para o `PaymentIntent`, definindo os dias corridos até o vencimento de uma guia OXXO. Por exemplo, se você criar uma guia OXXO na segunda-feira e a configuração de `expires_after_days` for 2, a guia vencerá na quarta-feira, às 23h59, horário da América/Mexico_City (UTC-6). O parâmetro `expires_after_days` pode ser de 1 a 7 dias. O padrão é 3 dias.

## Coletar dados da forma de pagamento [Do lado do cliente]

Crie um formulário de pagamento no cliente para obter os dados necessários para a cobrança:

| Campo   | Valor                                                                                                              |
| ------- | ------------------------------------------------------------------------------------------------------------------ |
| `name`  | Nome completo (nome e sobrenome) do cliente. O nome e o sobrenome precisam ter pelo menos dois caracteres cada um. |
| `email` | Endereço de e-mail completo do cliente.                                                                            |

```html
<form id="payment-form">
  <div class="form-row">
    <label for="name">
      Name
    </label>
    <input id="name" name="name" required>
  </div>

  <div class="form-row">
    <label for="email">
      Email
    </label>
    <input id="email" name="email" required>
  </div>

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

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

## Enviar o pagamento para a Stripe [Do lado do cliente]

Quando o cliente optar por pagar com OXXO, use Stripe.js para enviar o pagamento à Stripe. [Stripe.js](https://docs.stripe.com/payments/elements.md) é a nossa biblioteca principal de JavaScript para criação de fluxos de pagamento.

Inclua Stripe.js na sua página de checkout, adicionando o script ao `head` do seu arquivo HTML.

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

Crie uma instância de Stripe.js com o JavaScript a seguir em sua página de checkout.

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

Use [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) e o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) do objeto `PaymentIntent` criado na etapa 2 para enviar os dados de cobrança do cliente.

Depois da confirmação, a Stripe abre automaticamente um modal que mostra a guia de pagamento OXXO ao cliente.

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

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

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    });
  // Stripe.js will open a modal to display the OXXO voucher to your customer
  // This async function finishes when the customer closes the modal

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  }
});
```

> `stripe.confirmOxxoPayment` pode levar vários segundos para finalizar. Nesse período, previna que o formulário seja reenviado e apresente um indicador de espera, como um spinnner. Se receber um erro, mostre-o ao cliente, reative o formulário e oculte o spinner.

Quando uma guia OXXO é criado com sucesso, o valor da propriedade `status` do PaymentIntent retornado é `requires_action`. Verifique o status de um PaymentIntent no [Dashboard](https://dashboard.stripe.com/test/payments) ou inspecionando a propriedade status no objeto. Se o voucher OXXO não for criado com sucesso, verifique o `erro` retornado para determinar a causa (por exemplo, formato de e-mail inválido).

### Opcional: envie e-mail ao cliente com um link para a guia de pagamento

A Stripe envia um evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) quando uma guia OXXO é criada. Se precisar enviar um e-mail ao cliente com o link para a guia, [acesse o PaymentIntent](https://docs.stripe.com/api/payment_intents/retrieve.md) para obter o link, após receber o evento. O campo `hosted_voucher_url` em [payment_intent.next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-hosted_voucher_url) contém o link para a guia.

### Opcional: personalizar a guia

A Stripe permite personalizar as IUs exibidas para seus clientes na página [Configurações da marca](https://dashboard.stripe.com/account/branding).

Estas configurações de marca podem ser aplicadas à guia:

- **Ícone**: a imagem de sua marca e nome fantasia da empresa
- **Cor de destaque**: usada no botão Copiar número
- **Cor da marca**: usada como cor de fundo

## Gerenciar eventos pós-pagamento [Lado do servidor]

OXXO é uma forma de pagamento com [notificação atrasada](https://docs.stripe.com/payments/payment-methods.md#payment-notification), portanto os fundos não ficam disponíveis imediatamente. *Customers* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) podem não pagar a guia OXXO em uma loja de conveniência OXXO imediatamente após finalizar o checkout.

A Stripe envia um evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) no dia útil seguinte (de segunda a sexta, exceto feriados do calendário mexicano) para todas as guias OXXO pagas. Use o Dashboard ou crie um gerenciador de *webhooks* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) para receber esses eventos e executar ações (por exemplo, enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de entrega).

Após a data de expiração, o status do PaymentIntent passa para `processing` (processando) e o cliente não pode mais pagar a guiar OXXO vencida. Se o voucher OXXO não for pago antes de 23:59 America/Mexico_City (UTC-6) na data de expiração, a Stripe envia um evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) dentro de 10 dias corridos após a data de expiração (na maioria dos casos, esse evento é enviado dentro de 7 dias corridos). Por exemplo, se a guia OXXO vencer em 1º de setembro, esse evento será enviado até 10 de setembro, no máximo.

| Evento                           | Descrição                                          | Próximas etapas                                                                                    |
| -------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `payment_intent.requires_action` | A guia OXXO é criada.                              | Espere que o cliente pague a guia OXXO.                                                            |
| `payment_intent.processing`      | O cliente não pode mais pagar a guia OXXO.         | Aguarde a confirmação ou falha do pagamento.                                                       |
| `payment_intent.succeeded`       | O cliente pagou a guia OXXO antes do vencimento.   | Execute o pedido de mercadorias ou serviços do cliente.                                            |
| `payment_intent.payment_failed`  | O cliente não pagou o guia OXXO antes da validade. | Entre em contato com o cliente por e-mail ou notificação push e solicite outra forma de pagamento. |

### Receber eventos e tomar providências comerciais

#### Manualmente

Use o Stripe Dashboard para ver todos os pagamentos da Stripe, enviar recibos por e-mail, lidar com repasses ou tentar novamente pagamentos com falha.

- [Veja os pagamentos de teste no Dashboard](https://dashboard.stripe.com/test/payments)

#### Código personalizado

Crie um gerenciador de webhooks para ouvir eventos e criar fluxos personalizados de pagamentos assíncronos. Teste e depure a integração do webhook localmente usando a CLI da Stripe.

- [Crie um Webhook personalizado](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook)

## Testar a integração

Em uma área restrita, defina `payment_method.billing_details.email` de acordo com os valores a seguir ao chamar [stripe.confirmOxxoPayment](https://docs.stripe.com/js/payment_intents/confirm_oxxo_payment) para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula uma guia OXXO paga pelo cliente depois de 3 minutos, com o webhook `payment_intent.succeeded` recebido depois de cerca de 3 minutos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: fulano@test.com                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula uma guia OXXO paga imediatamente pelo cliente, com o webhook `payment_intent.succeeded` recebido depois de alguns segundos. Em produção, este webhook chega em 1&nbsp;dia útil.

  Exemplo: succeed_immediately@test.com                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de alguns segundos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para o horário atual, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_immediately@test.com |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula uma guia OXXO que vence sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 3 minutos.

  O campo `expires_after` em [next_action.oxxo_display_details](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after) está configurado para 3 minutos no futuro, independente da configuração do parâmetro `expires_after_days` em [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-oxxo-expires_after_days).

  Exemplo: expire_with_delay@test.com    |
| `{any_prefix}fill_never@{any_domain}`          | Simula uma guia OXXO que expira sem ser paga pelo cliente, com o webhook `payment_intent.payment_failed` recebido depois de 1&nbsp;dia e 2&nbsp;dias&nbsp;corridos. Em produção, este webhook chega no mesmo momento que no modo de teste.

  Exemplo: fill_never@test.com                                                                                                                                                                                                                                                                                                                                                                            |

## Optional: Exiba os dados do OXXO ao cliente [Do lado do cliente]

Recomendamos usar o Stripe.js para exibir a guia OXXO com `confirmOxxoPayment`. Mas você também pode exibir a guia aos clientes manualmente.

Você pode especificar `handleActions: false` ao chamar `stripe.confirmOxxoPayment` na etapa 4 para indicar que você lidará com a próxima ação para exibir os detalhes do OXXO ao seu cliente.

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

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

  const result = await stripe.confirmOxxoPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        billing_details: {
          name: document.getElementById('name').value,
          email: document.getElementById('email').value,
        },
      },
    }, {handleActions: false},
  );

  if (result.error) {
    // Display error to your customer
    const errorMsg = document.getElementById('error-message');
    errorMsg.innerText = result.error.message;
  } else {
    // An OXXO voucher was successfully created
    const amount = result.paymentIntent.amount;
    const currency = result.paymentIntent.currency;

    const details = result.paymentIntent.next_action.oxxo_display_details;
    const number = details.number;
    const expires_after = details.expires_after;

    // Handle the next action by displaying the OXXO details to your customer

    // You can also use the generated hosted voucher
    const hosted_voucher_url = result.paymentIntent.next_action.oxxo_display_details.hosted_voucher_url;
  }
});
```

Inclua, no mínimo, o seguinte:

| Detalhe                 | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Logotipo OXXO           | [Baixe](https://stripe.com/img/docs/payments/oxxo.png) e exiba o logotipo da OXXO no guia.
oxxo                                                                                                                                                                                                                                                                                                                                     |
| Número                  | Localize o número no objeto `PaymentIntent` em [next_action.oxxo_display_details.number](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-number).                                                                                                                                                                                                                      |
| Data de validade        | Localize o carimbo de data e hora UNIX para vencimento da guia OXXO, no `PaymentIntent` em [next_action.oxxo_display_details.expires_after](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-oxxo_display_details-expires_after).                                                                                                                                                            |
| Valor                   | O valor a ser cobrado.                                                                                                                                                                                                                                                                                                                                                                                                              |
| Moeda                   | As guias OXXO sempre são cobradas em pesos mexicanos.                                                                                                                                                                                                                                                                                                                                                                               |
| Código de barras        | Gere o código de barras a partir do número, usando [Code 128](https://en.wikipedia.org/wiki/Code_128). O código de barras deve ter cerca de 7,5&nbsp;cm de largura quando impresso. Para telas de celular, faça com que seja possível ampliar o código de barras, para que eles possam ser lidos nos caixas das lojas de conveniência OXXO. Você pode usar uma biblioteca externa, como [JSBarcode](https://lindell.me/JsBarcode/). |
| Instruções de pagamento | Instruções de pagamento para o cliente. Veja as versões em português e espanhol, abaixo.                                                                                                                                                                                                                                                                                                                                            |

### Instruções de pagamento da OXXO

#### Inglês

Instruções de pagamento da OXXO:

1. Entregue a guia ao caixa para fazer a leitura do código de barras.
1. Faça o pagamento em dinheiro ao caixa.
1. Após a conclusão do pagamento, guarde o recibo para seu controle.
1. Em caso de dúvidas ou esclarecimentos, entre em contato com a empresa.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expires <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Print</button>

  <div class="instructions">
    Instructions to pay your OXXO:
    <ol>
      <li><p>Give the voucher to the cashier to scan the barcode.</p></li>
      <li><p>Provide cash payment to the cashier.</p></li>
      <li><p>After the payment is complete, keep the receipt of your payment for your records.</p></li>
      <li><p>For any questions or clarification, please contact the merchant.</p></li>
    </ol>
  </div>
</div>
```

#### Espanhol

Instrucciones de pago en OXXO:

1. Entregue el código al cajero en cualquier OXXO para que lo escanee.
1. Proporcione el pago en efetivamente al cajero.
1. Una vez completado el pago, guarde el recibo de su pago para sus archivos.
1. Para cualquier duda o aclaración, por favor contacte al comerciante.

#### HTML

```html
<!-- Include a library for generating OXXO bar codes, such as JsBarcode -->
<!-- <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/barcodes/JsBarcode.code128.min.js"></script> -->

<div class="result-oxxo section-to-print">
  <img width="100px" src="/images/payments/oxxo.png">
  <div class="amount">MX <span class="order-amount"></span></div>
  <div>Expira el <span class="oxxo-expiry-date"></span></div>
  <div class="oxxo-display"></div>

  <button onclick="window.print()">Imprimir</button>

  <div class="instructions">
    Instrucciones de pago en OXXO:
    <ol>
      <li><p>Entregue el código al cajero en cualquier OXXO para que lo escanee.</p></li>
      <li><p>Proporcione el pago en efectivo al cajero.</p></li>
      <li><p>Una vez completado el pago, guarde el recibo de su pago para sus archivos.</p></li>
      <li><p>Para cualquier duda o aclaración, por favor contacte al comerciante.</p></li>
    </ol>
  </div>
</div>
```

Geralmente, os *clientes* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) imprimem e levam a guia a uma loja de conveniência da OXXO. Você pode oferecer um botão para impressão fácil e/ou enviar um e-mail com a guia para o cliente. Faça um teste da impressão e confira o tamanho do código de barras (deve ter cerca de 7,5&nbsp;cm de largura).

## Optional: Enviar e-mails de instruções de pagamento

Você pode habilitar e-mails com instruções de pagamento OXXO na página [Configurações de e-mail](https://dashboard.stripe.com/settings/emails) no Dashboard. Após a habilitação, a Stripe envia e-mails com instruções de pagamento após a confirmação do PaymentIntent. Os e-mails contêm o número OXXO e um link para a página da guia hospedada na Stripe.

> Em ambientes de teste, os e-mails de instruções só são enviados para endereços de e-mail vinculados à conta Stripe.

## Validade e cancelamento

As guias do OXXO expiram após o carimbo de data e hora do UNIX `expires_after` e o cliente não pode pagá-lo após a expiração. As guias do OXXO não podem ser canceladas antes de expirar.

Depois do vencimento da guia OXXO, o status do PaymentIntent muda para `requires_payment_method`. Neste ponto, você pode confirmar o PaymentIntent com outra forma de pagamento ou cancelar.