# Aceitar um pagamento único

Saiba como aceitar um pagamento único via Pix, um forma de pagamento comum no Brasil.

# Checkout

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

Os usuários da Stripe da podem aceitar pagamentos por Pix de clientes no Brasil. Para pagar, o cliente copia e cola uma chave Pix ou lê um código QR pelo aplicativo do banco.

## Verificar a compatibilidade

**Localizações aceitas para empresas**: BR, US, EU, CA, GB, AU, SG, CH

**Moedas aceitas**: `brl`

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

**Modo de pagamento**: Yes

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

**Modo de assinatura**: Yes

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

- 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 itens precisam usar a moeda `brl`.
- Você só pode usar item de linha uma vez para pagamentos únicos via Pix. O modo de configuração e planos recorrentes de *subscription* (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) são suportados através do [Pix Automático](https://docs.stripe.com/payments/pix/accept-a-recurring-payment.md).

## 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.

Este guia orienta você sobre como habilitar o Pix e mostra as diferenças entre aceitar pagamentos usando formas de pagamento dinâmicas e configurar manualmente as formas de pagamento.

### Ativar Pix como forma de pagamento

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

1. Acrescente `pix` à lista de `payment_method_types`.
1. Verifique se todos os itens incluídos em `line_items` estão na moeda `brl`.

#### 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]=brl" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulário integrado

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

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

Você pode definir o número de segundos antes que um pagamento Pix pendente expire, especificando o parâmetro opcional [expires_after_seconds](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_options-pix-expires_after_seconds) em `payment_method_options`. Por exemplo, se um cliente concluir a sessão de checkout com `expires_after_seconds` definido como `600` na segunda-feira às 14h, ele terá até segunda-feira às 14h10 para transferir os fundos e concluir o pagamento.

Você pode definir `expires_after_seconds` com um valor entre 10 segundos e 1.209.600 segundos (14 dias). O padrão é 14400 segundos (4 horas).

#### 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]=brl" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_options[pix][expires_after_seconds]=600" \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=pix" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Formulário integrado

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

### Redirecionar para uma página de instruções hospedada pela Stripe

> Ao contrário dos pagamentos com cartão, não redirecionamos o cliente para o [success_url](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-success_url) nos pagamentos com Pix.

Depois de enviar corretamente o formulário do Checkout, redirecionamos o cliente para `hosted_instructions_url`. O cliente digitaliza o código QR ou copia a string do Pix da página de instruções hospedada pela Stripe.

Enviamos um evento [payment_intent.requires_action](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.requires_action) quando um código Pix é criado. Localize o `hosted_instructions_url` em [payment_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) para enviar um e-mail aos clientes com o link para as instruções. Saiba mais sobre como [monitorar um PaymentIntent com webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks).

Permitimos a personalização de IUs voltadas ao cliente na página de [configurações de marca](https://dashboard.stripe.com/account/branding). Você pode aplicar as seguintes configurações de marca à página de instruções hospedada pela Stripe:

- **Ícone**: a imagem de sua marca e o nome fantasia da empresa
- **Cor de destaque**: use no botão **Copiar código**
- **Cor da marca**: use como cor de fundo

### Executar seus pedidos

Como o Pix é uma forma de pagamento com 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 o *processamento* (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).

Enviamos os seguintes eventos 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 envia o formulário do Checkout. A Stripe gera o código do Pix.

  Você pode enviar o link do `hosted_instructions_url` por e-mail, para o caso de o cliente perder o código do Pix. | Espere que o cliente pague o Pix.                                                   |
| [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | O cliente pagou o Pix 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 código do Pix está vencido ou o pagamento não foi concluído. O `PaymentIntent` retorna para o status de `requires_payment_method`.                                                          | Envie um e-mail para o cliente por e-mail e solicite que seja feito um novo pedido. |

## Teste a integração

Para testar sua integração:

1. Selecione “Pix”.
1. Insira os dados do comprador e toque em **Pagar**. Em um ambiente de teste, você pode usar `000.000.000-00` como um identificador fiscal de teste (CPF ou CNPJ).
1. Clique em **Simular digitalização** para abrir uma página de pagamento com Pix de teste hospedada na Stripe. Nessa página, você pode autorizar ou expirar o pagamento de teste.

No modo de produção, o botão **Pagar** exibe um código QR de Pix. Você precisa de uma conta bancária brasileira com Pix ativado para concluir ou cancelar esse fluxo de pagamento.

Você também pode definir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) com os valores a seguir para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula um Pix que um cliente paga após 3 minutos. O Webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) chega após aproximadamente 3 minutos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula um Pix que seu cliente paga imediatamente. O webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) chega em alguns segundos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `succeed_immediately@example.com`                                                                                                                           |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula um Pix que expira antes de seu cliente pagar. O webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega em alguns segundos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_immediately@example.com`                                                                                                                                                                                  |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula um Pix que expira antes de seu cliente pagar. O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após aproximadamente 3 minutos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_with_delay@example.com`                                                                                                                                                                       |
| `{any_prefix}fill_never@{any_domain}`          | Simula um Pix que nunca é concluído. Ele expira de acordo com o parâmetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) ou [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após a conclusão da simulação.

  Exemplo: `fill_never@example.com`                                                                                                                                                                                                     |

## Optional: Reembolsos [Lado do servidor]

Você pode reembolsar pagamentos por Pix pelo [Dashboard](https://dashboard.stripe.com/test/payments) ou a [API](https://docs.stripe.com/api.md#create_refund).

## See also

- [Execução do checkout](https://docs.stripe.com/checkout/fulfillment.md)
- [Personalizar o Checkout](https://docs.stripe.com/payments/checkout/customization.md)


# Elements

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

### Considerações específicas sobre o Pix

- O governo brasileiro exige que os compradores informem um ID fiscal (CPF/CNPJ) ao realizar transações internacionais. O Stripe Elements captura esse ID, independentemente de você estar confirmando o PaymentIntent no lado do cliente ou no lado do servidor.

- Os códigos QR do Pix expiram 4 horas após a criação. Os clientes não podem usar um código QR do Pix expirado para concluir um pagamento. Assim que um código QR do Pix expira, o Stripe envia um evento `payment_intent.payment_failed`.

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

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

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

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

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

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

#### React

### Configurar Stripe.js

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: 'brl',
    // 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: 'brl',
    paymentMethodTypes: ['pix'],
    // 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.

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

#### Clientes v1

#### Ruby

```ruby
require 'stripe'
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: 'brl',
  })
  {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.

#### Ruby

```ruby
require 'stripe'
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: 'brl',
    payment_method_types: ['pix'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## Enviar o pagamento para a Stripe [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**

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

- **Integrar 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 a integração

Para testar sua integração:

1. Selecione “Pix”.
1. Insira os dados do comprador e toque em **Pagar**. Em um ambiente de teste, você pode usar `000.000.000-00` como um identificador fiscal de teste (CPF ou CNPJ).
1. Clique em **Simular digitalização** para abrir uma página de pagamento com Pix de teste hospedada na Stripe. Nessa página, você pode autorizar ou expirar o pagamento de teste.

No modo de produção, o botão **Pagar** exibe um código QR de Pix. Você precisa de uma conta bancária brasileira com Pix ativado para concluir ou cancelar esse fluxo de pagamento.

Você também pode definir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) com os valores a seguir para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula um Pix que um cliente paga após 3 minutos. O Webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) chega após aproximadamente 3 minutos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula um Pix que seu cliente paga imediatamente. O webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) chega em alguns segundos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `succeed_immediately@example.com`                                                                                                                           |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula um Pix que expira antes de seu cliente pagar. O webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega em alguns segundos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_immediately@example.com`                                                                                                                                                                                  |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula um Pix que expira antes de seu cliente pagar. O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após aproximadamente 3 minutos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_with_delay@example.com`                                                                                                                                                                       |
| `{any_prefix}fill_never@{any_domain}`          | Simula um Pix que nunca é concluído. Ele expira de acordo com o parâmetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) ou [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após a conclusão da simulação.

  Exemplo: `fill_never@example.com`                                                                                                                                                                                                     |

## 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.                                                                                                                                                                                                                                                                                                                            |


# API Direct

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

Os usuários da Stripe da podem aceitar pagamentos por Pix de clientes no Brasil. Para pagar, o cliente copia e cola uma chave Pix ou lê um código QR pelo aplicativo do banco.

O governo brasileiro exige que os compradores informem um identificador fiscal (CPF ou CNPJ) ao realizar transações internacionais. Se sua conta Stripe estiver sediada nos EUA e você aceitar pagamentos por Pix com integração de API direta, colete o `tax_id` do comprador no [hash](https://docs.stripe.com/api/payment_methods/object.md?api-version=2025-04-30.basil#payment_method_object-billing_details-tax_id) `billing_details` da forma de pagamento.

## Configuração da 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'
```

## Criar um PaymentIntent [Lado do servidor]

Um [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) é um objeto que representa sua intenção de coletar o pagamento do cliente e acompanha o ciclo de vida do processo de pagamento. Crie um `PaymentIntent` no seu servidor e especifique o valor a ser cobrado e uma moeda aceita. Se você tiver uma integração existente com o [Payment Intents](https://docs.stripe.com/payments/payment-intents.md), adicione `pix` à lista de [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types).

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

O `PaymentIntent` contém 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 o segredo do cliente ao seu cliente para concluir com segurança o processo de pagamento em vez de passar todo o objeto `PaymentIntent`.

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

## Coletar dados da forma de pagamento [Lado do cliente]

#### HTML + JS

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

| Campo    | Valor                                                                                                                 |
| -------- | --------------------------------------------------------------------------------------------------------------------- |
| `name`   | Nome completo do cliente.                                                                                             |
| `email`  | O endereço de e-mail do cliente.                                                                                      |
| `tax_id` | O identificador fiscal do cliente: um CPF se o cliente for uma pessoa física ou um CNPJ se o cliente for uma empresa. |

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

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

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

#### React

#### npm

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

#### umd

Também fornecemos uma compilação UMD para sites que não usam npm nem módulos.

Insira o script Stripe.js, que exporta uma função `Stripe` global, e a compilação UMD de React Stripe.js, que exporta um objeto `ReactStripe` global. Sempre carregue o script Stripe.js diretamente de **js.stripe.com** para manter a conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia dele.

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

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

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

> A [demonstração da CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark) permite testar o React Stripe.js sem criar um novo projeto.

### Adicione Stripe.js e Elements à sua página

Para usar componentes do Elements, 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`.

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

import CheckoutForm from './CheckoutForm';

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

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

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

## Exibir o código QR do Pix com Stripe [Lado do cliente]

Crie um pagamento no lado do cliente com o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) do `PaymentIntent`. O segredo do cliente é diferente das suas [chaves de API](https://docs.stripe.com/keys.md), que autenticam solicitações da API da Stripe. Trate o segredo do cliente com cuidado, pois ele pode concluir a cobrança: não o registre em logs, não o incorpore em URLs e não o exponha a ninguém além do cliente.

Chame [stripe.confirmPixPayment](https://docs.stripe.com/js/payment_intents/confirm_pix_payment) para processar o código QR que permite ao cliente concluir o pagamento. Inclua um `return_url` para redirecionar o cliente após a conclusão do pagamento.

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

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

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

### Gerenciar o redirecionamento

Os parâmetros de consulta de URL a seguir são fornecidos quando a Stripe redireciona o cliente para o `return_url`.

| Parâmetro                      | Descrição                                                                                                                                    |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | O identificador único do `PaymentIntent`.                                                                                                    |
| `payment_intent_client_secret` | O [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) do objeto `PaymentIntent`. |

Você também pode adicionar seus próprios parâmetros de consulta ao fornecer o `return_url`. Eles persistem durante todo o processo de redirecionamento. O `return_url` deve corresponder a uma página do seu site que forneça o status do pagamento. Você deve verificar o status do `PaymentIntent` ao renderizar a página de retorno. Você pode fazer isso usando a função `retrievePaymentIntent` do Stripe.js e passando o `payment_intent_client_secret`.

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

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

## Optional: Exibir você mesmo o código QR do Pix [Lado do cliente]

Recomendamos usar o Stripe.js para exibir os dados do Pix com confirmPixPayment. Mas você também pode exibir manualmente a string e/ou o código QR do Pix aos clientes.

Especifique `handleActions: false` quando chamar stripe.confirmPixPayment na etapa 3 para gerenciar manualmente a próxima ação que exibe os dados do Pix ao cliente.

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

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

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

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

Sugerimos exibir o seguinte:

| Detalhe                   | Descrição                                                                                                                                                                                                                                                                                             |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| String do Pix             | Exiba a string do Pix para que os clientes a copiem para a área de transferência usando a string [payment_intent.next_action.pix_display_qr_code.data](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-data) do PaymentIntent.            |
| Código QR como imagem SVG | Exiba o código QR do Pix para que os clientes o digitalizem com o celular usando a string [payment_intent.next_action.pix_display_qr_code.image_url_svg](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_svg) do PaymentIntent. |
| Código QR como imagem PNG | Exiba o código QR do Pix para que os clientes o digitalizem com o celular usando a string [payment_intent.next_action.pix_display_qr_code.image_url_png](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-image_url_png) do PaymentIntent. |
| Data de vencimento        | Exiba a data de vencimento do Pix. Use [payment_intent.next_action.pix_display_qr_code.expires_at](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-expires_at) para ver a data de validade.                                               |

Você também pode redirecionar os clientes para a página de instruções hospedada pela Stripe, que é semelhante ao modal aberto por `confirmPixPayment`. Use [payment_intent.next_action.pix_display_qr_code.hosted_instructions_url](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-next_action-pix_display_qr_code-hosted_instructions_url) para encontrar o URL da página de instruções hospedada pela Stripe no objeto PaymentIntent.

## Teste a integração

Para testar sua integração:

1. Selecione “Pix”.
1. Insira os dados do comprador e toque em **Pagar**. Em um ambiente de teste, você pode usar `000.000.000-00` como um identificador fiscal de teste (CPF ou CNPJ).
1. Clique em **Simular digitalização** para abrir uma página de pagamento com Pix de teste hospedada na Stripe. Nessa página, você pode autorizar ou expirar o pagamento de teste.

No modo de produção, o botão **Pagar** exibe um código QR de Pix. Você precisa de uma conta bancária brasileira com Pix ativado para concluir ou cancelar esse fluxo de pagamento.

Você também pode definir [payment_method.billing_details.email](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_data-billing_details-email) com os valores a seguir para testar diferentes cenários.

| E-mail                                         | Descrição                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `{any_prefix}@{any_domain}`                    | Simula um Pix que um cliente paga após 3 minutos. O Webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) chega após aproximadamente 3 minutos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `anything@example.com` |
| `{any_prefix}succeed_immediately@{any_domain}` | Simula um Pix que seu cliente paga imediatamente. O webhook [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) chega em alguns segundos. Em produção, esse Webhook chega imediatamente após o Pix ser pago.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `succeed_immediately@example.com`                                                                                                                           |
| `{any_prefix}expire_immediately@{any_domain}`  | Simula um Pix que expira antes de seu cliente pagar. O webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega em alguns segundos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_immediately@example.com`                                                                                                                                                                                  |
| `{any_prefix}expire_with_delay@{any_domain}`   | Simula um Pix que expira antes de seu cliente pagar. O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após aproximadamente 3 minutos.

  O Stripe ignora os parâmetros [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) e [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds) neste caso.

  Exemplo: `expire_with_delay@example.com`                                                                                                                                                                       |
| `{any_prefix}fill_never@{any_domain}`          | Simula um Pix que nunca é concluído. Ele expira de acordo com o parâmetro [payment_method_options.pix.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at) ou [payment_method_options.pix.expires_after_seconds](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_after_seconds). O Webhook [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) chega após a conclusão da simulação.

  Exemplo: `fill_never@example.com`                                                                                                                                                                                                     |


## Vencimento

Os códigos do Pix vencem após o `expires_at` (carimbo de data e hora do Unix) especificado. Após o vencimento do Pix, confirme o PaymentIntent com outra forma de pagamento ou cancele o Pix. Defina os parâmetros de validade nas [opções de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix) na chave `pix`.

Um cliente não pode pagar um Pix depois do vencimento.

| Campo                   | Valor                                                                                                                           | Valor padrão                 | Obrigatório | Exemplo                                                                                                                                                                                                                                      |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `expires_after_seconds` | O número de segundos antes que um pagamento Pix pendente expire. Valores válidos vão de 10 segundos a 259200 segundos (3 dias). | 14400 seconds (4 hours)      | Não         | Se você confirmar um Pix na segunda-feira às 14:00 e definir `expires_after_seconds` como 600, o Pix expira na segunda-feira às 14h10. Observe que o horário de início não é quando o `PaymentIntent` é criado, mas quando ele é confirmado. |
| `expires_at`            | Um Unix timestamp que indica quando o pagamento Pix pendente expira. Valores válidos vão de 10 segundos a 3 dias no futuro.     | O padrão é 4 hours no futuro | Não         | Se você criar um Pix na segunda-feira às 14h e definir `expires_at` como 2 dias no futuro, o Pix vencerá na quarta-feira às 14h                                                                                                              |

`expires_after_seconds` e `expires_at` são mutuamente exclusivos. Ocorre um erro se ambos forem definidos. Ambos também são opcionais e, se nenhum for definido, a expiração padrão é 4 horas a partir do momento em que o `PaymentIntent` é confirmado.

> O valor retornado em `expires_at` na resposta de `next_action` é o mesmo definido em [payment_method_options.expires_at](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-pix-expires_at). No entanto, em cenários reais, o timestamp de validade efetivo pode ser diferente. Isso não afeta a experiência do cliente ao pagar com Pix, mas é recomendado confiar no evento [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?event_types-payment_intent.payment_failed) para verificar se a intenção de pagamento expirou.

## Cancelamento

Você pode cancelar pagamentos por Pix antes do vencimento [cancelando o PaymentIntent](https://docs.stripe.com/api/payment_intents/cancel.md) associado ao pagamento por Pix.