Aceitar um pagamento usando Stripe Elements e a API ChargesAPI Charges

Receba pagamentos online de clientes dos EUA e do Canadá.

API herdada

The content of this section refers to a Legacy feature. Use the Payment Intents API instead.

A API Charges não aceita os seguintes recursos, muitos deles obrigatórios para a conformidade com cartões de crédito:

Use os Stripe Elements, nossos componentes de IU pré-configurados, para criar um formulário de pagamento que permita coletar com segurança os dados do cartão do cliente, sem manipular dados confidenciais. Os dados do cartão serão convertidos em um token que você pode enviar com segurança para seus servidores. O servidor usa esse token para criar uma cobrança.

Configurar a Stripe

Primeiro, você precisa de uma conta Stripe. Cadastre-se aqui.

Use nossas bibliotecas oficiais para acessar a API da Stripe no seu aplicativo:

Criar seu formulário de pagamento
Lado do cliente

Para coletar com segurança dados dos cartões dos clientes, o Stripe Elements cria componentes de IU para você hospedados pela Stripe. Eles são colocados no seu formulário de pagamento, em vez de você criá-los diretamente.

Configurar o Stripe Elements

Para disponibilizar Elements em sua página, acrescente este tag de script ao head de sua página em HTML:

payment.html
<script src="https://js.stripe.com/v3/"></script>

O script deve ser sempre carregado diretamente de https://js.stripe.com.

Crie uma instância do Elements com o seguinte JavaScript em sua página de pagamento:

client.js
// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Depois de carregar o Elements, você pode criar um contêiner DOM vazio com ID exclusivo dentro de seu formulário de pagamentos, sempre que quiser que o Elements acrescente seu campo de entrada. Recomendamos colocar o contêiner dentro de um <label> ou ao lado de um <label> com atributo for correspondente ao id exclusivo do contêiner de Elements. Dessa forma, o Element entra em foco automaticamente quando o cliente clica na etiqueta correspondente.

Por exemplo:

payment.html
<form action="/charge" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display Element errors. -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

Quando o formulário acima for carregado, crie uma instância de um Element card e monte-a no contêiner do Element criado acima:

client.js
// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

O elemento cardsimplifica o formulário e minimiza o número de campos necessários, inserindo o único 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.

Observação

Sempre colete um código postal para aumentar as taxas de aceitação de cartão e reduzir fraudes.

The single line Card Element automatically collects and sends the customer’s postal code to Stripe. If you build your payment form with split Elements (Card Number, Expiry, CVC), add a separate input field for the customer’s postal code.

Consulte nossa documentação de referência sobre Stripe.js para ver a lista completa de tipos de Elements compatíveis.

Criar um token
Lado do cliente

Acrescente um ouvinte de eventos para quando o cliente enviar os dados do cartão e use stripe.createToken(card) para criar um token com esses dados.

client.js
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

createToken também aceita um segundo parâmetro opcional com outros dados do cartão enviados pelo cliente, que não são usados neste exemplo. A função retorna uma Promise que é resolvida com um objeto result. O objeto pode mostrar:

result.token: um token foi criado.
result.error: houve um erro. Estão incluídos erros de validação do lado do cliente. Consulte a referência da API para conhecer todos os erros possíveis.

Se o objeto contiver result.token, encaminhe-o ao seu servidor. Do contrário, mostre um erro para o cliente.

Enviar o token ao seu servidor
Lado do cliente

Envie o token ao seu servidor, além de quaisquer outros dados coletados:

client.js
const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}

Criar uma cobrança com o token
Lado do servidor

Depois que o cliente publicar o token no seu servidor, use-o para criar uma cobrança. No seu servidor, pegue o token da Stripe nos parâmetros POST enviados por seu formulário. Então, bastante uma chamada de API para cobrar o cartão:

A resposta à criação da cobrança será uma cobrança ou um erro com um código de erro. Se a resposta for bem-sucedida, execute o pedido do cliente e mostre uma página de finalização. Se não, mostre uma página de erro.

Testar sua integração

Se você conseguir inserir corretamente um cartão de teste no seu formulário HTML, envie-o ao servidor e avalie se o servidor criou a cobrança. Se der certo, isso significa que a integração foi finalizada.

Parabéns! Você finalizou uma integração básica de pagamentos com a API Charges. Essa API não permite ampliar os negócios para fora dos EUA e do Canadá, mas também oferecemos opções de pagamentos mais robustas e globais com a API Payment Intents.

Veja também

Conheça melhor o Elements e aprenda a salvar cartões com a API Charges.