O Payment Element é um componente seguro e integrável da IU que permite aceitar formas de pagamento locais de todo o mundo.
Para ajudar usuários de pagamentos avulsos e recorrentes a aceitar várias formas de pagamento, o Payment Element oferece três caminhos de integração principais:
Pagamentos avulsos com PaymentIntents
O guia de integração se encontra aqui: https://stripe.com/docs/stripe-js/payment-element/accept-a-payment
Pagamentos de assinatura com PaymentIntents
O guia de integração se encontra aqui: https://stripe.com/docs/billing/subscriptions/elements#collect-payment
Pagamentos de assinatura com SetupIntents
O guia de integração se encontra aqui: https://stripe.com/docs/stripe-js/payment-element/set-up-payment
Com o Payment Element, a Stripe lança uma nova geração de Elements (consulte https://stripe.com/payments/elements). Antes do Payment Element, os comerciantes precisavam criar e manter uma integração nova para cada forma de pagamento separada. Como isso não é mais necessário, você pode poupar tempo e recursos significativos utilizando o Payment Element.
Confira alguns dos principais recursos do Payment Element abaixo:
- Compatibilidade com várias formas de pagamento por uma única integração do Elements
- Oferece opções de pagamento relevantes para cada comprador por meio de organização lógica com base na localização no país do cliente (derivada do endereço IP) e do idioma preferencial (derivado da região do navegador)
- Foi traduzido para 42 idiomas: https://stripe.com/docs/js/appendix/supported_locales
- Pode ser estilizado para uma marca de comerciante (fonte, cores, espaçamento etc.)
- É ágil em dispositivos móveis
- Tem validações de entradas integradas
- Está em conformidade com PCI-DSS
- Funciona com PaymentIntents/SetupIntents
O Stripe Elements é um conjunto de componentes pré-integrados da IU, como entradas e botões, para criar seu fluxo de checkout. Para cada forma de pagamento (cartões de crédito, cartões de débito etc.), há um Element associado. O Payment Element é um novo componente que combina Elements de forma de pagamento individuais em um único Element.
Veja abaixo a diferença entre o Stripe Elements e o Payment Element.
Anteriormente, ao usar o Elements, um comerciante precisava criar e manter um mapeamento de moeda/país/forma de pagamento e lógica associada para quando chamar APIs da Stripe no back-end e para mostrar/ocultar o Elements na IU. Para isso, era preciso integrar cada Element um por um.
Com o Payment Element, o comerciante não precisa criar nem manter esses aspectos. A experiência de integração começa a se parecer com uma única integração do Element, e os mapeamentos, a lógica, a apresentação e o comportamento são pré-integrados pela Stripe. O outro lado da moeda é uma personalização ligeiramente menor dentro da camada da IU do que é possível hoje com o Stripe Elements, mas com mais controle do que o Stripe Checkout oferece.
Mais especificamente, as principais diferenças são:
- O Payment Element exige praticamente a mesma quantidade de esforço para ser integrado a outro Element (ex., o Card Element), mas exige muito mais esforço para manter, pois as formas de pagamento podem ser adicionadas sem precisar integrá-lo a outro Element para cada um deles.
- A capacidade de personalizar a estilização é mais limitada em comparação com os Elements atualmente, com apenas o nosso JavaScript estilizando a API aceita (não CSS). No entanto, a maioria das funções de estilização ainda é aceita.
- Como a confirmação no lado do servidor não é aceita, os cartões de crédito precisarão usar webhooks (não é o caso com os Elements hoje). No entanto, aceitaremos um “contorno” a isso nos cartões.
- Um redirecionamento para uma página de confirmação de pedido é necessária para a maioria das formas de pagamento aceitas pelo Payment Element, de modo que os aplicativos para páginas da web devem adicionar uma página separada para confirmação do pedido. No entanto, a experiência do checkout ainda é totalmente integrada dentro do site do comerciante, ao contrário do Stripe Checkout.
O Payment Element é um novo componente da IU que pode ser colocado dentro de um site de comerciante, estilizado e definido com marca para a experiência do comerciante. Ele permite que você ofereça várias formas de pagamento (mais de 18, e esse número está aumentando) com muito menos esforço, coletando de maneira automática as informações necessárias dos clientes, exceto o endereço de entrega. O Payment Element usa as APIs de pagamento da Stripe (PaymentIntents/SetupIntents) para funcionar e é criado a partir do nosso SDK, Stripe.js. Esse produto é criado para comerciantes que desejam ter controle sobre a experiência de pagamento oferecida. Mais especificamente, se você deseja integrar pagamentos totalmente dentro do nosso aplicativo (isto é, fluxos de várias etapas, consciência de marca, necessidade elevada de controle, apresentação de termos especiais no checkout), o Payment Element é o produto ideal para você. O Payment Element permite que você colete as informações necessárias durante o checkout e crie a experiência que deseja.
Por outro lado, o Stripe Checkout é a nossa página de pagamento totalmente hospedada que também permite oferecer facilmente formas de pagamento locais (mais de 25) para as quais o seu site seria redirecionado, mas vem com opções limitadas de estilização (cor/logotipo). O Stripe Checkout usa Sessões do Checkout para funcionar e não usa Payment Intent/Setup Intent. É criado para casos de uso mais simples, isto é, fluxo de etapa única com menos necessidade de controle/personalização/marca. O Stripe Checkout oferece e coleta mais informações, inclusive endereços de entrega, além de mostrar uma lista de produtos/total de pedidos e um botão de envio, o que o Payment Element não faz.
O Payment Element exige praticamente o mesmo esforço para ser integrado como um único Element (ex.: o Card Element), mas precisa de menos esforço de manutenção. Quando você quiser oferecer outras formas de pagamento, não precisará integrar um Element para cada opção.
O Payment Element não tem custos adicionais para os usuários. Os únicos custos associados são aqueles de cada forma de pagamento aceita (consulte https://stripe.com/pricing/local-payment-methods).
O Payment Element é aceito pela PaymentIntents e pela SetupIntents. Outras APIs legadas, como Charges e Sources, não são aceitas.
Sim, você precisa usar webhooks com o Payment Element, porque a confirmação no lado do servidor não é aceita.
No entanto, podemos aceitar um contorno a isso nas formas de pagamento que não exigem redirecionamentos, como cartões. O código que mostra como fazer isso se encontra aqui: https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect
Se você quer usar o Payment Element para oferecer todas as formas de pagamento aceitas pela Stripe, pode passar uma matriz de formas de pagamento para payment_method_types quando criar um PaymentIntent. No entanto, você pode passar todas as formas de pagamento aceitas ao mesmo tempo, porque algumas formas de pagamento exigem moedas diferentes. Você só pode criar um PaymentIntent com formas de pagamento que aceitam a mesma moeda. Consulte a forma de pagamento e a tabela de compatibilidade de produtos aqui: https://stripe.com/docs/payments/payment-methods/integration-options.
O Payment Element para dispositivos móveis, ou a classe Payment Sheet no código, é um componente pré-integrado e seguro da IU que exibe várias formas de pagamento de todo o mundo (cartões, carteiras, débitos bancários, redirecionamentos bancários, BNPL etc.). É similar ao Payment Element na web, mas para usar em aplicativos móveis. A interface de pagamento se apresenta como “bottom sheet” (similar a Apple/Google Pay) e é integrada ao SDK para dispositivos móveis da Stripe. Esse produto ajuda os comerciantes da Stripe a aumentar a conversão e reduzir o custo dos pagamentos, além de contribuir para os objetivos da empresa da Stripe relativos à adoção de forma de pagamento sem cartão. Para obter mais informações, confira: https://stripe.com/docs/payments/accept-a-payment?platform=ios