Aceite pagamentos com cartão sem webhooks

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

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

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Obtenha os dados do cartão do cliente com o Stripe.js e o Stripe Elements. O Elements é um conjunto de componentes de IU pré-configurados para coleta e validação de número de cartão, código postal e data de validade.

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 quando estiver pronto para aceitar pagamentos no modo de produção.

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

<form id='payment-form'>
  <label>
    Card details
    <!-- placeholder for Elements -->
    <div id="card-element"></div>
  </label>
  <button type="submit">Submit Payment</button>
</form>

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();
// Set up Stripe.js and Elements to use in checkout form
const style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  },
};
const cardElement = elements.create('card', {style});
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      // Include any additional collected billing details.
      name: 'Jenny Rosen',
    },
  })
  stripePaymentMethodHandler(result);
});

Se o PaymentMethod for criado corretamente, envie o ID dele para o seu servidor.

const stripePaymentMethodHandler = async (result) => {
  if (result.error) {
    // Show error in payment form
  } else {
    // Otherwise send paymentMethod.id to your server (see Step 4)
    const res = await fetch('/pay', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        payment_method_id: result.paymentMethod.id,
      }),
    })
    const paymentResponse = await res.json();
    // Handle server response (see Step 4)
    handleServerResponse(paymentResponse);
  }
}

Configure um endpoint no seu servidor para receber a solicitação. Esse endpoint também será usado mais à frente, para gerenciar cartões que exijam mais uma etapa de autenticação.

Crie um novo PaymentIntent com o ID do PaymentMethod criado no cliente. Você pode confirmar o PaymentIntent definindo a propriedade confirm como verdadeira quando o PaymentIntent for criado ou invocando confirm após a criação. Também permitimos autorização e captura separadas para pagamentos com cartão.

Se o pagamento exigir ações adicionais, como autenticação do 3D Secure, o status do PaymentIntent será definido como requires_action. Se o pagamento falhar, o status será definido novamente como requires_payment_method e você deverá mostrar um erro ao usuário. Se o pagamento não exigir autenticação adicional, uma cobrança será criada e o status do PaymentIntent será definido como succeeded.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Para salvar o cartão e poder reutilizá-lo depois, crie um Customer para armazenar o PaymentMethod e insira os seguintes parâmetros ao criar o PaymentIntent:

• cliente. Configurado com o ID do Cliente.
• setup_future_usage. Set to off_session to tell Stripe that you plan to reuse this PaymentMethod for off-session payments when your customer isn’t present. Setting this property saves the PaymentMethod to the Customer after the PaymentIntent is confirmed and any required actions from the user are complete. See the code sample on saving cards after a payment for more details.

Programe o gerenciamento de situações em que o cliente precisa intervir. Um pagamento normalmente é finalizado após a confirmação no servidor, na etapa 4. No entanto, se o PaymentIntent exigir mais alguma ação do cliente, como autenticação com 3D Secure, este código é acionado.

Use stripe.handleCardAction para acionar a IU para gerenciar a ação do cliente. Se a autenticação for bem-sucedida, o status do PaymentIntent será requires_confirmation. Confirme o PaymentIntent novamente no servidor para finalizar o pagamento.

Durante os testes, use um número de cartão para testes com autenticação obrigatória (por exemplo, 4000002760003184

) para testar esse fluxo. Se você usar um cartão que não exige autenticação (por exemplo, 4242424242424242

), esta parte do fluxo será ignorada, e ela será concluída na etapa 4.

const handleServerResponse = async (response) => {
  if (response.error) {
    // Show error from server on payment form
  } else if (response.requires_action) {
    // Use Stripe.js to handle the required card action
    const { error: errorAction, paymentIntent } =
      await stripe.handleCardAction(response.payment_intent_client_secret);
    if (errorAction) {
      // Show error from Stripe.js in payment form
    } else {
      // The card action has been handled
      // The PaymentIntent can be confirmed again on the server
      const serverResponse = await fetch('/pay', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ payment_intent_id: paymentIntent.id })
      });
      handleServerResponse(await serverResponse.json());
    }
  } else {
    // Show success message
  }
}

Esse código só é executado quando um pagamento exige autenticação adicional, assim como no gerenciamento da etapa anterior. O código em si não é opcional, porque qualquer pagamento pode exigir essa etapa extra.

Com o mesmo endpoint que você configurou acima, confirme o PaymentIntent mais uma vez para finalizar o pagamento e executar o pedido. Esta confirmação precisa acontecer no máximo uma hora após a tentativa de pagamento. Do contrário, o pagamento falha e volta ao status requires_payment_method.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Vários cartões de teste estão disponíveis para você usar em uma área restrita para assegurar que essa integração esteja pronta. Use-os com qualquer CVC e uma data de validade no futuro.

Veja a lista completa de cartões de teste em nosso guia de testes.