# Salvar um cartão sem autenticação do banco

Colete os dados do cartão e faça a cobrança do cliente mais tarde.

A Stripe permite que você colete detalhes dos cartões e cobre o cliente posteriormente. Em algumas regiões, os bancos exigem uma segunda forma de autenticação, como a inserção de um código enviado para o celular. Essa etapa adicional diminui a conversão quando o cliente não está usando o site ou aplicativo, porque ele não está disponível para autenticar a compra.

​​Se você concentra seus negócios nos EUA e Canadá, os bancos não exigem autenticação, então você pode seguir esta integração mais simples. Esta integração não estará em conformidade em países que exigem autenticação para salvar cartões (por exemplo, Índia). Portanto, criar essa integração significa que a expansão para outros países ou a adição de outras formas de pagamento exigirá mudanças significativas. Saiba como [salvar cartões que exigem autenticação](https://docs.stripe.com/payments/save-and-reuse.md).

> #### Conformidade
> 
> Você é responsável por sua conformidade com todas as leis, regulamentos e regras de rede aplicáveis ao salvar os dados de pagamento de um cliente. Por exemplo, se você quiser salvar a forma de pagamento para uso futuro, como cobrar quando não estiver usando seu site ou aplicativo. Adicione termos ao seu site ou aplicativo que definam como você planeja salvar os dados da forma de pagamento e permitir que os clientes aceitem. Se quiser cobrar deles quando estiverem offline, verifique se seus termos incluem o seguinte:
> 
> - A concordância do cliente para que você inicie um pagamento ou uma série de pagamentos em nome dele 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.
> 
> Não se esqueça de manter um registro por escrito da concordância do cliente com esses termos.

## Coletar dados do cartão [Do lado do cliente]

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

Crie uma página de checkout para coletar os detalhes dos cartões de seus clientes. Use o [Stripe Elements](https://docs.stripe.com/payments/elements.md), uma biblioteca de IU que ajuda você a gerar formulários de pagamento personalizados. Para começar a usar o Elements, inclua a biblioteca Stripe.js com o script a seguir na sua página de checkout.

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

Sempre carregue o Stripe.js diretamente de js.stripe.com para manter a conformidade com PCI. Não insira o script em um pacote nem hospede sua própria cópia.

Para aproveitar melhor a funcionalidade [avançada de prevenção a fraudes](https://docs.stripe.com/radar.md) da Stripe, inclua este script em todas as páginas do seu site e não apenas na página de checkout. A inclusão do script [permite que a Stripe detecte comportamentos](https://docs.stripe.com/disputes/prevention/advanced-fraud-detection.md) suspeitos que possam indicar fraude enquanto os usuários navegam pelo seu site.

### Adicione o Elements à sua página

Para coletar com segurança dados dos cartões dos clientes, o Stripe Elements cria componentes de IU hospedados pela Stripe. Os componentes são colocados no seu formulário de pagamentos, de forma que você não precisa criá-los diretamente. Para estabelecer onde os componentes serão inseridos, crie elementos DOM vazios (contêineres) com IDs exclusivos no formulário de pagamento.

```html
<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>
```

Em seguida, crie uma instância do [objeto Stripe](https://docs.stripe.com/js.md#stripe-function), fornecendo sua [chave de API](https://docs.stripe.com/keys.md) publicável como o primeiro parâmetro. Depois, crie uma instância do [objeto Elements](https://docs.stripe.com/js.md#stripe-elements) e use-a para montar um elemento `card` no DOM.

O elemento `card` simplifica o formulário de pagamento e minimiza o número de campos obrigatórios, inserindo um campo de entrada flexível que coleta com segurança todos os dados necessários do cartão.

Do contrário, combine os Elements `cardNumber`, `cardExpiry` e `cardCvc` para criar um formulário de cartão flexível, com vários campos.

> Sempre colete um código postal para aumentar as taxas de aceitação de cartão e reduzir fraudes.
> 
> O [Card Element de uma única linha](https://docs.stripe.com/js/element/other_element?type=card) coleta e envia automaticamente o código postal do cliente à Stripe. Se você criar um formulário de pagamento com Elements divididos ([Card Number](https://docs.stripe.com/js/element/other_element?type=cardNumber), [Expiry](https://docs.stripe.com/js/element/other_element?type=cardExpiry), [CVC](https://docs.stripe.com/js/element/other_element?type=cardCvc)), adicione um campo de entrada separado para o código postal do cliente.

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

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
```

Um Stripe Element contém um iframe que envia com segurança os dados de pagamento para a Stripe por uma conexão HTTPS. O endereço da página de checkout também deve iniciar com `https://`, e não `http://`, para que sua integração funcione.

Você pode testar sua integração sem usar HTTPS. [Habilite-o](https://docs.stripe.com/security/guide.md#tls) quando estiver pronto para aceitar pagamentos no modo de produção.

```javascript
const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});
```

Envie o ID do *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) resultante ao seu servidor.

## Configurar a Stripe [Lado do servidor]

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

## Salvar o cartão [Lado do servidor]

Salve o cartão anexando o PaymentMethod 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). Você pode usar o objeto `Customer` para armazenar outras informações sobre o cliente, como detalhes de envio e e-mail.

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d payment_method={{PAYMENT_METHOD_ID}}
```

Se você já tem um cliente, pode anexar o PaymentMethod ao objeto.

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

Nesse momento, associe o ID do cliente e o ID da forma de pagamento à sua representação interna de um cliente, se houver.

## Cobrar o cartão salvo [Lado do servidor]

Quando estiver tudo pronto, recupere os IDs do PaymentMethod e do Customer para realizar a cobrança. Você pode fazer isso armazenando os IDs de ambos no seu banco de dados ou usando o ID do Customer para consultar todos os PaymentMethods disponíveis do cliente.

#### Accounts v2

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

#### Customers v1

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

Use o ID do PaymentMethod e o ID do Customer para criar um novo PaymentIntent. Defina [error_on_requires_action](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-error_on_requires_action) como `true` para recusar pagamentos que exijam qualquer ação do cliente, como autenticação de dois fatores.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true
```

Quando uma tentativa de pagamento falha, a solicitação também falha com um código de status HTTP 402 e um erro da Stripe. É preciso notificar o cliente para que ele acesse novamente seu aplicativo (enviando um e-mail, por exemplo) para finalizar o pagamento. Verifique o código do [Erro](https://docs.stripe.com/api/errors/handling.md) indicado pela biblioteca da API da Stripe ou confira o [last_payment_error.decline_code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-decline_code) do PaymentIntent para entender por que o emissor do cartão recusou o pagamento.

## Gerenciar erros do cartão

Notifique o cliente de que o pagamento falhou e direcione-o ao formulário de pagamento criado na etapa 1, onde ele pode inserir novos dados do cartão. Envie o novo ID do PaymentMethod ao seu servidor para [anexá-lo](https://docs.stripe.com/api/payment_methods/attach.md) ao objeto Customer e realizar o pagamento novamente.

Alternativamente, você pode criar um PaymentIntent e salvar um cartão em uma única chamada da API, caso já tenha criado um Customer.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]=card" \
  -d "customer={{CUSTOMER_ID}}" \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session
```

Definir [setup_future_usage](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-setup_future_usage) como `on_session` indica à Stripe que você deseja salvar o cartão para uso posterior, sem acionar autenticação desnecessária.

## Testar a integração

A Stripe oferece [cartões de teste](https://docs.stripe.com/testing.md) que você pode usar em uma área restrita para simular o comportamento de diferentes cartões. Utilize esses cartões com qualquer CVC, código postal e data de validade futura.

| Número           | Descrição                                                                                    |
| ---------------- | -------------------------------------------------------------------------------------------- |
| 4242424242424242 | Finaliza e processa o pagamento imediatamente.                                               |
| 4000000000009995 | Sempre falha, com o código de recusa `insufficient_funds`.                                   |
| 4000002500003155 | Requer autenticação, que nesta integração é recusada com o código `authentication_required`. |

## Optional: Coletar novamente um CVC

Ao criar pagamentos subsequentes em um cartão salvo, você pode coletar novamente o CVC do cartão como uma medida de fraude adicional para verificar o usuário.

Comece criando um PaymentIntent a partir do seu servidor com o valor e a moeda do pagamento e defina o [Customer](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer) como o ID do seu cliente. Em seguida, [liste](https://docs.stripe.com/api/payment_methods/list.md) os PaymentMethods associados ao seu cliente para determinar quais PaymentMethods devem ser exibidos ao usuário para a nova coleta do CVC.

Depois de passar o segredo do cliente do PaymentIntent para o navegador, você está pronto para coletar novamente os dados do CVC com o Stripe Elements no seu cliente. Use o Element `cardCvc` para coletar novamente um valor de CVC do usuário e confirme o pagamento do cliente usando [stripe.confirmCardPayment](https://docs.stripe.com/js.md#stripe-confirm-card-payment). Defina `payment_method` como ID do PaymentMethod e `payment_method_options[card][cvc]` como seu Element `cardCvc`.

```javascript
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}
```

O pagamento pode ser aprovado mesmo que o CVC inserido esteja incorreto. Para que isso não aconteça, configure suas [regras do Radar](https://docs.stripe.com/radar/rules.md#traditional-bank-checks) para bloquear pagamentos com falha na verificação do CVC.

## Atualize sua integração para aceitar autenticação de cartões

Essa integração *recusa cartões que exigem autenticação durante o pagamento*. Se você começar a ver vários pagamentos no Dashboard listados como `Failed`, é hora de [atualizar sua integração](https://docs.stripe.com/payments/payment-intents/upgrade-to-handle-actions.md). A integração global da Stripe processa esses pagamentos em vez de recusá-los automaticamente.