# Salvar a forma de pagamento de um cliente quando ele usá-la para fazer um pagamento

Saiba como salvar a forma de pagamento do cliente ao confirmar um PaymentIntent.

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=embedded-components.

Use the [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md) to save payment details during a purchase. This is useful for situations such as:

- Charging a customer for an e-commerce order and storing the payment details for future purchases.
- Initiating the first payment in a series of recurring payments.
- Charging a deposit and storing the payment details to charge the full amount later.

## Compliance

Você é responsável pelo cumprimento de todas as leis, regulamentos e regras de rede aplicáveis ao salvar os detalhes de pagamento de um cliente para uso futuro, como exibir a forma de pagamento do cliente no fluxo de checkout para uma compra futura ou cobrar quando ele não estiver usando ativamente seu site ou aplicativo. Antes de salvar ou cobrar a forma de pagamento de um cliente, certifique-se de:

- Adicionar termos ao seu site ou aplicativo que informem como você planeja salvar os detalhes da forma de pagamento, como:
  - O acordo do cliente que permite que você inicie um pagamento ou uma série de pagamentos em seu nome para transações específicas.
  - O momento e a frequência previstos para os pagamentos (por exemplo, se são cobranças de parcelas agendadas, pagamentos de assinatura ou recargas não agendadas).
  - Como você determina o valor do pagamento.
  - Sua política de cancelamento, se a forma de pagamento for para um serviço de assinatura.
- Use uma forma de pagamento salva apenas para a finalidade indicada em seus termos.
- Recolha o consentimento explícito do cliente para esse uso específico. Por exemplo, inclua uma caixa de seleção “Salvar minha forma de pagamento para uso futuro”.
- Mantenha um registro do acordo por escrito do seu cliente com os seus termos.

> When using Elements with the Checkout Sessions API, only cards and ACH Direct Debit are supported for saved payment methods. You can’t save other payment methods, such as bank accounts.

## Prerequisites

1. Follow the Checkout guide to [accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted).
1. Siga este guia para salvar a forma de pagamento usada durante um pagamento, de modo que você possa utilizá-la em pagamentos futuros do mesmo cliente.

## Enable saved payment methods

> As leis globais de privacidade são complicadas e diferenciadas. Antes de implementar a capacidade de armazenar os dados da forma de pagamento do cliente, trabalhe com sua equipe jurídica para garantir que esteja em conformidade com sua estrutura de privacidade e conformidade.

Para permitir que o cliente salve a forma de pagamento para uso futuro, especifique o parâmetro [saved_payment_method_options.payment_method_save](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-saved_payment_method_options-payment_method_save) ao criar a Checkout Session.

> #### 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 Account configurados pelo cliente](https://docs.stripe.com/connect/use-accounts-as-customers.md), em vez de usar objetos [Customer](https://docs.stripe.com/api/customers.md).

Saving a payment method requires an object that represents your customer. This object can be a customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) if you use the Accounts v2 API, or a [Customer](https://docs.stripe.com/api/customers/object.md) if you use the Customers API. Pass an existing customer or create a new one by setting [customer_creation](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_creation) to `always` on the Checkout Session.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]=enabled"
```

Depois de criar a Checkout Session, use o [segredo do cliente](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) retornado na resposta para [criar sua página de Checkout](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

> In the latest version of Stripe.js, specifying `enableSave` to `auto` is optional because that’s the default value when saved payment methods are enabled on the Checkout Session.

#### HTML + JS

The Payment Element automatically displays a consent collection checkbox when saved payment methods are enabled on the Checkout Session. You can explicitly configure this behavior using [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});
```

#### React

The Payment Element automatically displays a consent collection checkbox when saved payment methods are enabled on the Checkout Session. You can explicitly configure this behavior using [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `CheckoutElementsProvider`.

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

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

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',
          },
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Reutilizar uma forma de pagamento já salva

Each saved payment method is linked to an object that represents your customer. This object can be a customer-configured [Account](https://docs.stripe.com/api/v2/core/accounts/object.md) if you use the Accounts v2 API, or a [Customer](https://docs.stripe.com/api/customers/object.md) if you use the Customers API. Before creating the Checkout Session, authenticate your customer, and pass the corresponding object ID to the Checkout Session.

> In the latest version of Stripe.js, `enableRedisplay` defaults to `auto` when saved payment methods are enabled on the Checkout Session.

The Payment Element automatically redisplays previously saved payment methods for your customer to use during checkout when saved payment methods are enabled on the Checkout Session.

#### Accounts v2

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}"
```

#### Customers v1

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=2" \
  -d mode=payment \
  -d ui_mode=elements \
  -d "customer={{CUSTOMER_ID}}"
```

#### HTML + JS

You can explicitly configure the redisplay behavior using [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});
```

#### React

You can explicitly configure the redisplay behavior using [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `CheckoutElementsProvider`.

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

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

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {
          savedPaymentMethod: {
            // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableSave: 'auto',// Default is 'auto' in the latest version of Stripe.js - this configuration is optional
            enableRedisplay: 'auto',
          }
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Optional: Build a saved payment method UI

#### HTML + JS

You can build your own saved payment method UI instead of using the built-in UI provided by the Payment Element.

To prevent the Payment Element from handling consent collection and displaying the previously saved payment methods, pass in additional [elementsOptions](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions) on `initCheckoutElementsSdk`.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    },
  }
});
```

#### React

You can build your own saved payment method UI instead of using the built-in UI provided by the Payment Element. To prevent the Payment Element from handling consent collection and displaying the previously saved payment methods, pass in additional [elementsOptions](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions) on the `CheckoutElementsProvider`.

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

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

  return (
    <CheckoutElementsProvider
      stripe={stripe}
      options={{
        clientSecret,
        elementsOptions: {savedPaymentMethod: {
            enableSave: 'never',
            enableRedisplay: 'never',
          },
        },
      }}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

### Collect consent

> As leis globais de privacidade são complicadas e diferenciadas. Antes de implementar a capacidade de armazenar os dados da forma de pagamento do cliente, trabalhe com sua equipe jurídica para garantir que esteja em conformidade com sua estrutura de privacidade e conformidade.

In most cases, you must collect a customer’s consent before you save their payment method details. The following example shows how to obtain consent using a checkbox.

#### HTML + JS

```html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

#### React

```jsx
import React from 'react';

type Props = {
  savePaymentMethod: boolean;
  onSavePaymentMethodChange: (save: boolean) => void;
}
const ConsentCollection = (props: Props) => {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSavePaymentMethodChange(e.target.checked);
  };
  return (
    <label>
      <input
        type="checkbox"
        checked={props.savePaymentMethod}
        onChange={handleChange}
      />
      Save my payment information for future purchases
    </label>
  );
};

export default ConsentCollection;
```

When you call [confirm](https://docs.stripe.com/js/custom_checkout/confirm), you can indicate to Stripe that your customer has provided consent by passing the `savePaymentMethod` parameter. When you save a customer’s payment details, you’re responsible for complying with all applicable laws, regulations, and network rules.

#### HTML + JS

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';
const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

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

type Props = {
  savePaymentMethod: boolean;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  } else if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }
  const {confirm} = checkoutState.checkout;
  const handleClick = () => {
    setLoading(true);confirm({savePaymentMethod: props.savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

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

export default PayButton;
```

### Render saved payment methods

Use the [savedPaymentMethods](https://docs.stripe.com/js/custom_checkout/session_object#custom_checkout_session_object-savedPaymentMethods) array on the front end to render the customer’s available payment methods.

> The `savedPaymentMethods` array includes only the payment methods that have [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) set to `always`. Follow the steps for [collecting consent](https://docs.stripe.com/payments/save-during-payment.md#collect-consent) from your customer and make sure to properly set the `allow_redisplay` parameter.

#### HTML + JS

```html
<div id="saved-payment-methods"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

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

type Props = {
  selectedPaymentMethod: string | null;
  onSelectPaymentMethod: (paymentMethod: string) => void;
};
const PaymentMethods = (props: Props) => {const checkoutState = useCheckout();

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

  const handleOptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.onSelectPaymentMethod(e.target.value);
  };

  return (
    <div>
      {savedPaymentMethods.map((pm) => (
        <label key={pm.id}>
          <input
            type="radio"
            value={pm.id}
            checked={props.selectedPaymentMethod === pm.id}
            onChange={handleOptionChange}
          />
          Card ending in {pm.card.last4}
        </label>
      ))}
    </div>
  );
};

export default PaymentMethods;
```

### Confirm with a saved payment method

When your customer selects a saved payment method and is ready to complete checkout, call [confirm](https://docs.stripe.com/js/custom_checkout/confirm) and pass in the [paymentMethod](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-paymentMethod) ID.

#### HTML + JS

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

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

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
```

#### React

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

type Props = {
  selectedPaymentMethod: string | null;
}
const PayButton = (props: Props) => {
  const checkoutState = useCheckout();
  const [loading, setLoading] = React.useState(false);

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

  const handleClick = () => {
    setLoading(true);confirm({paymentMethod: props.selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
      setLoading(false);
    })
  };

  return (
    <button disabled={loading} onClick={handleClick}>
      Pay
    </button>
  )
};

export default PayButton;
```


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-during-payment?payment-ui=elements.

Use a [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) para salvar os dados de pagamento de uma compra. São diversos casos de uso:

- Cobre um cliente por um pedido de e-commerce e armazene os dados para compras futuras.
- Inicie o primeiro pagamento de uma série de pagamentos recorrentes.
- Cobre um depósito e armazene os dados para cobrar o valor total depois.

> #### Transações com apresentação de cartão
> 
> Transações com apresentação de cartão, como pagamentos usando o Stripe Terminal, usam um processo diferente para salvar a forma de pagamento. Para obter mais informações, consulte [a documentação do Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-after-payment.md).

## conformidade

Você é responsável pelo cumprimento de todas as leis, regulamentos e regras de rede aplicáveis ao salvar os detalhes de pagamento de um cliente para uso futuro, como exibir a forma de pagamento do cliente no fluxo de checkout para uma compra futura ou cobrar quando ele não estiver usando ativamente seu site ou aplicativo. Antes de salvar ou cobrar a forma de pagamento de um cliente, certifique-se de:

- Adicionar termos ao seu site ou aplicativo que informem como você planeja salvar os detalhes da forma de pagamento, como:
  - O acordo do cliente que permite que você inicie um pagamento ou uma série de pagamentos em seu nome para transações específicas.
  - O momento e a frequência previstos para os pagamentos (por exemplo, se são cobranças de parcelas agendadas, pagamentos de assinatura ou recargas não agendadas).
  - Como você determina o valor do pagamento.
  - Sua política de cancelamento, se a forma de pagamento for usada em um serviço de assinatura.
- Use uma forma de pagamento salva apenas para a finalidade indicada em seus termos.
- Recolha o consentimento explícito do cliente para esse uso específico. Por exemplo, inclua uma caixa de seleção “Salvar minha forma de pagamento para uso futuro”.
- Mantenha um registro do acordo por escrito do seu cliente com os seus termos.

## Prerequisites

1. Follow the Payment Intents API guide to [accept a payment](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents).
1. Siga este guia para salvar a forma de pagamento usada durante um pagamento, de modo que você possa utilizá-la em pagamentos futuros do mesmo cliente.

## Save payment methods during payment [Lado do servidor]

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 Account configurados pelo cliente](https://docs.stripe.com/connect/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
  }
})
```

## Save only payment methods that support reuse [Lado do servidor]

You can’t make all payment methods [reusable](https://docs.stripe.com/payments/accept-a-payment.md#save-payment-method-details) by enabling `setup_future_usage` in the Payment Intent. See [Payment method support](https://docs.stripe.com/payments/payment-methods/payment-method-support.md#additional-api-supportability) to learn more about which payment methods are compatible with `setup_future_usage`.

Instead, you can save payment method details only when a customer selects a payment method that supports it. For example, if you accept both card payments and Giropay (which you can’t reuse), configure `setup_future_usage=off_session` on the `payment_method_options[card]` object.

Se o cliente se recusar a salvar seus dados de pagamento, desative `setup_future_usage` no PaymentIntent no lado do servidor. Não aceitamos esse ajuste no lado do cliente.

#### Gerenciar formas de pagamento no Dashboard

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.

#### curl

```bash
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 "payment_method_options[card][setup_future_usage]"="off_session"
```

#### Listar manualmente as formas de pagamento

Alternativamente, você pode listar `card` e `giropay` usando [tipos de forma de pagamento](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) como no exemplo abaixo.

#### curl

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

## Cobrar mais tarde a forma de pagamento salva [Lado do servidor]

> `bancontact`, `ideal` e `sofort` são formas de pagamento avulsas por padrão. Quando configurados para uso futuro, eles geram um tipo de forma de pagamento reutilizável `sepa_debit`, então você precisa usar `sepa_debit` para consultar formas de pagamento salvas.

> #### Conformidade
> 
> Você é responsável por cumprir todas as leis, regulamentos e regras de rede aplicáveis ao salvar os dados de pagamento de um cliente. Quando exibir formas de pagamento passadas ao seu cliente final para compras futuras, liste as formas de pagamento para as quais obteve consentimento do cliente para salvar os dados para esse uso futuro específico. Para diferenciar entre formas de pagamento vinculadas a clientes que podem e não podem ser apresentados ao seu cliente final como uma forma de pagamento salva para compras futuras, use o parâmetro [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Para encontrar uma forma de pagamento a ser cobrada, liste as formas de pagamento associadas ao seu cliente. Este exemplo lista cartões, mas você pode listar qualquer [tipo](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) aceito.

> #### 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 Account configurados pelo cliente](https://docs.stripe.com/connect/use-accounts-as-customers.md), em vez de usar objetos [Customer](https://docs.stripe.com/api/customers.md).

#### Accounts v2

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=card
```

#### Clientes v1

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Quando estiver pronto para cobrar seu cliente *fora de sessão* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), use o ID do cliente e o ID do `PaymentMethod` para criar um `PaymentIntent` com o valor e a moeda do pagamento. Defina alguns outros parâmetros para fazer o pagamento fora de sessão:

- Defina [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) como `true` para indicar que o cliente não está no fluxo de checkout durante uma tentativa de pagamento e não pode atender a uma solicitação de autenticação feita por um parceiro, como um emissor de cartão, banco ou outra instituição de pagamento. Se, durante o fluxo de checkout, um parceiro solicitar autenticação, a Stripe solicitará isenções usando informações do cliente de uma transação anterior *on-session* (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). Se as condições para isenção não forem atendidas, o `PaymentIntent` poderá resultar em um erro.
- Defina o valor da propriedade [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) do `PaymentIntent` como verdadeiro, para que a confirmação ocorra imediatamente quando o `PaymentIntent` for criado.
- Defina [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) como o ID do `PaymentMethod`.
- Dependendo de como você representa os clientes em sua integração, defina [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) como o ID da `conta` configurada pelo cliente ou [cliente](https://docs.stripe.com/api.md#create_payment_intent-customer) como o ID do `cliente`.

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

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

## Testar a integração

Use os detalhes de pagamento de teste e a página de redirecionamento de teste para verificar sua integração. Clique nas guias abaixo para ver os detalhes de cada forma de pagamento.

#### Cartões

| Forma de pagamento | Cenário                                                                                                                                                                                                                                                                                                                 | Como testar                                                                                                                                       |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Cartão de crédito  | A configuração do cartão é realizada e nã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 de cartão de crédito `4242 4242 4242 4242` com qualquer validade, CVC e código postal. |
| Cartão de crédito  | O cartão precisa de autenticação para a configuração inicial e depois pode ser utilizado em pagamentos subsequentes.                                                                                                                                                                                                    | Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0025 0000 3155` com qualquer validade, CVC e código postal. |
| Cartão de crédito  | O cartão precisa de autenticação para a configuração inicial e também precisa de autenticação para pagamentos subsequentes.                                                                                                                                                                                             | Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0027 6000 3184` com qualquer validade, CVC e código postal. |
| Cartão de crédito  | O cartão é recusado durante a configuração.                                                                                                                                                                                                                                                                             | Preencha o formulário do cartão de crédito usando o número do cartão de crédito `4000 0000 0000 9995` com qualquer validade, CVC e código postal. |

#### Débito bancário autenticado

| Forma de pagamento     | Cenário                                                                                                                                                             | Como testar                                                                                                                                                          |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact             | Seu cliente configura corretamente uma forma de pagamento de débito automático SEPA para uso futuro usando Bancontact.                                              | Use qualquer nome no formulário do Bancontact e clique em **Autorizar configuração de teste** na página de redirecionamento.                                         |
| Bancontact             | Seu cliente não faz a autenticação na página de redirecionamento do Bancontact.                                                                                     | Use qualquer nome no formulário do Bancontact e clique em **Falhar a configuração de teste** na página de redirecionamento.                                          |
| 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`. Inicialmente, o status do PaymentIntent muda para `processing` e, três 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 de conta `111111113`.                                                                                                          |
| iDEAL                  | Seu cliente configura corretamente uma forma de pagamento de [débito automático SEPA](https://docs.stripe.com/payments/sepa-debit.md) para uso futuro usando iDEAL. | Use qualquer nome e banco no formulário do iDEAL e clique em **Autorizar configuração de teste** na página de redirecionamento.                                      |
| iDEAL                  | Seu cliente não faz a autenticação na página de redirecionamento do iDEAL.                                                                                          | Selecione qualquer banco e use qualquer nome no formulário do iDEAL e clique em **Falhar a configuração de teste** na página de redirecionamento.                    |

#### 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 processing e, três minutos depois, para succeeded. |
| 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`.                                                                                                      |

### Teste a cobrança de um PaymentMethod de débito SEPA

Confirmar o PaymentIntent  usando iDEAL, Bancontact ou Sofort, gera um [débito automático SEPA](https://docs.stripe.com/payments/sepa-debit.md) *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs). O débito automático SEPA é uma forma de pagamento de [notificação posterior](https://docs.stripe.com/payments/payment-methods.md#payment-notification) que muda para um estado de `processing` intermediário antes de mudar vários dias depois para um estado `succeeded` ou `requires_payment_method`.

#### E-mail

Defina `payment_method.billing_details.email` para um dos seguintes valores para testar as transições de status do `PaymentIntent`. Você pode incluir seu próprio texto personalizado no início do endereço de e-mail, seguido por um underline. Por exemplo, `test_1_generatedSepaDebitIntentsFail@example.com` resulta em um PaymentMethod de débito automático SEPA que sempre falha quando usado com um `PaymentIntent`.

| Endereço de e-mail                                                 | Descrição                                                                                                                    |
| ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| `generatedSepaDebitIntentsSucceed@example.com`                     | O status do `PaymentIntent` muda de `processing` para `succeeded`.                                                           |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | O status do `PaymentIntent` passa de `processing` para `succeeded` após pelo menos três minutos.                             |
| `generatedSepaDebitIntentsFail@example.com`                        | O status do `PaymentIntent` muda de `processing` para `requires_payment_method`.                                             |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | O status do `PaymentIntent` passa de `processing` para `requires_payment_method` após pelo menos três minutos.               |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | O status do `PaymentIntent` passa de `processing` para `succeeded`, mas uma contestação é imediatamente criada.              |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | O status do `PaymentIntent` passa de `processing` para `requires_payment_method` com o código de falha `insufficient_funds`. |

#### PaymentMethod

Use estes PaymentMethods para testar as transições de status do `PaymentIntent`. Esses tokens são úteis para testes automatizados, permitindo anexar imediatamente o PaymentMethod ao SetupIntent no servidor.

| Forma de pagamento                                                   | Descrição                                                                                                                    |
| -------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                     | O status do `PaymentIntent` muda de `processing` para `succeeded`.                                                           |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDelayed`              | O status do `PaymentIntent` passa de `processing` para `succeeded` após pelo menos três minutos.                             |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | O status do `PaymentIntent` muda de `processing` para `requires_payment_method`.                                             |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | O status do `PaymentIntent` passa de `processing` para `requires_payment_method` após pelo menos três minutos.               |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | O status do `PaymentIntent` passa de `processing` para `succeeded`, mas uma contestação é imediatamente criada.              |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | O status do `PaymentIntent` passa de `processing` para `requires_payment_method` com o código de falha `insufficient_funds`. |

## See also

- [Salve dados de pagamento durante pagamentos no aplicativo](https://docs.stripe.com/payments/mobile/save-during-payment.md)
- [Salvar dados de pagamento em uma sessão do Checkout](https://docs.stripe.com/payments/checkout/how-checkout-works.md#save-payment-methods)
- [Configurar pagamentos futuros](https://docs.stripe.com/payments/save-and-reuse.md)
- [Handle post-payment events](https://docs.stripe.com/webhooks/handling-payment-events.md)