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/basil/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. Definido como off_session para que a Stripe informe que você pretende usar este PaymentMethod para pagamentos fora da sessão, sem a presença do cliente. Esta configuração salva o PaymentMethod no Customer depois da confirmação do PaymentIntent e de todas as outras ações obrigatórias para o usuário. Veja o exemplo de código de salvar cartões depois de um pagamento para saber mais.

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.