Crie uma página de checkout personalizada que inclui o Link

Primeiro, crie uma conta Stripe ou entre.

Use nossas bibliotecas oficiais para acessar a API da 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'

A Stripe usa um objeto PaymentIntent para representar sua intenção de coletar o pagamento de um cliente, acompanhando suas tentativas de cobrança e alterações no estado do pagamento durante todo o processo.

Se você coleta dados de cartão para uso futuro com Setup Intents, liste as formas de pagamento manualmente em vez de usar formas de pagamento dinâmicas. Para usar o Link sem formas de pagamento dinâmicas, atualize sua integração para passar link para payment_method_types.

Ao criar uma PaymentIntent, ofereça dinamicamente aos clientes as formas de pagamento mais relevantes, incluindo o Link, usando formas de pagamento dinâmicas. Para usar formas de pagamento dinâmicas, não inclua o parâmetro payment_method_types. Opcionalmente, você também pode habilitar automatic_payment_methods.

Para adicionar o Link à sua integração do Elements usando formas de pagamento dinâmicas:

1. Nas configurações de forma de pagamento do Dashboard, ative o Link.
2. Se você tiver uma integração existente que lista manualmente as formas de pagamento, remova o parâmetro payment_method_types da integração.

Recuperar o segredo do cliente

O PaymentIntent inclui um segredo do cliente que o lado do cliente usa para concluir com segurança o processo de pagamento. Você pode usar abordagens diferentes para enviar a senha do cliente ao lado do cliente.

get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

O Link autentica um cliente usando o endereço de e-mail dele. Dependendo do seu fluxo de checkout, você tem as seguintes opções: passar um e-mail para o Payment Element, coletá-lo diretamente no Payment Element ou usar o Link Authentication Element. A Stripe recomenda passar um endereço de e-mail do cliente para o Payment Element, se disponível.

Passar um e-mail

Coletar um e-mail

Usar o Link Authentication Element

Se algum dos itens a seguir se aplicar a você:

• Você quer usar um componente único e otimizado para coleta de e-mails e autenticação de Link.
• Você precisa coletar um endereço de entrega do cliente.

Em seguida, use o fluxo de integração que implementa esses elementos: Link Authentication Element, Payment Element e Address Element opcional.

Uma página de checkout com o Link habilitado tem o Link Authentication Element no início, seguido pelo Address Element e o Payment Element no final. Também é possível exibir o Link Authentication Element em páginas separadas, nessa mesma ordem, para fluxos de checkout de várias páginas.

Criar um formulário de pagamento usando vários Elements

A integração funciona da seguinte forma:

Agora está tudo pronto para configurar o formulário de pagamento personalizado com os componentes de IU pré-incorporados do Elements. Para que sua integração funcione, o endereço da página de pagamento deve começar com https:// em vez de http://. Você pode testar sua integração sem usar HTTPS. Habilite HTTPS quando estiver pronto para aceitar pagamentos em tempo real.

npm install --save @stripe/react-stripe-js @stripe/stripe-js

import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

<linkAuthenticationElement onChange={(event) => {
  setEmail(event.value.email);
}} />

<linkAuthenticationElement options={{defaultValues: {email: 'foo@bar.com'}}}/>

Use stripe.confirmPayment para concluir o pagamento com os dados coletados do seu cliente nos diferentes formulários do Elements. Forneça um return_url a essa função para indicar para onde Stripe redireciona o usuário após a conclusão do pagamento.

Seu usuário pode ser redirecionado primeiro para um site intermediário, como uma página de autorização bancária, antes de a Stripe redirecioná-lo para o return_url.

Por padrão, pagamentos por cartão e bancos são redirecionados imediatamente para o return_url quando um pagamento é finalizado. Se não quiser redirecionar para o return_url, você pode usar if_required para alterar o comportamento.

import {loadStripe} from "@stripe/stripe-js";
import {
  useStripe,
  useElements,
  Elements,
  LinkAuthenticationElement,
  PaymentElement,
  // If collecting shipping
  AddressElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}

O return_url corresponde a uma página no seu site que informa o status do pagamento do PaymentIntent quando você renderiza a página de retorno. Quando a Stripe redireciona o cliente para o return_url, você pode usar os parâmetros de consulta de URL a seguir para verificar o status do pagamento. Você também pode anexar seus próprios parâmetros de consulta ao fornecer o return_url. Esses parâmetros de consulta permanecem por meio do processo de redirecionamento.

A Stripe envia um evento payment_intent.succeeded quando o pagamento é concluído. Use um webhook para receber esses eventos e executar ações, como enviar um e-mail de confirmação de pedido ao cliente, registrar a venda em um banco de dados ou iniciar um fluxo de trabalho de entrega.

Configure sua integração para escutar esses eventos em vez de aguardar um retorno de chamada do cliente. Quando você aguarda um retorno de chamada do cliente, ele pode fechar a janela do navegador ou sair do aplicativo antes da execução do retorno de chamada. Configurar sua integração para escutar eventos assíncronos permite aceitar diferentes tipos de formas de pagamento com uma única integração.

Além de gerenciar o evento payment_intent.succeeded, você também pode gerenciar dois outros eventos importantes ao coletar pagamentos com o Payment Element:

No momento, o Link só funciona com cartões de crédito, cartões de débito e compras qualificadas de contas bancárias dos EUA. O Link requer registro de domínio.

Você pode criar contas de área restrita para o Link usando qualquer endereço de e-mail válido. A tabela a seguir mostra os valores fixos de senha de uso único que a Stripe aceita para autenticar contas de área restrita:

Para testar formas de pagamento específicas, consulte os exemplos de teste do Element Pagamento.

Várias fontes de fundos

À medida que a Stripe adiciona outras fontes de financiamento, você não precisa atualizar sua integração. A Stripe aceita essas fontes automaticamente com o mesmo tempo de liquidação de fundos da transação e com as mesmas garantias dos pagamentos com cartão e conta bancária.

Autenticação de cartões e 3D Secure

O Link aceita autenticação 3D Secure 2 (3DS2) para pagamentos com cartão. O 3DS2 exige que os clientes realizem uma etapa de verificação adicional com o emissor do cartão ao pagar. Os pagamentos autenticados com êxito por 3D Secure estão cobertos por uma transferência de responsabilidade.

Para acionar os fluxos de desafio de autenticação do 3DS2 com o Link em uma área restrita, use o seguinte cartão de teste com qualquer CVC, código postal e data de validade futura: 4000000000003220

.

Em uma área restrita, o processo de autenticação exibe uma página de autenticação fictícia. Nessa página, você pode autorizar ou cancelar o pagamento. A autorização do pagamento simula a autenticação bem-sucedida e redireciona você para o URL de retorno especificado. Clicar no botão Falha simula um erro na autenticação.

Para obter mais detalhes, consulte a página de autenticação de 3D Secure.