# Crie uma página de checkout personalizada que inclui o Link
Integre o Link usando o Payment Element ou o Link Authentication Element.
Se a sua plataforma Connect utiliza [Contas configuradas pelo cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilize o nosso [guia](https://docs.stripe.com/connect/use-accounts-as-customers.md) para substituir as referências a `Cliente` e eventos no seu código pelas referências equivalentes da API Accounts v2.
Este guia mostra como aceitar pagamentos com [Link](https://docs.stripe.com/payments/link.md) usando a [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) e o [Payment Element](https://docs.stripe.com/payments/payment-element.md) ou o [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md).
Há três maneiras de proteger um endereço de e-mail do cliente para autenticação e inscrição em :
- **Passar um endereço de e-mail:** você pode passar um endereço de e-mail para o Payment Element usando [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues). Se você já está coletando o endereço de e-mail e/ou o número de telefone do cliente no fluxo de checkout, recomendamos esta abordagem.
- **Coletar um endereço de e-mail:** você pode coletar um endereço de e-mail diretamente no Payment Element. Se você não coleta o endereço de e-mail em nenhum lugar do fluxo de checkout, recomendamos esta abordagem.
- **Link Authentication Element:** Você pode usar o Link Authentication Element para criar um único campo de entrada de e-mail para coleta de e-mail e autenticação do Link. Recomendamos fazer isso se você usar [o Address Element](https://docs.stripe.com/elements/address-element.md).
Recolher um endereço de e-mail do cliente para autenticação ou inscrição no Link
## Configurar a Stripe [Lado do servidor]
Primeiro, [crie uma conta Stripe](https://dashboard.stripe.com/register) ou [entre](https://dashboard.stripe.com/login).
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]
A Stripe usa um objeto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) para representar sua intenção de coletar o pagamento de um cliente, acompanhando suas tentativas de cobrança e alterações no estado do pagamento durante todo o processo.
Se você recolher os dados do cartão para [uso futuro com Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md), liste as formas de pagamento manualmente em vez de usar formas de pagamento dinâmicas. Para usar Link sem formas de pagamento dinâmicas, atualize seu integração para enviar `link` em `pagamento_method_types`.
Ao criar um PaymentIntent, [ofereça dinamicamente aos seus clientes as formas de pagamento mais relevantes](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), incluindo Link, usando formas de pagamento dinâmicas. Para usar formas de pagamento dinâmicas, não inclua o parâmetro `pagamento_method_types`. Opcionalmente, você também pode ativar `automatic_pagamento_methods`.
> Quando sua integração não define o parâmetro `payment_method_types`, algumas formas de pagamento são ativadas automaticamente, incluindo cartões e carteiras.
Para adicionar Link à sua integração com Elements usando formas de pagamento dinâmicas:
1. No seu Dashboard, [nas configurações da forma de pagamento](https://dashboard.stripe.com/settings/payment_methods), ative Link.
1. Se você tiver uma integração existente que lista manualmente as formas de pagamento, remova o parâmetro [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) da integração.
### 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
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## Coletar e-mail do cliente
Link autentica um cliente usando o endereço de e-mail dele. Dependendo do seu fluxo de checkout, você tem as seguintes opções: passar um e-mail para o Payment Element, coletá-lo diretamente no Payment Element ou usar o Authentication Element do Link. Dessas opções, a Stripe recomenda passar o endereço de e-mail do cliente para o Payment Element, se disponível.
#### Passar um e-mail
Se *algum* dos itens a seguir se aplicar a você:
- Você sabe o endereço de e-mail do seu cliente antes de ele acessar a página de pagamento (de um perfil do cliente, por exemplo).
- Você não precisa coletar um endereço de entrega do cliente.
- Você prefere usar seu próprio campo de entrada de e-mail e colocá-lo antes do formulário de pagamento.
Em seguida, integre Link passando o e-mail do cliente para o Payment Element, o que acelera o checkout ao acionar o fluxo de autenticação do Link assim que o cliente chega à etapa de pagamento. Esta opção integra um elemento, o Payment Element.
Link preenche automaticamente o e-mail coletado no formulário de pagamento para tornar o checkout mais rápido.
Link exibe uma solicitação de autenticação para um cliente existente.
Neste fluxo, você mantém a coleta de e-mail no seu próprio campo de formulário *antes* que o cliente chegue à etapa de pagamento e, em seguida, passa o e-mail para o Payment Element. O Payment Element autentica o cliente na etapa de pagamento e mostra os dados de pagamento do cliente salvos na conta Link ou exibe o formulário de criação da conta Link após a inserção dos dados do cartão. Veja como isso funciona:
Integrar o Link usando o Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Esta opção de integração não coleta o endereço de entrega do cliente. Se precisar coletar esse endereço, integre Link usando o Link Authentication Element, Address Element e Payment Element.
#### Coletar um e-mail
A autenticação de Link no Payment Element permite que seus clientes insiram um endereço de e-mail diretamente no Payment Element, sem necessidade de integração adicional.
Neste fluxo, seu cliente insere o endereço de e-mail e se autentica ou se cadastra no Link diretamente no Payment Element durante o checkout. Se o cliente ainda não tiver se cadastrado no Link e escolher uma forma de pagamento compatível no Payment Element, será solicitado a salvar seus dados usando o Link. Para aqueles que já se cadastraram, o Link preenche automaticamente as informações de pagamento.
#### Usar o Link Authentication Element
Se *algum* dos itens a seguir se aplicar a você:
- Você quer usar um componente único e otimizado para coleta de e-mail e autenticação do Link.
- Você precisa coletar um endereço de entrega do cliente.
Em seguida, use o fluxo de integração que implementa estes elementos: o Link Authentication Element, o Payment Element e o Address Element opcional.
Uma página de checkout habilitada para Link inclui o Link Authentication Element no início, seguido pelo Address Element e pelo Payment Element no final. Você também pode exibir o Link Authentication Element em páginas separadas, na mesma ordem, para fluxos de checkout em várias páginas.
Criar um formulário de pagamento usando vários Elements
A integração funciona da seguinte forma:
Um diagrama que descreve como integrar o Link usando o Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Configurar o formulário de pagamento [Lado do cliente]
Agora está tudo pronto para configurar o formulário de pagamento personalizado com os componentes de IU pré-incorporados do Elements. Para que sua integração funcione, o endereço da página de pagamento deve começar com `https://` em vez de `http://`. Você pode testar sua integração sem usar HTTPS. [Habilite HTTPS](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos em tempo real.
#### Passar um e-mail
O Payment Element renderiza um formulário de contato do cliente pré-preenchido que inclui o número de telefone e o endereço de e-mail. Ele também renderiza um formulário dinâmico que permite ao cliente escolher um tipo de forma de pagamento. Esse formulário coleta automaticamente todos os dados de pagamento necessários para o tipo de forma de pagamento selecionado pelo cliente.
Além disso, o Payment Element gerencia a exibição das formas de pagamento salvas no Link para clientes autenticados.
#### React
### Configurar o Stripe Elements
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
```
### Montar o formulário de pagamentos
Na página de pagamento, encapsule seu formulário de pagamento com o componente `Elements`, passando o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Caso tenha outras informações do cliente, passe-as para o objeto `defaultValues.billingDetails` do `PaymentElement`. Preencher o máximo de informações possível simplifica a criação e a reutilização da conta Link para os clientes. Você também pode passar o [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizando os Elements de acordo com o design do seu site.
Em seguida, processe o `PaymentElement` no seu formulário de pagamento. Recomendamos passar pelo menos o endereço de e-mail do cliente para o [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para preencher os dados de Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurar o Stripe Elements
Inclua o script do Stripe.js na página de pagamento adicionando-o ao `head` do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.
```html
Checkout
```
Crie uma instância do [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) fornecendo sua [chave API](https://docs.stripe.com/keys.md) publicável como o primeiro parâmetro:
```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('<>');
```
### Adicione o Elements de Link à sua página de pagamento
Na página de pagamento, crie nodes DOM vazios com IDs exclusivos para renderização dos Elements:
```html
```
Quando o formulário configurado for carregado, crie um novo grupo de Elements, passando o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Também é possível passar o [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar os Elements de acordo com o design do site.
Caso tenha outros dados do cliente, passe-os para o objeto `defaultValues.billingDetails` do `PaymentElement`. O preenchimento prévio do maior número de dados possível simplifica a criação e a reutilização de contas do Link para seus clientes.
Por fim, crie uma instância de cada Element e monte-as no node DOM correspondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Coletar um e-mail
O Payment Element renderiza um formulário de contato do cliente pré-preenchido que inclui o número de telefone e o endereço de e-mail. Ele também renderiza um formulário dinâmico que permite ao cliente escolher um tipo de forma de pagamento. Esse formulário coleta automaticamente todos os dados de pagamento necessários para o tipo de forma de pagamento selecionado pelo cliente.
Além disso, o Payment Element gerencia a exibição dos métodos de pagamento salvos no Link para clientes autenticados. Para essa integração, você deve manter o Link ativado nas [configurações de formas de pagamento](https://dashboard.stripe.com/settings/payment_methods).
#### React
### Configurar o Stripe Elements
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
```
### Montar o formulário de pagamentos
Na página de pagamento, encapsule seu formulário de pagamento com o componente `Elements`, passando o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Caso tenha outras informações do cliente, passe-as para o objeto `defaultValues.billingDetails` do `PaymentElement`. Preencher o máximo de informações possível simplifica a criação e a reutilização da conta Link para os clientes. Você também pode passar o [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance), personalizando os Elements de acordo com o design do seu site.
Em seguida, processe o `PaymentElement` no seu formulário de pagamento. Recomendamos passar pelo menos o endereço de e-mail do cliente para o [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) para preencher os dados de Link.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Configurar o Stripe Elements
Inclua o script do Stripe.js na página de pagamento adicionando-o ao `head` do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.
```html
Checkout
```
Crie uma instância do [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) fornecendo sua [chave API](https://docs.stripe.com/keys.md) publicável como o primeiro parâmetro:
```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('<>');
```
### Adicione o Elements de Link à sua página de pagamento
Na página de pagamento, crie nodes DOM vazios com IDs exclusivos para renderização dos Elements:
```html
```
Quando o formulário configurado for carregado, crie um novo grupo de Elements, passando o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Também é possível passar o [objeto appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) para personalizar os Elements de acordo com o design do site.
Caso tenha outros dados do cliente, passe-os para o objeto `defaultValues.billingDetails` do `PaymentElement`. O preenchimento prévio do maior número de dados possível simplifica a criação e a reutilização de contas do Link para seus clientes.
Por fim, crie uma instância de cada Element e monte-as no node DOM correspondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Usar o Link Authentication Element
O elemento de autenticação do Link exibe um campo de entrada de endereço de e-mail. Quando o Link associa o e-mail do cliente a uma conta existente do Link, ele envia ao cliente um código único e seguro para o celular para autenticação. Se o cliente se autenticar com sucesso, a Stripe exibe automaticamente os endereços e formas de pagamento salvas no Link para uso.
Essa integração também cria o Payment Element, que renderiza um formulário dinâmico que permite ao cliente escolher o tipo de forma de pagamento. O formulário coleta automaticamente todos os dados de pagamento necessários para o tipo de forma de pagamento selecionado pelo cliente. O Payment Element também gerencia a exibição das formas de pagamento salvas no Link para clientes autenticados.
#### React
### Configurar o Stripe Elements
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
```
Na página de pagamento, encapsule seu formulário de pagamento com o componente `Elements`, passando o [segredo do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) da [etapa anterior](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Se já estiver coletando o e-mail do cliente em outra parte do formulário, substitua a entrada existente pelo `linkAuthenticationElement`.
Se você não recolher e-mails, adicione o `linkAuthenticationElement` ao seu fluxo de checkout. Você deve colocar o `linkAuthenticationElement` antes do `ShippingAddressElement` (opcional se você recolher endereços de envio) e do `PaymentElement` para que o Link preencha automaticamente os dados salvos do Link para o cliente no `ShippingAddressElement` e no `PaymentElement`. Você também pode passar a opção [appearance](https://docs.stripe.com/elements/appearance-api.md), personalizando os Elements para corresponder ao design do seu site.
Se você tiver o e-mail do cliente, passe-o para a opção `defaultValues` do `linkAuthenticationElement`. Isso preenche automaticamente o endereço de e-mail e inicia o processo de autenticação do Link.
Se você tiver outros dados do cliente, passe-os para o objeto `defaultValues.billingDetails` do `PaymentElement`. O preenchimento prévio do maior número de dados possível simplifica a criação e a reutilização de contas do Link para seus clientes.
Em seguida, renderize os componentes `linkAuthenticationElement`e `PaymentElement` no formulário de pagamento:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
O `linkAuthenticationElement`, o `PaymentElement` e o `ShippingAddressElement` não precisam estar na mesma página. Se você tiver um processo em que os dados de contato do cliente, os detalhes de envio e os detalhes de pagamento são exibidos ao cliente em etapas separadas, você poderá exibir cada Element na etapa ou página apropriada. Inclua o `linkAuthenticationElement` como o formulário de entrada de e-mail na etapa de cobrança de informações de contato para garantir que o cliente possa tirar o máximo proveito do envio e pagamento automático fornecido pelo {$% link.brand_name %}.
Se você recolher o e-mail do seu cliente com o Link Authentication Element no início do fluxo de checkout, não será necessário mostrá-lo novamente nas páginas de envio ou pagamento.
### Recuperar um endereço de e-mail
Você pode recuperar os detalhes do endereço de e-mail usando a propriedade `onChange` no componente `linkAuthenticationElement`. O gerenciador de `onChange` é acionado sempre que o usuário atualiza o campo de e-mail ou quando um e-mail de cliente salvo é preenchido automaticamente.
```jsx
{
setEmail(event.value.email);
}} />
```
### Preencher o e-mail de um cliente
O Link Authentication Element aceita um endereço de e-mail. O fornecimento do endereço de e-mail de um cliente aciona o fluxo de autenticação do Link assim que o cliente acessa a página de pagamento usando a opção `defaultValues`.
```jsx
```
#### HTML + JS
### Configurar o Stripe Elements
Inclua o script do Stripe.js na página de pagamento adicionando-o ao `head` do arquivo HTML. Sempre carregue Stripe.js diretamente de js.stripe.com para manter conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.
```html
Checkout
```
Crie uma instância do [objeto Stripe](https://docs.stripe.com/js.md#stripe-function) informando sua [chave de API](https://docs.stripe.com/keys.md) publicável como o primeiro parâmetro:
```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('<>');
```
### Adicione os Elements do Link à sua página de pagamento
Na página de pagamento, crie nodes DOM vazios com IDs exclusivos para renderização dos Elements:
```html
```
Quando o formulário que você acabou de configurar carregar, crie um novo grupo do Elements, passando o [chave secreta do cliente](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Se você já coleta o e-mail do cliente no seu formulário de pagamento, substitua o input existente pelo `linkAuthenticationElement`.
Se você não recolher e-mails, adicione o `linkAuthenticationElement` ao seu fluxo de checkout antes do `shippingAddress` (opcional se você recolher endereços de entrega). Adicione o `PaymentElement` para Link para preencher automaticamente os dados salvos no do seu cliente nos elementos `shippingAddress` e `PaymentElement`. Você também pode passar o objeto [appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance), personalizando os Elements de acordo com o design do seu site.
Se você tiver o e-mail do cliente, passe-o para a opção `defaultValues` do `linkAuthenticationElement`. Isso preenche o e-mail e inicia o processo de autenticação do Link. Se você tiver outras informações do cliente, passe-o para o objeto `defaultValues.billingDetails` do `PaymentElement`. Pré-preencher o máximo de informações possível facilita a criação e o uso da conta Link pelos seus clientes.
Por fim, crie uma instância de cada Element e monte-as no node DOM correspondente:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
O `linkAuthenticationElement` exibe um campo para o endereço de e-mail. Quando o Link identifica que o e-mail do cliente corresponde a uma conta Link existente, ele envia ao cliente um código seguro de uso único para o telefone, a fim de autenticar. Se o cliente autenticar com sucesso, a Stripe exibe automaticamente os endereços e métodos de pagamento salvos no Link para que ele possa utilizá-los.
O `PaymentElement` exibe um formulário dinâmico que permite ao seu cliente escolher o tipo de método de pagamento. O formulário coleta automaticamente todos os dados de pagamento necessários para o tipo de método selecionado pelo cliente. O `PaymentElement` também gerencia a exibição dos métodos de pagamento salvos no Link para clientes autenticados.
Os Elements de Autenticação, Pagamento e Endereço de Entrega do Link não precisam estar na mesma página. Se você tiver um processo em que as informações de contato do cliente, informações de envio e dados de pagamento são exibidos em etapas separadas durante o checkout, você pode mostrar cada Element na etapa ou página apropriada. Inclua o Element de Autenticação do Link como o formulário de e-mail na etapa de coleta de informações de contato para garantir que o cliente possa aproveitar totalmente o preenchimento automático fornecido pelo Link.
Se você recolher o e-mail do seu cliente com o Link Authentication Element no início do fluxo de checkout, não será necessário mostrá-lo novamente nas páginas de envio ou pagamento.
### Recuperar o endereço de e-mail
Você pode recuperar os detalhes do endereço de e-mail usando a propriedade `onChange` no componente `linkAuthenticationElement`. O gerenciador de `onChange` é acionado sempre que o usuário atualiza o campo de e-mail ou quando um e-mail de cliente salvo é preenchido automaticamente.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Preencher o e-mail de um cliente
O Link Authentication Element aceita um endereço de e-mail. O fornecimento do endereço de e-mail de um cliente inicia o fluxo de autenticação do Link assim que o cliente acessa a página de pagamento usando a opção `defaultValues`.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
```
## Optional: Preencher dados adicionais do cliente [Lado do cliente]
Se tiver, o preenchimento prévio dos dados do cliente simplifica ainda mais o processo de checkout e reduz a inserção manual de dados.
#### Enviar em um e-mail
O Payment Element aceita um objeto `defaultValues.billingDetails` que permite preencher o nome e o número de telefone de um cliente, bem como os endereços de entrega e de e-mail. Ao preencher o máximo possível de informações do cliente, você simplifica a criação e a reutilização da conta Link.
Preencha o endereço de e-mail, o número de telefone e o nome do cliente para simplificar o processo de registro em Link.
Você pode fornecer os seguintes valores ao objeto `defaultValues.billingDetails`:
| Valor | Obrigatório | Formato |
| --------- | ----------- | --------------------------------------------------------------------------------- |
| `email` | Obrigatório | string |
| `name` | Opcional | string |
| `phone` | Opcional | string |
| `address` | Opcional | Objeto JSON com os campos `postal_code` e `country`. Todos os campos são strings. |
Passar `defaultValues.billingDetails` para o Payment Element depende se você coleta dados em uma página separada antes do Payment Element ou na mesma página.
#### Antes do Payment Element
Se você coleta dados em uma página separada antes do Payment Element, pode preencher os valores passando `defaultValues.billingDetails` ao criar o Payment Element:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Mesma página do Payment Element
Se você coleta dados na mesma página que o Payment Element, pode preencher os valores atualizando o Payment Element com `defaultValues.billingDetails`.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Enviar um e-mail para o Link Authentication Element
Se estiver usando o Authentication Element do Link, adicione o objeto `defaultValues.billingDetails` ao Payment Element para preencher o nome e o número de telefone do cliente, bem como os endereços de entrega. Ao preencher o máximo possível de informações do cliente, você simplifica a criação e reutilização da conta Link.
Preencha o endereço de e-mail, o número de telefone e o nome do cliente para simplificar o processo de registro no Link.
Você pode fornecer os seguintes valores ao objeto `defaultValues.billingDetails`:
| Valor | Obrigatório | Formato |
| --------- | ----------- | --------------------------------------------------------------------------------- |
| `name` | Opcional | string |
| `phone` | Opcional | string |
| `address` | Opcional | Objeto JSON com os campos `postal_code` e `country`. Todos os campos são strings. |
Um Payment Element com todos os valores preenchidos é semelhante aos seguintes exemplos:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Coletar endereços de entrega [Lado do cliente]
#### Enviar em um e-mail
Esta opção de integração não coleta o endereço de entrega do cliente. Se você precisar coletar um endereço de entrega, integre o Link usando o Elemento de Autenticação Link, o Elemento de Endereço e o Elemento de Pagamento do Link nas etapas [Usar o Elemento de Autenticação do ](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping)
#### Usar o Link Authentication Element
#### React
Para recolher endereços, crie um nó DOM vazio para que o [Address Element](https://docs.stripe.com/elements/address-element.md) seja processado. O Address Element deve ser exibido após o Link Authentication Element para que o Link preencha automaticamente os dados de endereço salvos de um cliente:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Exiba o `AddressElement` antes do `PaymentElement`. O `PaymentElement` detecta dinamicamente dados de endereço coletados pelo `AddressElement`, ocultando campos desnecessários e coletando detalhes de endereço de cobrança adicionais conforme necessário.
### Recupere dados de endereço
O `AddressElement` passa automaticamente o endereço de entrega quando um cliente envia o pagamento, mas você também pode recuperar os detalhes do endereço no front-end usando a propriedade `onChange`. O gerenciador `onChange` envia um evento sempre que o usuário atualiza qualquer campo no Address Element ou seleciona um endereço salvo:
```jsx
{
setAddressState(event.value);
}} />
```
### Preencha um endereço de entrega
Use [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) para preencher os dados de endereço, agilizando o checkout de seus clientes.
```jsx
```
#### HTML + JS
O [Address Element](https://docs.stripe.com/elements/address-element.md) permite recolher endereços de envio ou de cobrança. Crie um nó DOM vazio para o Address Element. Exiba-o após o Link Authentication Element.
```html
```
Em seguida, crie uma instância do Address Element e monte-a no node DOM:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Exiba o Address Element antes do Payment Element. O Payment Element detecta dinamicamente dados de endereço coletados pelo Address Element, ocultando campos desnecessários e coletando detalhes de endereço de cobrança adicionais conforme necessário.
### Recupere dados de endereço
O Address Element passa automaticamente o endereço de entrega quando um cliente envia o pagamento, mas você também pode recuperar os detalhes do endereço no frontend usando o evento `change`. O evento `change` é enviado sempre que o usuário atualiza qualquer campo no Address Element, ou após selecionar endereços salvos:
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Preencha um endereço de entrega
Use [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues) para preencher os dados de endereço, agilizando o checkout de seus clientes.
```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
mode: 'shipping',
defaultValues: {
name: 'Jane Doe',
address: {
line1: '354 Oyster Point Blvd',
line2: '',
city: 'South San Francisco',
state: 'CA',
postal_code: '94080',
country: 'US',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Personalize a aparência [Lado do cliente]
Depois de adicionar esses Elements à sua página, você pode personalizar sua [aparência](https://docs.stripe.com/elements/appearance-api.md#theme) conforme o seu design:
Personalizar a aparência dos Elements
## 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 com os dados coletados do seu cliente nos diferentes formulários do Elements. 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 Stripe redireciona 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 a Stripe redirecioná-lo para o `return_url`.
Por padrão, pagamentos por cartão e bancos são redirecionados imediatamente para o `return_url` quando um pagamento é finalizado. Se não quiser redirecionar para o `return_url`, você pode usar [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) para alterar o comportamento.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(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`.
}
});
```
O `return_url` corresponde a uma página no seu site que informa [o status do pagamento](https://docs.stripe.com/payments/payment-intents/verifying-status.md) do `PaymentIntent` quando você renderiza a página de retorno. Quando a Stripe redireciona o cliente para o `return_url`, você pode usar os parâmetros de consulta de URL a seguir para verificar o status do pagamento. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o `return_url`. Esses parâmetros de consulta permanecem por meio do processo de redirecionamento.
| 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`. |
## Optional: Separar autorização e captura [Lado do servidor]
Link aceita [autorização e captura separadas](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Você deve capturar um pagamento autorizado Link dentro de sete dias da autorização. Caso contrário, a autorização é cancelada automaticamente e você não pode capturar esse pagamento.
### Instruir a Stripe a autorizar somente
Para indicar que você quer separar a autorização da captura, defina [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) como `manual` ao criar o PaymentIntent. Esse parâmetro instrui a Stripe a autorizar somente o valor na forma de pagamento do cliente.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Capturar os fundos
Após a autorização bem-sucedida, o [status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) do PaymentIntent passa para `requires_capture`. Para capturar os fundos autorizados, faça uma solicitação de [captura](https://docs.stripe.com/api/payment_intents/capture.md) do PaymentIntent. O valor total autorizado é capturado por padrão. Você não pode capturar mais do que isso, mas pode capturar menos.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Optional) Cancelar a autorização
Para cancelar uma autorização, você pode [cancelar o PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment).
## Gerenciar eventos pós-pagamento [Lado do servidor]
A 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 um webhook para receber esses eventos](https://docs.stripe.com/webhooks/quickstart.md) 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 trabalho de entrega.
Configure sua integração para escutar esses eventos em vez de aguardar um retorno de chamada do cliente. Quando você aguarda um retorno de chamada do cliente, ele pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada. Configurar sua integração para escutar eventos assíncronos permite 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`, você também pode gerenciar dois outros eventos importantes ao coletar pagamentos com o Payment Element:
| Evento | Descrição | Ação |
| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Enviado da Stripe quando um cliente conclui um pagamento. | Envie ao cliente uma confirmação de pedido e *execute* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) o pedido. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Enviado da Stripe quando um cliente tenta realizar um pagamento, mas o pagamento não é bem-sucedido. | Se um pagamento passou de `processing` para `payment_failed`, ofereça ao cliente outra tentativa para pagar. |
## Teste a integração
> Não armazene dados reais de usuários em contas do Link no *sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link. Trate-as como se estivessem disponíveis publicamente, pois essas contas de teste estão associadas à sua chave publicável.
No momento, Link só funciona com cartões de crédito, cartões de débito e compras em contas bancárias qualificadas dos EUA. Link exige [registro de domínio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
Você pode criar contas em área restrita para Link usando qualquer endereço de e-mail válido. A tabela a seguir mostra os valores fixos de senha de uso único que a Stripe aceita para autenticar contas em área restrita:
| Valor | Resultado |
| ---------------------------------------------- | ------------------------------------------ |
| Quaisquer outros 6 dígitos não listados abaixo | Sucesso |
| 000001 | Erro, código inválido |
| 000002 | Erro, código expirado |
| 000003 | Erro, número máximo de tentativas excedido |
Para testar formas de pagamento específicas, consulte os [exemplos de teste do Element Pagamento](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Várias fontes de fundos
À medida que a Stripe adiciona outras fontes de financiamento, você não precisa atualizar sua integração. A Stripe aceita essas fontes automaticamente com o mesmo tempo de liquidação de fundos da transação e com as mesmas garantias dos pagamentos com cartão e conta bancária.
### Autenticação de cartões e 3D Secure
Link aceita autenticação *3D Secure 2 (3DS2)* (3D Secure 2 (3DS2) removes friction from the authentication process and improves the purchase experience compared to 3D Secure 1. It's the main card authentication method used to meet Strong Customer Authentication (SCA) requirements in Europe and is a key mechanism for businesses to request exemptions to SCA) para pagamentos com cartão. O 3DS2 exige que os clientes concluam uma etapa adicional de verificação com o emissor do cartão quando estiverem pagando. Pagamentos autenticados com sucesso usando o 3D Secure são cobertos por uma *transferência de responsabilidade* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).
Para acionar fluxos de desafio de autenticação 3DS2 com Link em uma área restrita, use o seguinte cartão de teste com qualquer CVC, código postal e data de validade futura: 4000000000003220.
Em uma área restrita, o processo de autenticação exibe uma página de autenticação fictícia. Nessa página, você pode autorizar ou cancelar o pagamento. A autorização do pagamento simula a autenticação bem-sucedida e redireciona você para o URL de retorno especificado. Clicar no botão **Falha** simula um erro na autenticação.
Para obter mais detalhes, consulte a [página de autenticação de 3D Secure](https://docs.stripe.com/payments/3d-secure.md).
> Ao testar fluxos de 3DS, apenas cartões de teste para 3DS2 acionam a autenticação no Link.
## Optional: Exibir dados salvos pelo cliente [Lado do servidor] [Lado do cliente]
Se a sua plataforma Connect utiliza [Contas configuradas pelo cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilize o nosso [guia](https://docs.stripe.com/connect/use-accounts-as-customers.md) para substituir as referências a `Cliente` e eventos no seu código pelas referências equivalentes da API Accounts v2.
Além de exibir seus próprios endereços e formas de pagamento salvos por um cliente, você também pode exibir os dados salvos no Link.
Se um cliente tiver mais de uma forma de pagamento salva, a Stripe exibirá os três cartões usados mais recentemente salvos no objeto Customer** (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments), além de quaisquer formas de pagamento que o cliente tenha salvo no Link.
Para fazer isso, crie uma chave efêmera e envie-a ao seu frontend com o ID do *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). As informações no objeto `customer` diferenciam maiúsculas, e não é possível recuperá-las diretamente no Stripe.js. Uma chave efêmera concede acesso temporário aos dados do `customer`.
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-03-25.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
No lado do cliente, obtenha `customerOptions` com `clientSecret`.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Em seguida, passe os valores `customerOptions.ephemeralKey` e `customerOptions.customer` para a opção `customerOptions` no [grupo do Elements](https://docs.stripe.com/js/elements_object/create). Você também precisa passar o sinalizador beta `elements_customers_beta_1` ao carregar a instância Stripe.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-03-25.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Salvar formas de pagamento do Link [Lado do servidor] [Lado do cliente]
Você pode economizar nas formas de pagamento Link em *pagamentos fora da sessão* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) ou em *assinaturas* (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), mas não em futuros *pagamentos na sessão* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Para fazer isso, é preciso anexá-lo a um *Cliente* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crie um objeto `customer` quando seu cliente criar uma conta na sua empresa. Em seguida, especifique o `customer` ao criar seu PaymentIntent.
Quando um novo cliente tiver a primeira transação com sua empresa, crie um objeto `customer` na Stripe para armazenar os dados para uso futuro.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
Na versão mais recente da API, especificar o parâmetro `automatic_payment_methods` é opcional porque a Stripe habilita sua funcionalidade por padrão.
Quando estiver pronto para cobrar o cliente novamente, use o ID `customer` e o *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante para criar um novo PaymentIntent. Defina [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) como `true`. Isso faz com que o PaymentIntent envie um erro se a autenticação for exigida quando o cliente não estiver ativo no site ou aplicativo.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## 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
- [O que é Link](https://docs.stripe.com/payments/link.md)
- [Link com Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [Link no Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Explore o Elemento de autenticação do Link](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [Link em diferentes integrações de pagamento](https://docs.stripe.com/payments/link/link-payment-integrations.md)