Stripe Payment Element

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

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.

Esta demonstração só exibe o Google Pay ou Apple Pay se você tiver um cartão ativo com qualquer uma das carteiras.

APIs compatíveis

A Stripe oferece duas APIs de pagamentos compatíveis com o Elements, que oferecem a flexibilidade de aceitar vários tipos de pagamentos dos clientes. Você pode integrar essas APIs às interfaces de pagamento pré-configuradas da Stripe. Recomendamos usar as sessões do Checkout para a maioria dos usuários, mas as APIs servem para casos de uso ligeiramente diferentes, dependendo de como você estruturar o fluxo de checkout e de quanto controle você precisa. Você pode criar uma página de checkout com a API Checkout Session ou criar uma integração avançada com a API Payment Intents.

A API Checkout Sessions permite que você modele o fluxo de checkout do cliente. Isso inclui os itens de linha incluídos nos endereços de compra, cobrança e envio, alíquotas aplicáveis e cupons ou descontos. A sessão do Checkout permite criar assinaturas, calcular alíquotas com o Stripe Tax e iniciar pagamentos.
A API Payment Intents permite modelar a etapa de pagamentos. Ao contrário da API Checkout Sessions, que exige detalhes dos itens de linha, você só passa o valor final que deseja cobrar. Isso é adequado para fluxos de pagamento, como pagamentos fora da sessão. Se quiser usar a Stripe para calcular impostos aplicáveis ou criar assinaturas, você precisa se integrar com a API Stripe Tax ou a API Subscriptions, respectivamente.

As sessões do Checkout incluem integrações de dados do cliente, envio, impostos, descontos, cupons e pagamentos. Já o Payment Intents gerencia apenas a integração de pagamentos.

Criar uma página de checkout com o Payment Element

Crie uma integração com o Payment Element usando a API Checkout Sessions.

Crie uma integração avançada com o Payment Element

Crie uma integração com o Payment Element usando a API Payment Intents.

Clonar um exemplo de aplicativo no GitHub

HTML · React · Vue

Ver a referência do Stripe.js

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.

Observação

Você não pode remover o contrato jurídico do Link porque ele é obrigatório para garantir a conformidade com o conhecimento adequado do usuário sobre os termos de serviços e as políticas de privacidade. O objeto terms não se aplica ao contrato jurídico do Link.

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 do Stripe, você pode usar formas de pagamento personalizadas.a

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: { name: "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.

Erros

O Payment Element mostra automaticamente mensagens de erro localizadas para o cliente durante a confirmação do cliente para os seguintes códigos de erro:

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

Para exibir mensagens para outros tipos de erros, consulte códigos de erro e gerenciamento de erros.