Aceite pagamentos de meses sin intereses

Saiba como aceitar pagamentos com cartão de crédito usando meses sin intereses em vários produtos da Stripe.

As parcelas (meses sin intereses) são um recurso dos cartões de crédito para consumidores no México que permite aos clientes dividir compras em várias faturas. Você recebe o pagamento como se fosse uma cobrança avulsa normal, com as tarifas deduzidas, e o banco do cliente gerencia a cobrança dos valores ao longo do tempo.

Algumas restrições se aplicam a quais transações e cartões podem usar parcelas. Revise os requisitos de compatibilidade.

A aceitação de um pagamento parcelado incorre em uma tarifa adicional à tarifa padrão de transação com cartão de crédito.

Você pode habilitar as parcelas em vários produtos da Stripe. Escolha abaixo as instruções correspondentes à sua implementação.

Integrar com a API Payment Intents

Você pode aceitar parcelas usando a API Payment Intents. Nesse caso, você precisa coletar dados do pagamento e do plano de parcelamento no cliente e concluir o pagamento no servidor.

Coletar dados da forma de pagamento no cliente
Acessar planos de parcelamento no servidor
Selecionar um plano de parcelamento no cliente
Confirme o PaymentIntent no servidor

Coletar dados da forma de pagamento no cliente

A API Payment Intents funciona com Stripe.js & Elements para coletar com segurança dados de pagamento (por exemplo, dados de cartão de crédito) no lado do cliente. Para começar a usar o Elements, inclua o script a seguir em suas páginas. Este script sempre deve ser carregado diretamente de js.stripe.com para manter a conformidade com PCI. Não é possível incluí-lo em um pacote ou hospedar uma cópia.

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

Para coletar com segurança dados dos cartões dos clientes, o Elements cria componentes de IU hospedados pela Stripe para você e os coloca no seu formulário de pagamento, em vez de você criá-los diretamente. Para determinar onde os componentes serão inseridos, crie elementos DOM vazios (contêineres) com IDs únicos no formulário de pagamento.

index.html
<div id="details">
  <input id="cardholder-name" type="text" placeholder="Cardholder name">
  <!-- placeholder for Elements -->
  <form id="payment-form">
    <div id="card-element"></div>
    <button id="card-button">Next</button>
  </form>
</div>

Em seguida, crie uma instância do objeto Stripe, fornecendo sua chave API publicável como o primeiro parâmetro e crie uma instância do objeto Elements. Use o objeto recém-criado para montar um elemento Card no espaço reservado correspondente da página.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

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

Por último, use stripe.createPaymentMethod no cliente para obter os dados do cartão e criar um PaymentMethod quando o usuário clicar no botão “Enviar”.

client.js
const cardholderName = document.getElementById('cardholder-name');
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (ev) => {
  ev.preventDefault();
  const {paymentMethod, error} = await stripe.createPaymentMethod(
    'card',
    cardElement,
    {billing_details: {name: cardholderName.value}},
  );
  if (error) {
    // Show error in payment form
  } else {
    // Send paymentMethod.id to your server (see Step 2)
    const response = await fetch('/collect_details', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({payment_method_id: paymentMethod.id}),
    });

    const json = await response.json();

    // Handle server response (see Step 3)
    handleInstallmentPlans(json);
  }
});

Recuperar planos de parcelamento no servidor

Para recuperar os planos de parcelamento disponíveis, configure um endpoint no seu servidor para receber a solicitação.

Criar novo PaymentIntent com o ID do PaymentMethod criado no cliente. Defina payment_method_options.card.installments.enabled=true para permitir que este pagamento use parcelas. Envie os planos disponíveis ao cliente para que ele escolha o plano a ser usado no pagamento.

Observação

Aqui, não confirme o PaymentIntent (ou seja, não defina a propriedade confirm) porque ainda não sabemos se o usuário quer pagar em parcelas.

O objeto PaymentIntent lista os planos de parcelamento disponíveis para o PaymentMethod em payment_method_options.card.installments.available_plans.

{
  "id": "pi_1FKDPTJXdud1yP2PpUXNgq0V",
  "object": "payment_intent",
  "amount": 3099,
...
  "payment_method_options": {
    "card": {
      "installments": {
        "enabled": true,
        "plan": null,
        "available_plans": [
          {
            "count": 3,
            "interval": "month",
            "type": "fixed_count"
          },

Selecionar um plano de parcelamento no cliente

Permita que o cliente selecione o plano de parcelamento que deseja usar.

index.html
<div id="plans" hidden>
  <form id="installment-plan-form" >
    <label><input id="immediate-plan" type="radio" name="installment_plan" value="-1" />Immediate</label>
    <input id="payment-intent-id" type="hidden" />
  </form>
  <button id="confirm-button">Confirm Payment</button>
</div>

<div id="result" hidden>
  <p id="status-message"></p>
</div>

client.js
const selectPlanForm = document.getElementById('installment-plan-form');
let availablePlans = [];

const handleInstallmentPlans = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else {
    // Store the payment intent ID.
    document.getElementById('payment-intent-id').value = response.intent_id;
    availablePlans = response.available_plans;

    // Show available installment options
    availablePlans.forEach((plan, idx) => {
      const newInput = document.getElementById('immediate-plan').cloneNode();
      newInput.setAttribute('value', idx);
      newInput.setAttribute('id', '');
      const label = document.createElement('label');
      label.appendChild(newInput);
      label.appendChild(
        document.createTextNode(`${plan.count} ${plan.interval}s`),
      );

      selectPlanForm.appendChild(label);
    });

    document.getElementById('details').hidden = true;
    document.getElementById('plans').hidden = false;
  }
};

Envie o plano selecionado ao seu servidor.

client.js
const confirmButton = document.getElementById('confirm-button');

confirmButton.addEventListener('click', async (ev) => {
  const selectedPlanIdx = selectPlanForm.installment_plan.value;
  const selectedPlan = availablePlans[selectedPlanIdx];
  const intentId = document.getElementById('payment-intent-id').value;
  const response = await fetch('/confirm_payment', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      payment_intent_id: intentId,
      selected_plan: selectedPlan,
    }),
  });

  const responseJson = await response.json();

  // Show success / error response.
  document.getElementById('plans').hidden = true;
  document.getElementById('result').hidden = false;

  var message;
  if (responseJson.status === "succeeded" && selectedPlan !== undefined) {
    message = `Success! You made a charge with this plan:${
      selectedPlan.count
    } ${selectedPlan.interval}`;
  } else if (responseJson.status === "succeeded") {
    message = "Success! You paid immediately!";
  } else {
    message = "Uh oh! Something went wrong";
  }

  document.getElementById("status-message").innerText = message;
});

Confirme o PaymentIntent no servidor

Usando outro endpoint de servidor, confirme o PaymentIntent para finalizar o pagamento e executar o pedido.

A resposta do servidor indicará que você selecionou o plano no PaymentIntent e também na cobrança resultante.

{
  "id": "pi_1FKDPFJXdud1yP2PMSXLlPbg",
  "object": "payment_intent",
  "amount": 3099,
...
  "charges": {
    "data": [
      {
        "id": "ch_1FKDPHJXdud1yP2P2u79mcIX",
        "object": "charge",
        "amount": 3099,
        "payment_method_details": {
          "card": {
            "installments": {
              "plan": {
                "count": 3,
                "interval": "month",
                "type": "fixed_count"
              }
            },

Remover manualmente o plano parcelado

Depois que um plano de parcelamento é definido em um PaymentIntent, ele permanece até que você o remova.

Por exemplo, considere o caso em que o cartão de um cliente é recusado ao tentar pagar com parcelas no primeiro cartão e o segundo cartão inserido pelo cliente não aceita parcelamento. A confirmação do PaymentIntent falha porque as parcelas não são aceitas pelo cartão.

É necessário cancelar explicitamente a definição de payment_method_options[card][installments][plan] ao confirmar o PaymentIntent novamente para indicar a ausência de um plano parcelado.

Configurações personalizadas

Você pode personalizar a configuração das parcelas usando a página de configurações de formas de pagamento do Stripe Dashboard.

Você pode encontrar a opção para ativar ou desativar o parcelamento na página de configurações de formas de pagamento. Essa configuração permite habilitar parcelas para formas de pagamento sem programação, incluindo Payment Links e Checkout.

Separadamente, na página de configurações de formas de pagamento, você também pode configurar os planos mensais específicos que deseja oferecer e os valores de transação mínimos e máximos para cada plano. Essas configurações de plano se aplicam a todas as suas integrações de parcelas existentes.

Testar a integração

Você pode usar os cartões abaixo para testar a integração:

Número	Descrição
	Planos de parcelamento disponíveis: 3, 6, 9, 12, 18 e 24 meses
	Nenhum plano de parcelamento disponível.