Stripe Payment Element

Aceite formas de pagamento de todo o mundo com um componente de IU seguro e incorporável.

Você tem interesse em usar o Stripe Tax, descontos, envio ou conversão de moedas?

Estamos desenvolvendo uma integração do Payment Element que gerencia impostos, descontos, envio e conversão de moedas. Leia o guia Criação de uma página de checkout para saber mais.

O Payment Element é um componente de IU para a web que aceita mais de 40 formas de pagamento, valida entradas e gerencia erros. Use-o sozinho ou com outros elementos no frontend do seu aplicativo da web.

Para ver como o Link funciona para um usuário recorrente, digite o e-mail demo@stripe.com. Para ver como o Link funciona durante um novo cadastro, insira qualquer outro e-mail e preencha o restante do formulário.

Para testar o Payment Element por si mesmo, comece com um destes exemplos:

Início rápido

Código e instruções para aceitar um pagamento usando o Payment Element.

Clonar um exemplo de aplicativo no GitHub

HTML · React · Vue

Ver a referência do Stripe.js

Criar um Payment Element

Este código cria um Payment Element e o monta no DOM:

index.js
Visualizar exemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({clientSecret
, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

Aceitar pagamentos com o Payment Element requer código de backend adicional. Consulte o início rápido ou o exemplo de aplicativo para saber como isso funciona.

Combinar elementos

O Payment Element interopera com outros elementos. Por exemplo, este formulário usa um elemento adicional para preencher automaticamente os dados de checkout e outro para coletar o endereço de envio.

Um formulário com dados de contato, endereço de envio e campos de pagamento. Os dados de contato são rotulados como Link Authentication Element, o endereço de envio é rotulado como Address Element e os campos do pagamento são rotulados Pagamento Element.

Para obter o código completo deste exemplo, consulte Adicionar o Link a uma integração do Elements.

Também é possível combinar o Payment Element com o Express Checkout Element. Neste caso, formas de pagamento de carteira, como Apple Pay e Google Pay, são exibidas somente no Express Checkout Element para evitar duplicidade.

Formas de pagamento

A Stripe habilita determinadas formas de pagamento para você por padrão. Também podemos habilitar formas de pagamento adicionais após notificar você. Use o Dashboard para habilitar ou desabilitar formas de pagamento a qualquer momento. Com o Payment Element, você pode usar formas de pagamento dinâmicas para:

Gerencie formas de pagamento no Dashboard sem programar
Exiba dinamicamente as opções de pagamento mais relevantes com base em fatores como localização, moeda e valor da transação

Por exemplo, se um cliente na Alemanha estiver pagando em EUR, ele verá todas as formas de pagamento ativas que aceitam EUR, começando pelas mais usadas na Alemanha.

Mostre as formas de pagamento em ordem de relevância para o cliente

Para personalizar ainda mais o processamento de formas de pagamento, como filtrar bandeiras de cartão que você não deseja aceitar, consulte Personalizar formas de pagamento. Para adicionar formas de pagamento integradas fora da Stripe, consulte Formas de pagamento externas.

Se sua integração exigir que você liste formas de pagamento manualmente, consulte Lista manualmente de formas de pagamento.

Layout

Você pode personalizar o layout do Payment Element para se adequar ao seu fluxo de checkout. A imagem a seguir é o mesmo Payment Element processado usando diferentes configurações de layout.

Exemplos dos três formulários de checkout. A imagem mostra a opção de guia, onde os clientes escolhem entre as formas de pagamento exibidas como guias ou as duas opções tipo sanfona, onde as formas de pagamento são listadas verticalmente. É possível escolher a exibição botões de seleção ou não na visualização tipo sanfona.

Payment Element com diferentes layouts.

O layout das guias exibe as formas de pagamento horizontalmente usando guias. Para usar esse layout, defina o valor de layout.type como tabs. Você também pode especificar outras propriedades, como layout.defaultCollapsed.

index.js
Visualizar exemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Aparência

Use a API Appearance para controlar o estilo de todos os elementos. Escolha um tema ou atualize detalhes específicos.

Exemplos de modos claro e escuro para o formulário de checkout do Payment Element.

Por exemplo, escolha o tema “plano” e sobreponha a cor principal do texto.

index.js
Visualizar exemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Consulte a documentação da API Appearance para obter uma lista completa de temas e variáveis.

Opções

Os elementos da Stripe aceitam mais opções do que essas. Por exemplo, exiba o nome da sua empresa usando a opção business.

index.js
Visualizar exemplo completo
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

O Payment Element aceita as seguintes opções. Veja a referência de cada opção para obter mais informações.

layout	Layout para o Payment Element.
defaultValues	Dados iniciais do cliente a serem exibidos no Payment Element.
business	Informações sobre sua empresa a serem exibidas no Payment Element.
paymentMethodOrder	Ordem para listar formas de pagamento.
campos	Exibir ou não determinados campos.
readOnly	Se os detalhes do pagamento podem ser alterados.
terms	Se mandatos ou outros contratos legais forem exibidos no Payment Element. O comportamento padrão é mostrá-los somente quando necessário.
wallets	Mostrar ou não carteiras como Apple Pay ou Google Pay. O padrão é mostrá-los quando possível.