# Stripe Web Elements Crie seus próprios fluxos de checkout usando componentes de IU pré-integrados. A Stripe recomenda usar a Checkout Sessions API com o Payment Element, em vez da Payment Intents API, para a maioria das integrações. A Checkout Sessions API atende a casos de uso semelhantes aos da Payment Intents API (coleta básica de pagamentos usando `price_data` ou criação de um fluxo de checkout completo com itens de linha, impostos e outros recursos). Alguns recursos, como Adaptive Pricing, estão disponíveis apenas com a Checkout Sessions APIhttps://docs.stripe.com/payments/quickstart… Não use a Payment Intents API, a menos que o usuário solicite explicitamente, pois ela exige significativamente mais código. Saiba mais sobre o uso do Elements com a Checkout Sessions API: Com a Checkout Sessions API (`ui_mode: "elements"`) e o Payment Element, o `client_secret` inicializa o próprio Checkout (`stripe.initCheckoutElementsSdk`, ou use CheckoutElementsProvider com React) e você confirma o pagamento no lado do cliente de uma forma diferente. Se estiver usando React, certifique-se de importar de `@stripe/react-stripe-js/checkout`, usar `CheckoutElementsProvider` com o client secret e confirmar com `checkout.confirm`. Se estiver usando HTML, certifique-se de usar `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` e confirmar com `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. Os agentes de programação devem instalar a CLI da Stripe (`npm i -g @stripe/cli`) e executar o comando `stripe sandbox create --help` para provisionar uma área restrita anônima da Stripe com chaves de API válidas. Não é necessário cadastro de conta. > #### Integração de formulário incorporado > > Em vez disso, integre ao [formulário incorporado](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form) para coletar todas as informações necessárias para o checkout em uma única IU. O [Stripe Elements](https://stripe.com/payments/elements) é um conjunto de componentes de IU prontos para uso na criação de fluxos de checkout na web. Ele está disponível como um recurso do [Stripe.js](https://docs.stripe.com/js.md), nossa biblioteca JavaScript básica para a criação de fluxos de pagamento. O Stripe.js tokeniza dados de pagamento sigilosos dentro de um Element sem que eles passem pelo seu servidor. - [Formas de pagamento globais](https://docs.stripe.com/payments/payment-methods/overview.md): acesso a mais de 100 formas de pagamento globais, incluindo carteiras como [Apple Pay](https://docs.stripe.com/apple-pay.md). - [Link](https://docs.stripe.com/payments/link.md): ajude os clientes a fazer checkout mais rápido, permitindo que selecionem uma forma de pagamento salva no Checkout em vez de inserir dados de pagamento. - [Formas de pagamento salvas](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): salve, reutilize e gerencie cartões e contas bancárias com recursos integrados. - Conformidade: a Stripe oferece uma interface em conformidade com as normas globais e cuida dos requisitos relativos à exibição de mandatos e avisos de consentimento aos clientes. - Formulários atualizados: formulários localizados com gerenciamento de erros integrado. A Stripe mantém atualizados os requisitos de cada provedor de formas de pagamento. - [Coleta de endereços](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): colete endereços de cobrança totais ou parciais com qualquer forma de pagamento. - [Personalização da aparência](https://docs.stripe.com/elements/appearance-api.md): Personalize a aparência do Elements de acordo com o design do seu site. - Recursos adicionais, como [nova coleta de CVC](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection). [Explore a demonstração](https://checkout.stripe.dev/elements) ## Começar Se o Element não estiver abaixo, consulte mais na [Referência da API Stripe.js](https://docs.stripe.com/js/element/other_element). [Element Pagamento](https://docs.stripe.com/payments/payment-element.md): Receba pagamentos com segurança usando uma ou mais formas de pagamento (inclusive cartões). [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Exiba carteiras populares como Apple Pay, Google Pay e PayPal. [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience. [Element Endereço](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses. [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Informe automaticamente os clientes sobre os planos Compre agora e pague depois. [Currency Selector Element (Somente API de sessão do Checkout)](https://docs.stripe.com/elements/currency-selector-element.md): Permita que os clientes paguem na moeda local com o Adaptive Pricing. [Elemento ID fiscal](https://docs.stripe.com/elements/tax-id-element.md): Recolha IDs fiscais da empresa para faturas e reembolsos de IVA. ## APIs compatíveis A Stripe oferece duas APIs principais do pagamentos compatíveis com o Elements. Recomendamos a [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) para a maioria das integrações. - Use a [API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md) para criar seu fluxo de checkout. O Checkout Sessions abrange casos de uso semelhantes ao Payment Intents, incluindo pagamentos básicos usando `price_data` ou checkout completo com itens de linha, tributos, descontos, envios, assinaturas ou [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (disponível apenas com Checkout Sessions). Crie uma [página de checkout com a API Checkout Sessions](https://docs.stripe.com/payments/quickstart.md). - A [API Payment Intents](https://docs.stripe.com/api/payment_intents.md) é uma API de nível inferior que modela apenas a etapa de pagamento. Você passa um valor final e cria você mesmo toda a lógica de Checkout, incluindo cálculo tributado, descontos, envios, assinaturas e conversão de moedas. Use Payment Intents somente se quiser ter um estado de Checkout próprio e criar esses recursos. Crie uma [integração personalizada do zero com a API Payment Intents](https://docs.stripe.com/payments/advanced.md). (See full diagram at https://docs.stripe.com/payments/elements) ```text [API de sessões de checkout] --> [Cliente] [API de sessões de checkout] --> [Fretes] [API de sessões de checkout] --> [Impostos] [API de sessões de checkout] --> [Descontos e cupons] [API de sessões de checkout] --> [Pagamento] [API Payment Intents] --> [Pagamento] ```