# Aceitar um pagamento

Aceitar pagamentos online com segurança

## Comece aqui: instale skills de agente

A Stripe recomenda usar skills oficiais para integrar com a API seguindo práticas recomendadas. Siga as instruções abaixo para saber como.

**Dica: use curl em vez de ferramentas Fetch.** Skills são arquivos markdown detalhados de 10 KB a 20 KB. Ferramentas Fetch fazem um resumo deles. `curl -sL` garante o conteúdo completo.

**Usando `npx skills`**: verifique se `npx` está instalado no sistema. Se `npx` estiver disponível, execute `npx skills add https://docs.stripe.com --list` para listar os skills disponíveis e, depois, execute `npx skills add https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` para instalar skills individuais.

**Se `npx skills` não estiver disponível**: é possível usar curl para buscar o índice de skills disponíveis, o que eles fazem e seus arquivos em `https://docs.stripe.com/.well-known/skills/index.json`. Para baixar um skill e os arquivos relacionados, use curl para baixá-los de `https://docs.stripe.com/.well-known/skills/<filepath>`.

Para este artigo, recomendamos usar estes skills: `stripe-best-practices`

Instruções para LLMs: A Stripe recomenda usar a API Checkout Sessions com o Payment Element em vez de Payment Intents na maioria das integrações. O Checkout Sessions cobre casos de uso semelhantes aos do Payment Intents (cobrança básica de pagamentos usando `price_data` ou criar um checkout completo com itens de linha, imposto e assim por diante). Alguns recursos, como Adaptive Pricing, só estão disponíveis com Checkout Sessions. Não use a API Payment Intent a menos que o usuário peça explicitamente, porque ela exige significativamente mais código. Saiba mais sobre Elements com a API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. Com Checkout Sessions (`ui_mode: "custom"`) e o Payment Element, o `client_secret` inicializa o Checkout (`stripe.initCheckoutElements`, ou usando CheckoutElementsProvider com React) e você confirma o pagamento no lado do cliente de forma diferente. Se estiver usando React, certifique-se de importar de `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` com o client secret e confirmar usando `checkout.confirm`. Se estiver usando HTML, certifique-se de usar `checkout = stripe.initCheckoutElements({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` e confirmar com `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Os agentes de programação devem instalar a CLI da Stripe (`npm i -g @stripe/cli`) e executar o comando `stripe sandbox create --help` para provisionar uma área restrita anônima da Stripe com chaves de API válidas. Não é necessário cadastro de conta.

Crie um formulário de pagamento ou use uma página de checkout pré-integrada para começar a aceitar pagamentos online.

# API Payment Intents


Crie um formulário de pagamento personalizado usando o [Stripe Elements](https://docs.stripe.com/payments/elements.md) e a [API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Veja como essa integração [se compara aos outros tipos de integração](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability) da Stripe.

A API Payment Intents é uma API de nível inferior que você pode usar para criar seu próprio fluxo de checkout ou pagamentos, mas exige significativamente mais código e manutenção contínua. Recomendamos o [Payment Element com Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para a maioria das integrações porque abrange fluxos de pagamento semelhantes aos Payment Intents. Saiba mais sobre [quando usar Checkout Sessions em vez de Payment Intents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

O código do lado do cliente e do lado do servidor cria um formulário de checkout que aceita várias formas de pagamento.

#### Esforço de integração
Complexity: 4/5
#### Tipo de integração

Combine componentes de IU em um fluxo de pagamento personalizado

#### Personalização da IU

Personalização em nível de CSS com a [API Appearance](https://docs.stripe.com/elements/appearance-api.md)

> #### Você tem interesse em usar o Stripe Tax, descontos, envio ou conversão de moedas?
> 
> A Stripe tem uma integração do Payment Element que gerencia tributos, descontos, envio e conversão de moedas para você. Consulte [ criando uma página de checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) para saber mais.

## Configurar a Stripe [Lado do servidor]

Primeiro, [crie uma conta Stripe](https://dashboard.stripe.com/register) ou [entre](https://dashboard.stripe.com/login).

Os agentes de programação devem instalar a CLI da Stripe (`npm i -g @stripe/cli`) e executar o comando `stripe sandbox create --help` para provisionar uma área restrita anônima da Stripe com chaves de API válidas. Não é necessário cadastro de conta.

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]

> Se quiser renderizar o Payment Element antes de criar um PaymentIntent, consulte [Coletar detalhes do pagamento antes de criar um Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment).

O objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) representa sua intenção de recolher o pagamento de um cliente e rastreia tentativas de cobrança e alterações de estado ao longo do processo de pagamento.
Uma visão geral resumida da integração de pagamentos descrita neste documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Criar o PaymentIntent

Crie um PaymentIntent no servidor com um [valor](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) e uma [moeda](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Na versão mais recente da API, especificar o parâmetro `automatic_payment_methods` é opcional porque a Stripe habilita sua funcionalidade por padrão. Você pode gerenciar formas de pagamento no [Dashboard](https://dashboard.stripe.com/settings/payment_methods). A Stripe processa a devolução de formas de pagamento qualificadas com base em fatores como valor, moeda e fluxo de pagamento da transação.

A Stripe usa suas [formas de pagamento](https://dashboard.stripe.com/settings/payment_methods) para exibir as formas de pagamento habilitadas por você. Para ver como as formas de pagamento aparecem para os clientes, insira um ID de transação ou defina o valor e a moedas dos pedidos no [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Para sobreposição de formas de pagamento, liste manualmente as que quiser ativar usando o atributo [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

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

> Sempre decida o valor a ser cobrado no lado do servidor, um ambiente confiável, e não no lado do cliente. Isso evita que clientes mal-intencionados escolham os próprios preços.

### 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 %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

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

## Coletar dados de pagamento [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

### Configurar o 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 de Stripe com o seguinte JavaScript em 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 Element Pagamento à sua página de pagamentos

O Payment Element precisa de um lugar para residir na sua página de pagamentos. Crie um node 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>
```

Quando o formulário anterior for carregado, crie uma instância do Payment Element e monte-a no nó DOM do contêiner. Passe o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior em `options` quando criar a instância do [Elements](https://docs.stripe.com/js/elements_object/create):

Administre cuidadosamente o segredo do cliente, pois ele pode finalizar a cobrança. Não registre em log, incorpore em URLs nem exponha esse segredo a ninguém, exceto para o próprio cliente.

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

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

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

```

#### React

### Configurar o 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 à sua página de pagamento

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`. Além disso, passe o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da etapa anterior como `options` ao fornecedor do `Elements`.

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

import CheckoutForm from './CheckoutForm';

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

function App() {
  const options = {
    // passing the client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Adicione o componente do Element Pagamento

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

O Stripe Elements é uma coleção de componentes drop-in de IU. Para personalizar ainda mais o formulário ou coletar outros dados do cliente, consulte a [documentação do Elements](https://docs.stripe.com/payments/elements.md).

O Payment Element renderiza um formulário dinâmico que permite ao cliente escolher uma forma de pagamento. Para cada forma de pagamento, o formulário solicita automaticamente que o cliente preencha todos os dados de pagamento necessários.

### Personalizar a aparência

Personalize o Payment Element para corresponder ao design do seu site, passando o [objeto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) para `options` ao criar o 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.

### Solicitar token de comerciante do Apple Pay

Se você configurou sua integração para [aceitar pagamentos com o Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), recomendamos configurar a interface do Apple Pay para retornar um token do comerciante, a fim de habilitar transações iniciadas pelo comerciante (MIT). [Solicite o tipo de token do comerciante pertinente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) no Payment Element.

## Optional: Salvar e recuperar formas de pagamento do cliente

Você pode configurar o Payment Element para salvar as formas de pagamento do seu cliente para uso futuro. Esta seção mostra como integrar o [recurso de formas de pagamento salvas](https://docs.stripe.com/payments/save-customer-payment-methods.md), que permite que o Payment Element:

- Solicitar consentimento dos compradores para salvar uma forma de pagamento
- Salvar formas de pagamento quando os compradores derem consentimento
- Exibir formas de pagamento salvas aos compradores para compras futuras
- [Atualize automaticamente cartões perdidos ou vencidos](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) quando são substituídos pelos compradores
![O Payment Element e uma caixa de seleção forma de pagamento salva](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Salve formas de pagamento.
![O Payment Element com uma forma de pagamento salva selecionada](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Reutilize uma forma de pagamento salva anteriormente.

### Habilite o salvamento da forma de pagamento no Payment Element

Ao criar um [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) no seu servidor, também crie uma [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) fornecendo o ID do cliente (usando `customer` para um objeto `Customer` ou `customer_account` para um objeto `Account` configurado para o cliente) e habilitado o componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) para a sessão. Configure quais [features](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) de forma de pagamento você quer ativar. Por exemplo, ao habilitar [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save), é exibida uma caixa de seleção que permite aos clientes salvar seus dados de pagamento para uso futuro.

Você pode especificar `setup_future_usage` em um PaymentIntent ou em uma Checkout Session para substituir o comportamento padrão de salvamento de formas de pagamento. Isso garante que você salve automaticamente a forma de pagamento para uso futuro, mesmo que o cliente não escolha explicitamente salvá-la. Se você pretende definir `setup_future_usage`, não configure `payment_method_save_usage` na mesma transação de pagamento, pois isso causará um erro de integração.

> #### Use a API Accounts v2 para representar clientes
> 
> A API Accounts v2 está geralmente disponível para usuários do Connect e em prévia pública para outros usuários da Stripe. Se faz parte da prévia de Accounts v2, é necessário [especificar uma versão de prévia](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) no seu código.
> 
> Para solicitar acesso à prévia de Accounts v2, 
> 
> Para a maioria dos casos de uso, recomendamos [modelar seus clientes como objetos Accounts configuradas pelo cliente](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), em vez de usar objetos [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts v2

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

#### Clientes v1

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

Sua instância do Elements usa o *segredo do cliente* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) da CustomerSession para acessar as formas de pagamento salvas desse cliente. [Gerencie erros](https://docs.stripe.com/error-handling.md) corretamente ao criar a CustomerSession. Se ocorrer um erro, você não precisará fornecer o segredo do cliente da CustomerSession para a instância do Elements, pois é opcional.

Crie a instância do Elements usando os segredos do cliente para PaymentIntent e CustomerSession. Em seguida, use essa instância do Elements para criar um Payment Element.

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

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

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

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

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

Quando você confirma o PaymentIntent, o Stripe.js controla automaticamente a definição de [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) no PaymentIntent e [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) no PaymentMethod, dependendo de o cliente ter marcado a caixa para salvar os dados de pagamento.

### Impor nova coleta de CVC

Opcionalmente, especifique `require_cvc_recollection` [ao criar o PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) para impor coleta de CVC quando um cliente estiver pagando com cartão.

### Detectar a seleção de uma forma de pagamento salva

Para controlar o conteúdo dinâmico quando uma forma de pagamento salva é selecionada, ouça o evento `change` do Payment Element, que é preenchido com a forma de pagamento selecionada.

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

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

Permita que seu cliente faça checkout mais rápido usando [Link](https://docs.stripe.com/payments/link.md) no [Payment Element](https://docs.stripe.com/payments/payment-element.md). Você pode preencher automaticamente os dados de qualquer cliente conectado que já usa Link, independentemente de ter salvado os dados inicialmente em Link com outra empresa. A integração padrão do Payment Element inclui uma solicitação Link no cartão. Para gerenciar Link no Payment Element, acesse as configurações da sua [forma de pagamento](https://dashboard.stripe.com/settings/payment_methods).
![Autentique ou inscreva-se no Link diretamente no Payment Element durante o checkout](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Coletar um endereço de e-mail do cliente para autenticação ou inscrição no Link

### Opções de integração

Há duas formas de integrar o Link com o Payment Element. A Stripe recomenda passar um endereço de e-mail do cliente para o Payment Element, se disponível. Lembre-se de considerar o fluxo de checkout da sua compra ao escolher entre essas opções:

| Opção de integração                                                             | Fluxo de checkout                                                                                                                                                                                      | Descrição                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Transfira um endereço de e-mail do cliente para o Payment Element (Recommended) | - Seu cliente insere o endereço de e-mail antes de chegar à página de checkout (em uma etapa anterior de criação de conta, por exemplo).
  - Você prefere usar seu próprio campo de entrada de e-mail. | Passe automaticamente um endereço de e-mail do cliente para o Payment Element. Nesse cenário, um cliente autentica-se no Link diretamente no formulário de pagamento, em vez de um componente de IU separado.                                                                     |
| Recolher um endereço de e-mail do cliente no Payment Element                    | - Seus clientes podem optar por inserir o e-mail e se autenticar ou se cadastrar com o Link diretamente no Payment Element durante o checkout.
  - Não é necessária nenhuma alteração no código.       | Se um cliente ainda não tiver se cadastrado no Link e escolher uma forma de pagamento compatível no Payment Element, ele será solicitado a salvar seus dados usando o Link. Para aqueles que já estão cadastrados, o Link preenche automaticamente suas informações de pagamento. |

Use [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para transferir um endereço de e-mail de cliente para o Payment Element.

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

Para obter mais informações, leia como [criar uma página de checkout personalizada que inclua o Link](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

## Optional: Obter atualizações do servidor [Lado do cliente]

Você pode atualizar atributos no PaymentIntent após a renderização do Payment Element, como o [valor](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (por exemplo, códigos de desconto ou custos de envio). Você pode [atualizar o PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) no servidor e chamar [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) para ver o novo valor refletido no Payment Element. Este exemplo mostra como criar o endpoint do servidor que atualiza o valor na PaymentIntent:

#### Ruby

```ruby

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

Este exemplo demonstra como atualizar a IU para refletir as alterações no lado do cliente:

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

## 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 utilizando 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 deve redirecionar o usuário após a conclusão do pagamento. Seu usuário pode ser redirecionado primeiro para um site intermediário, como uma página de autorização bancária, antes de ser redirecionado para o `return_url`. Os pagamentos com cartão são redirecionados imediatamente para o `return_url` quando um pagamento é finalizado.

Se não quiser redirecionar pagamentos com cartão após a conclusão do pagamento, defina [redirecionar](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');

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

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

#### React

Para chamar [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) do seu componente de formulário de pagamento, use os hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) e [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Se preferir componentes de classe tradicionais em vez de hooks, use um [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

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

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

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

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

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


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

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

export default CheckoutForm;
```

Verifique se o `return_url` corresponde a uma página no seu site que fornece o status do pagamento. Quando a Stripe redireciona o cliente para o `return_url`, nós fornecemos os seguintes parâmetros de consulta de 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`. |

> Se você tiver ferramentas que rastreiam a sessão do cliente no navegador, pode ser necessário adicionar o domínio `stripe.com` à lista de exclusão de referenciadores. Os redirecionamentos fazem com que algumas ferramentas criem novas sessões, o que impede que você rastreie a sessão completa.

Use um dos parâmetros de consulta para recuperar o PaymentIntent. Inspecione o [status do PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) para decidir o que mostrar aos clientes. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o `return_url`, que persiste durante o processo de redirecionamento.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

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

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

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

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 a [ferramenta Dashboard webhook](https://dashboard.stripe.com/webhooks) ou siga o [guia de webhooks](https://docs.stripe.com/webhooks/quickstart.md) para receber esses eventos e executar ações, como enviar um e-mail de confirmação do pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de trabalho de envio.

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 sua integração para escutar eventos assíncronos é o que permite a você aceitar [diferentes tipos de formas de pagamento](https://stripe.com/payments/payment-methods-guide) com uma única integração.

Além de gerenciar o evento `payment_intent.succeeded`, recomendamos gerenciar esses outros eventos ao coletar pagamentos com o Element Pagamento:

| Evento                                                                                                                          | Descrição                                                                                                                                                                                                                                                                     | Ação                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Enviado quando um cliente conclui um pagamento com êxito.                                                                                                                                                                                                                     | Envie ao cliente uma confirmação de pedido e *processe* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) o pedido. |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Enviado quando um cliente inicia um pagamento, mas o pagamento ainda precisa ser concluído. Esse evento costuma ser enviado quando um cliente inicia um débito bancário. Ele é seguido por um evento `payment_intent.succeeded` ou `payment_intent.payment_failed` no futuro. | Envie ao cliente uma confirmação do pedido que indica que o pagamento está pendente. Para produtos digitais, pode ser necessário executar o pedido antes de aguardar a conclusão do pagamento.  |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado quando um cliente tenta fazer um pagamento, mas o pagamento falha.                                                                                                                                                                                                    | Se um pagamento passa de `processing` para `payment_failed`, ofereça ao cliente outra tentativa para pagar.                                                                                     |

## Teste sua integração

Para testar sua integração de pagamentos personalizada:

1. Crie um Payment Intent e recupere o segredo do cliente.
2. Preencha os dados de pagamento com um método da tabela a seguir.
   - Informe uma data futura qualquer como validade do cartão.
   - Informe qualquer número de 3 dígitos como CVC.
   - Informe qualquer código postal de cobrança.
3. Envie o pagamento para a Stripe. Você será redirecionado para `return_url`.
4. Acesse o Dashboard e procure o pagamento na [página Transações](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se o seu pagamento for bem-sucedido, ele aparecerá na lista.
5. Clique no pagamento para ver mais detalhes, como dados de faturamento e a lista de itens comprados. Você pode usar esses dados para executar o pedido.

Saiba como [testar sua integração](https://docs.stripe.com/testing.md).

#### Cartões

| Número do cartão    | Cenário                                                                                                                                                                                                                                                                                             | Como testar                                                                                                                 |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | O pagamento com cartão é bem-sucedido e não precisa de autenticação.                                                                                                                                                                                                                                | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. |
| 4000002500003155    | O pagamento com cartão precisa de *autenticação* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. |
| 4000000000009995    | O cartão é recusado com um código de recusa como `insufficient_funds`.                                                                                                                                                                                                                              | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. |
| 6205500000000000004 | O cartão UnionPay tem um comprimento variável de 13 a 19 dígitos.                                                                                                                                                                                                                                   | Preencha o formulário do cartão de crédito usando o número do cartão de crédito com qualquer validade, CVC e código postal. |

#### Carteiras

| Forma de pagamento | Cenário                                                                                                                                                                   | Como testar                                                                                                                                                                                                    |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay             | O cliente paga com uma forma de pagamento baseada em redirecionamento e [notificação imediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Escolha qualquer forma de pagamento baseada em redirecionamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Concluir o pagamento de teste** na página de redirecionamento. |

#### Débito bancário autenticado

| Forma de pagamento                   | Cenário                                                                                                                                                                                                | Como testar                                                                                                                                                                                                |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Débito automático BECS               | O cliente paga com débito automático BECS.                                                                                                                                                             | Preencha o formulário usando o número de conta `900123456` e BSB `000000`. Inicialmente, o status do PaymentIntent muda para `processing` e, 3 minutos depois, para `succeeded`.                           |
| Débito automático BECS               | O pagamento do cliente falha com um código de erro `account_closed`.                                                                                                                                   | Preencha o formulário usando o número da conta `111111113` e BSB `000000`.                                                                                                                                 |
| Bancontact, EPS, iDEAL, e Przelewy24 | Seu cliente não faz a autenticação na página de redirecionamento de uma forma de pagamento baseada em redirecionamento e notificação imediata.                                                         | Escolha qualquer forma de pagamento baseada em redirecionamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Falhar pagamento de teste** na página de redirecionamento. |
| Pay by Bank                          | O cliente paga com uma forma de pagamento baseada em redirecionamento e [notificação posterior](https://docs.stripe.com/payments/payment-methods.md#payment-notification).                             | Escolha a forma de pagamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Concluir o pagamento de teste** na página de redirecionamento.                                |
| Pay by Bank                          | Seu cliente não faz a autenticação na página de redirecionamento de uma forma de pagamento baseada em redirecionamento e notificação posterior.                                                        | Escolha a forma de pagamento, preencha os dados obrigatórios e confirme o pagamento. Em seguida, clique em **Falhar o pagamento de teste** na página de redirecionamento.                                  |
| BLIK                                 | Os pagamentos BLIK falham de várias formas: falhas imediatas (por exemplo, o código está vencido ou inválido), erros atrasados (o banco recusa) ou limites de tempo (o cliente não respondeu a tempo). | Use padrões de e-mail para [simular as diferentes falhas.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                    |

#### Débitos bancários

| Forma de pagamento     | Cenário                                                                                           | Como testar                                                                                                                                                                     |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Débito automático SEPA | O cliente paga com débito automático SEPA.                                                        | Preencha o formulário usando o número de conta `AT321904300235473204`. Inicialmente, o status do PaymentIntent muda para processando e, três minutos depois, para bem-sucedido. |
| Débito automático SEPA | O status da intenção de pagamento do cliente muda de `processing` para `requires_payment_method`. | Preencha o formulário usando o número de conta `AT861904300235473202`.                                                                                                          |

#### Boletos

| Forma de pagamento | Cenário                                          | Como testar                                                                                    |
| ------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
| Boleto, OXXO       | Seu cliente paga com um boleto ou uma guia OXXO. | Selecione boleto ou OXXO como forma de pagamento e envie o pagamento. Feche o diálogo exibido. |

Consulte [Testes](https://docs.stripe.com/testing.md) para obter mais informações sobre como testar sua integração.

## Optional: Adicionar formas de pagamento

O Payment Element [aceita várias formas de pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) por padrão. Você precisa executar etapas adicionais e exibir algumas formas de pagamento.

### Affirm

Para começar a usar o Affirm, você deve habilitá-lo no [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Quando você cria um PaymentIntent com a forma de pagamento Affirm, é preciso incluir um [endereço de entrega](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Este exemplo sugere passar as informações de envio no cliente depois que ele [seleciona a forma de pagamento](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Saiba mais sobre como usar o [Affirm](https://docs.stripe.com/payments/affirm.md) com a Stripe.

#### HTML + JS

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

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

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

    }
  });

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

#### React

```jsx

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

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

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

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

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

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

      }
    });


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

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

export default CheckoutForm;
```

#### Testar Affirm

Saiba como testar diferentes cenários usando a tabela a seguir:

| Cenário                                                                     | Como testar                                                                                    |
| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| Seu cliente paga com o Affirm.                                              | Preencha o formulário (não deixe de incluir um endereço de entrega) e autentique o pagamento.  |
| Seu cliente não faz a autenticação na página de redirecionamento do Affirm. | Preencha o formulário e clique em **Falhar pagamento de teste** na página de redirecionamento. |

### Afterpay (Clearpay)

Quando você cria um PaymentIntent com a forma de pagamento Affirm, é necessário incluir um [endereço de entrega](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Saiba mais sobre como usar o [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) com a Stripe.

Você pode gerenciar as formas de pagamento no [Dashboard](https://dashboard.stripe.com/settings/payment_methods). A Stripe cuida do retorno das formas de pagamento elegíveis de acordo com fatores como o valor da transação, a moeda e o fluxo de pagamento. Na versão mais recente da API, especificar o parâmetro `automatic_payment_methods` é opcional porque a Stripe habilita suas funções por padrão. Certifique-se de habilitar o Afterpay/Clearpay no [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

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

#### Teste Afterpay (Clearpay)

Saiba como testar diferentes cenários usando a tabela a seguir:

| Cenário                                                                       | Como testar                                                                                    |
| ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| Seu cliente paga com o Afterpay.                                              | Preencha o formulário (não deixe de incluir um endereço de entrega) e autentique o pagamento.  |
| Seu cliente não faz a autenticação na página de redirecionamento do Afterpay. | Preencha o formulário e clique em **Falhar pagamento de teste** na página de redirecionamento. |

### Apple Pay e Google Pay

Quando você [habilita pagamentos com cartão](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), exibimos o Apple Pay e o Google Pay para clientes cujo ambiente atende às [condições de exibição da carteira](https://docs.stripe.com/testing/wallets.md). Para aceitar pagamentos com essas carteiras, você também deve:

- Habilitá-las nas [configurações de formas de pagamento](https://dashboard.stripe.com/settings/payment_methods). O Apple Pay é habilitado por padrão.
- Opere seu aplicativo por HTTPS em desenvolvimento e produção.
- [Registre seu domínio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Acessar atualizações do servidor](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) se você atualizar o valor de um [PaymentIntent](https://docs.stripe.com/api/payment_intents.md), para manter o modal de pagamento da carteira sincronizado.

> #### Testes regionais
> 
> O Stripe Elements não aceita o Google Pay ou Apple Pay para contas e clientes da Stripe na Índia. Portanto, não é possível testar sua integração do Google Pay ou Apple Pay se o endereço IP do testador estiver na Índia, mesmo que a conta Stripe esteja localizada fora da Índia.

Saiba como usar [Apple Pay](https://docs.stripe.com/apple-pay.md) e [Google Pay](https://docs.stripe.com/google-pay.md) com a Stripe.

### Débito automático ACH

Para usar o Payment Element com a forma de pagamento Débito automático ACH, siga estas instruções:

1. Crie um objeto [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) configurado pelo cliente ou um objeto [Customer](https://docs.stripe.com/api/customers/create.md) para representar seu cliente.

#### Accounts v2

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

#### Customers v1

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

1. Especifique o ID do cliente ao criar o `PaymentIntent`.

   #### Accounts v2

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### Clientes v1

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. Selecione um [método de verificação](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Ao usar a forma de pagamento débito automático ACH com o Payment Element, você só pode selecionar `automatic` ou `instant`.

Saiba mais sobre como usar o [débito automático ACH](https://docs.stripe.com/payments/ach-direct-debit.md) com a Stripe.

#### Testar débito automático ACH

| Cenário                                                                         | Como testar                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Seu cliente paga com uma conta bancária dos EUA usando verificação instantânea. | Selecione **Conta bancária dos EUA** e preencha o formulário. Clique na instituição de teste. Siga as instruções do modal para vincular sua conta bancária. Clique no botão do pagamento.                                                                                                                                                                                |
| Seu cliente paga com uma conta bancária dos EUA usando microdepósitos.          | Selecione **Conta bancária dos EUA** e preencha o formulário. Clique em **Inserir dados bancários manualmente**. Siga as instruções na janela para vincular sua conta bancária. Você pode usar estes [números de conta de teste](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Clique no botão de pagamento. |
| Seu cliente não conclui o processo de vinculação de conta bancária.             | Selecione **Conta bancária dos EUA** e clique na instituição de teste ou em **Inserir os dados bancários manualmente**. Feche o modal sem preenchê-lo.                                                                                                                                                                                                                   |

### BLIK

Ao usar o Payment Element com BLIK, o usuário pode fechar o modal que solicita autorização para pagamento no aplicativo bancário. Isso aciona um redirecionamento para seu `return_url` e não retorna o usuário para a página de checkout. Saiba mais sobre como usar o [BLIK](https://docs.stripe.com/payments/blik.md) com a Stripe.

Para gerenciar os usuários fechando o modal, no gerenciador do lado do servidor do seu `return_url`, inspecione o `status` do Payment Intent para ver se ele é `succeeded` ou ainda `requires_action` (significando que o usuário fechou o modal sem autorização), lidando com cada caso conforme a necessidade.

### Formas de pagamento com código QR

Ao usar o Payment Element com uma forma de pagamento que usa código QR (WeChat Pay, PayNow, Pix, PromptPay ou Cash App Pay), o usuário pode fechar o modal de código QR. Isso aciona um redirecionamento para seu `return_url` e não retorna o usuário para a página de checkout.

Para gerenciar usuários que fecham os modais de código QR, no gerenciador no lado do servidor do seu `return_url`, inspecione o `status` do Payment Intent para ver se é `succeeded` ou se ainda é `requires_action` (significando que o usuário fechou o modal sem pagar), e trate cada caso conforme for necessário.

Como alternativa, evite o redirecionamento automático para o seu `return_url` passando o parâmetro opcional avançado [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), que evita o redirecionamento quando um modal de código QR é fechado.

### Cash App Pay

O Payment Element renderiza um formulário dinâmico de forma diferente na web para desktop ou para dispositivos móveis, pois usa diferentes métodos de autenticação do cliente. Saiba mais sobre como usar o [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) com a Stripe.

#### Elemento de aplicativo da web para dispositivos móveis

O Cash App Pay é uma forma de pagamento baseada em redirecionamento na web para dispositivos móveis. Ele redireciona seu cliente para o Cash App no modo de produção ou uma página de pagamento de teste em um ambiente de teste. Após a conclusão do pagamento, eles são redirecionados para o `return_url`, independentemente de você ter definido `redirect=if_required` ou não.

#### Elemento de aplicativo da web para desktop

Cash App Pay é uma forma de pagamento com QR code na web para desktop, em que o Payment Element renderiza um modal com QR code. Seu cliente precisa ler o QR code com um aplicativo de leitura de QR code ou o aplicativo móvel Cash App.

No modo de produção, ele redireciona o cliente para o `return_url` assim que for redirecionado para o Cash App. Em ambientes de teste, eles podem aprovar ou recusar o pagamento antes de serem redirecionados para o `return_url`. Os clientes também podem fechar o modal com código QR antes de concluir o pagamento, o que aciona um redirecionamento para o seu `return_url`.

Verifique se o `return_url` corresponde a uma página no seu site para inspecionar o `status` do Payment Intent. O `status` do Payment Intent pode ser `succeeded`, `failed` ou `requires_action` (por exemplo, o cliente fechou o modal sem ler o QR code).

Como alternativa, evite o redirecionamento automático para o seu `return_url` passando o parâmetro opcional avançado `redirect=if_required`, que evita o redirecionamento quando um modal de código QR é fechado.

### PayPal

Para usar o PayPal, verifique se você está em um [domínio registrado](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

## Divulgue a Stripe para seus clientes

A Stripe coleta informações sobre interações do cliente com o Elements para fornecer serviços a você, evitar fraudes e melhorar os serviços. Isso inclui o uso de cookies e endereços IP para identificar quais Elements o cliente visualizou durante uma única sessão de checkout. Você é responsável por divulgar e obter todos os direitos e consentimentos necessários para que a Stripe use os dados dessas maneiras. Para saber mais, acesse nossa [central de privacidade](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).

## See also

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Configurar pagamentos futuros](https://docs.stripe.com/payments/save-and-reuse.md)
- [Salvar dados de pagamento durante o pagamento](https://docs.stripe.com/payments/save-during-payment.md)
- [Calcule o imposto sobre vendas, GST e IVA no seu fluxo de pagamento](https://docs.stripe.com/tax/standalone-tax-api.md)