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.

Compatible APIs

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

Checkout Sessions include customer information, shipping, tax, discounts, coupons, and payments integrations, while Payment Intents only handle payments integration.

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.