{"id":63663,"date":"2023-12-02T05:33:55","date_gmt":"2023-12-02T08:33:55","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=63663&preview=true&preview_id=63663"},"modified":"2023-12-06T08:59:26","modified_gmt":"2023-12-06T11:59:26","slug":"stripe-java-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/stripe-java-api\/","title":{"rendered":"Guia para Integra\u00e7\u00e3o do Stripe no Spring Boot"},"content":{"rendered":"

Com o aumento das transa\u00e7\u00f5es digitais, a capacidade de integrar perfeitamente os gateways de pagamento se tornou uma habilidade essencial para os desenvolvedores. Seja para marketplaces ou produtos SaaS<\/a>, um processador de pagamentos \u00e9 crucial para coletar e processar os pagamentos dos usu\u00e1rios.<\/p>\n

Este artigo explica como integrar o Stripe<\/a> em um ambiente Spring Boot<\/a>, como configurar assinaturas, oferecer testes gratuitos e criar p\u00e1ginas de autoatendimento para que seus clientes fa\u00e7am download das faturas de pagamento.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

O que \u00e9 o Stripe?<\/h2>\n

O Stripe<\/a> \u00e9 uma plataforma de processamento de pagamentos reconhecida mundialmente e dispon\u00edvel em 46 pa\u00edses<\/a>. \u00c9 uma \u00f3tima op\u00e7\u00e3o se voc\u00ea quiser criar uma integra\u00e7\u00e3o de pagamento em seu aplicativo web devido ao seu grande alcance, \u00f3tima reputa\u00e7\u00e3o e documenta\u00e7\u00e3o detalhada.<\/p>\n

Entendendo os conceitos comuns do Stripe<\/h3>\n

\u00c9 \u00fatil entender alguns conceitos comuns que o Stripe usa para coordenar e realizar opera\u00e7\u00f5es de pagamento entre v\u00e1rias partes. O Stripe oferece duas abordagens para voc\u00ea implementar a integra\u00e7\u00e3o de pagamentos em seu aplicativo.<\/p>\n

Voc\u00ea pode incorporar os formul\u00e1rios do Stripe no seu aplicativo para uma experi\u00eancia de cliente dentro do aplicativo (Payment Intent<\/a>) ou redirecionar os clientes para uma p\u00e1gina de pagamento hospedada pelo Stripe, onde o Stripe gerencia o processo e informa ao seu aplicativo quando um pagamento \u00e9 bem-sucedido ou n\u00e3o (Payment Link<\/a>).<\/p>\n

Payment Intent (inten\u00e7\u00e3o de pagamento)<\/h4>\n

Ao lidar com pagamentos, \u00e9 importante reunir os detalhes do cliente e do produto antecipadamente, antes de solicitar as informa\u00e7\u00f5es do cart\u00e3o e o pagamento. Esses detalhes incluem a descri\u00e7\u00e3o, o valor total, a forma de pagamento e muito mais.<\/p>\n

O Stripe requer que voc\u00ea colete esses detalhes no seu aplicativo e gere um objeto PaymentIntent<\/code> no backend. Essa abordagem permite que o Stripe formule uma solicita\u00e7\u00e3o de pagamento para essa inten\u00e7\u00e3o. Ap\u00f3s a conclus\u00e3o do pagamento, voc\u00ea pode recuperar consistentemente os detalhes do pagamento, inclusive sua finalidade, por meio do objeto PaymentIntent<\/code>.<\/p>\n

Payment Links (links de pagamento)<\/h4>\n

Para evitar as complexidades de integrar o Stripe diretamente \u00e0 sua base de c\u00f3digo, considere utilizar o Stripe Checkouts<\/a> para uma solu\u00e7\u00e3o de pagamento hospedada. Assim como na cria\u00e7\u00e3o de um PaymentIntent<\/code>, voc\u00ea criar\u00e1 um CheckoutSession<\/code> com detalhes do pagamento e do cliente. Em vez de iniciar um PaymentIntent<\/code> no aplicativo, o CheckoutSession<\/code> gera um link de pagamento para o qual voc\u00ea redireciona seus clientes. Esta \u00e9 a apar\u00eancia de uma p\u00e1gina de pagamento hospedada:<\/p>\n

\"A
A p\u00e1gina de checkout hospedada pelo Stripe.<\/figcaption><\/figure>\n

Ap\u00f3s o pagamento, o Stripe redireciona de volta para o seu aplicativo, permitindo tarefas p\u00f3s-pagamento, como confirma\u00e7\u00f5es e solicita\u00e7\u00f5es de entrega. Para maior confiabilidade, configure um webhook de backend para atualizar o Stripe, garantindo a reten\u00e7\u00e3o dos dados de pagamento mesmo que os clientes fechem acidentalmente a p\u00e1gina ap\u00f3s o pagamento.<\/p>\n

Embora eficaz, esse m\u00e9todo carece de flexibilidade de personaliza\u00e7\u00e3o e design. Tamb\u00e9m pode ser dif\u00edcil configur\u00e1-lo corretamente para aplicativos para dispositivos m\u00f3veis, em que uma integra\u00e7\u00e3o nativa pareceria muito mais perfeita.<\/p>\n

Chaves de API<\/h4>\n

Ao trabalhar com a API do Stripe, voc\u00ea precisar\u00e1 de acesso \u00e0s chaves de API para que seus aplicativos cliente e servidor interajam com o backend do Stripe. Voc\u00ea pode acessar suas chaves de API do Stripe no seu painel de desenvolvedor do Stripe<\/a>. Veja como ficaria:<\/p>\n

\"O
O painel do Stripe mostrando as chaves de API.<\/figcaption><\/figure>\n

Como funcionam os pagamentos no Stripe?<\/h3>\n

Para entender como funcionam os pagamentos no Stripe, voc\u00ea precisa entender todas as partes interessadas envolvidas. Quatro participantes est\u00e3o envolvidos em cada transa\u00e7\u00e3o de pagamento:<\/p>\n

    \n
  1. Cliente (comprador)<\/strong>: A pessoa que pretende pagar por um servi\u00e7o\/produto.<\/li>\n
  2. Comerciante<\/strong>: Voc\u00ea, o propriet\u00e1rio da empresa, \u00e9 respons\u00e1vel por receber pagamentos e vender servi\u00e7os\/produtos.<\/li>\n
  3. Adquirente<\/strong>: Um banco que processa pagamentos em seu nome (do comerciante) e encaminha sua solicita\u00e7\u00e3o de pagamento para o banco dos seus clientes. Os adquirentes podem fazer parcerias com terceiros para ajudar a processar os pagamentos.<\/li>\n
  4. Banco emissor<\/strong>: O banco que concede cr\u00e9dito e emite cart\u00f5es e outros m\u00e9todos de pagamento para os consumidores.<\/li>\n<\/ol>\n

    Aqui est\u00e1 um fluxo de pagamento t\u00edpico entre essas partes interessadas em um n\u00edvel muito alto.<\/p>\n

    \"Como
    Como funcionam os pagamentos on-line.<\/figcaption><\/figure>\n

    O cliente informa ao comerciante que est\u00e1 disposto a pagar. Ent\u00e3o o comerciante encaminha os detalhes relacionados ao pagamento para o banco adquirente, que coleta o pagamento do banco emissor do cliente e informa ao comerciante que o pagamento foi bem-sucedido.<\/p>\n

    Essa \u00e9 uma vis\u00e3o geral de alt\u00edssimo n\u00edvel do processo de pagamento. Como comerciante, voc\u00ea s\u00f3 precisa se preocupar em coletar a inten\u00e7\u00e3o de pagamento, pass\u00e1-la para o processador de pagamento e lidar com o resultado do pagamento. Entretanto, conforme discutido anteriormente, h\u00e1 duas maneiras de fazer isso.<\/p>\n

    Ao criar uma sess\u00e3o de checkout gerenciada pelo Stripe, na qual o Stripe cuida da coleta dos detalhes do pagamento, o fluxo t\u00edpico fica assim:<\/p>\n

    \"O
    O fluxo de trabalho de pagamento no checkout hospedado pelo Stripe. (Fonte: Stripe Docs<\/a>).<\/figcaption><\/figure>\n

    Com os fluxos de pagamento personalizados, a decis\u00e3o \u00e9 realmente sua. Voc\u00ea pode projetar a intera\u00e7\u00e3o entre cliente e servidor, o comprador e a API do Stripe com base nas necessidades do seu aplicativo. Voc\u00ea pode adicionar a esse fluxo de trabalho a coleta de endere\u00e7o, gera\u00e7\u00e3o de fatura, cancelamento, avalia\u00e7\u00f5es gratuitas, etc., conforme necess\u00e1rio.<\/p>\n

    Agora que voc\u00ea entende como funcionam os pagamentos do Stripe, est\u00e1 pronto para come\u00e7ar a cri\u00e1-lo em seu aplicativo Java.<\/p>\n

    Integra\u00e7\u00e3o do Stripe no aplicativo Spring Boot<\/h2>\n

    Para iniciar a integra\u00e7\u00e3o com o Stripe, voc\u00ea deve criar um aplicativo de frontend para interagir com o backend Java e iniciar os pagamentos. Neste tutorial, voc\u00ea criar\u00e1 um aplicativo React para acionar v\u00e1rios tipos de pagamentos e assinaturas, de modo a obter uma compreens\u00e3o clara dos seus mecanismos.<\/p>\n

    Observa\u00e7\u00e3o<\/strong>: este tutorial n\u00e3o abordar\u00e1 a cria\u00e7\u00e3o de um site de eCommerce completo; o objetivo principal \u00e9 orient\u00e1-lo no simples processo de integra\u00e7\u00e3o do Stripe ao Spring Boot.<\/p>\n

    Configurando os projetos de frontend e backend<\/h3>\n

    Crie um novo diret\u00f3rio e estruture um projeto React usando o Vite, executando o seguinte comando:<\/p>\n

    npm create vite@latest<\/code><\/pre>\n
    Defina o nome do projeto como frontend<\/strong> (ou outro nome, se preferir), o framework como React<\/strong> e a variante como TypeScript<\/strong>. Navegue at\u00e9 o diret\u00f3rio do projeto e instale o Chakra UI para a r\u00e1pida estrutura\u00e7\u00e3o de elementos de interface de usu\u00e1rio executando o seguinte comando:<\/p>\n
    npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion @chakra-ui\/icons<\/code><\/pre>\n
    Voc\u00ea tamb\u00e9m instalar\u00e1 o react-router-dom<\/code> em seu projeto para roteamento no lado do cliente executando o comando abaixo:<\/p>\n
    npm i react-router-dom<\/code><\/pre>\n
    Agora voc\u00ea est\u00e1 pronto para come\u00e7ar a criar seu aplicativo de frontend. Esta \u00e9 a p\u00e1gina inicial que voc\u00ea vai criar.<\/p>\n
    \"A
    A p\u00e1gina inicial conclu\u00edda do aplicativo frontend.<\/figcaption><\/figure>\n
    Ao clicar em qualquer bot\u00e3o dessa p\u00e1gina, voc\u00ea ser\u00e1 levado a p\u00e1ginas de checkout separadas com formul\u00e1rios de pagamento. Para come\u00e7ar, crie uma nova pasta chamada routes<\/strong> em seu diret\u00f3rio frontend\/src<\/strong>. Dentro dessa pasta, crie um arquivo Home.tsx<\/strong>. Esse arquivo conter\u00e1 o c\u00f3digo do caminho inicial do seu aplicativo (\/<\/code>). Cole o seguinte c\u00f3digo no arquivo:<\/p>\n
    import {Button, Center, Heading, VStack} from \"@chakra-ui\/react\";\n\nimport { useNavigate } from \"react-router-dom\";\n\nfunction Home() {\n    const navigate = useNavigate()\n    const navigateToIntegratedCheckout = () => {\n        navigate(\"\/integrated-checkout\")\n    }\n\n    const navigateToHostedCheckout = () => {\n        navigate(\"\/hosted-checkout\")\n    }\n\n    const navigateToNewSubscription = () => {\n        navigate(\"\/new-subscription\")\n    }\n\n    const navigateToCancelSubscription = () => {\n        navigate(\"\/cancel-subscription\")\n    }\n\n    const navigateToSubscriptionWithTrial = () => {\n        navigate(\"\/subscription-with-trial\")\n    }\n\n    const navigateToViewInvoices = () => {\n        navigate(\"\/view-invoices\")\n    }\n\n    return (\n        <>\n            <Center h={'100vh'} color='black'>\n                <VStack spacing='24px'>\n                    <Heading>Stripe Payments With React & Java<\/Heading>\n                    <Button\n                        colorScheme={'teal'}\n                        onClick={navigateToIntegratedCheckout}>\n                        Integrated Checkout\n                    <\/Button>\n                    <Button\n                        colorScheme={'blue'}\n                        onClick={navigateToHostedCheckout}>\n                        Hosted Checkout\n                    <\/Button>\n                    <Button\n                        colorScheme={'yellow'}\n                        onClick={navigateToNewSubscription}>\n                        New Subscription\n                    <\/Button>\n                    <Button\n                        colorScheme={'purple'}\n                        onClick={navigateToCancelSubscription}>\n                        Cancel Subscription\n                    <\/Button>\n                    <Button\n                        colorScheme={'facebook'}\n                        onClick={navigateToSubscriptionWithTrial}>\n                        Subscription With Trial\n                    <\/Button>\n                    <Button\n                        colorScheme={'pink'}\n                        onClick={navigateToViewInvoices}>\n                        View Invoices\n                    <\/Button>\n                <\/VStack>\n            <\/Center>\n        <\/>\n    )\n}\n\nexport default Home<\/code><\/pre>\n
    Para ativar a navega\u00e7\u00e3o em seu aplicativo, atualize o arquivo App.tsx<\/strong> para configurar a classe RouteProvider<\/code> de react-router-dom<\/code>.<\/p>\n
    import Home from \".\/routes\/Home.tsx\";\nimport {\n    createBrowserRouter,\n    RouterProvider,\n} from \"react-router-dom\";\n\nfunction App() {\n\n    const router = createBrowserRouter([\n        {\n            path: \"\/\",\n            element: (\n                <Home\/>\n            ),\n        },\n    ]);\n\n  return (\n    <RouterProvider router={router}\/>\n  )\n}\n\nexport default App<\/code><\/pre>\n
    Execute o comando npm run dev<\/code> para visualizar seu aplicativo em https:\/\/localhost:5173<\/a>.<\/p>\n
    Isso conclui a configura\u00e7\u00e3o inicial necess\u00e1ria para o aplicativo de frontend. Em seguida, crie um aplicativo de backend usando o Spring Boot. Para inicializar o aplicativo, voc\u00ea pode usar o site spring initializr<\/a> (se o seu IDE oferecer suporte \u00e0 cria\u00e7\u00e3o de aplicativos Spring, voc\u00ea n\u00e3o precisar\u00e1 usar o site).<\/p>\n
    O IntelliJ IDEA oferece suporte \u00e0 cria\u00e7\u00e3o de aplicativos Spring Boot. Comece escolhendo a op\u00e7\u00e3o New Project <\/strong>no IntelliJ IDEA. Em seguida, escolha Spring Initializr<\/strong> no painel esquerdo. Insira os detalhes do seu projeto de backend: Name (backend<\/strong>), Location (o diret\u00f3rio stripe-payments-java<\/strong>), Language (Java<\/strong>), e Type (Maven<\/strong>). Para os nomes de Group e Artifact, use com.kinsta.stripe-java<\/strong> e backend,<\/strong> respectivamente.<\/p>\n
    \"A
    A caixa de di\u00e1logo do novo projeto IDEA.<\/figcaption><\/figure>\n
    .<\/p>\n
    Clique no bot\u00e3o Next<\/strong>. Da\u00ed adicione depend\u00eancias ao seu projeto escolhendo Spring Web<\/strong> no menu suspenso Web<\/strong> no painel de depend\u00eancias, e clique no bot\u00e3o Create<\/strong>.<\/p>\n
    \"Escolhendo
    Escolhendo as depend\u00eancias.<\/figcaption><\/figure>\n
    Isso criar\u00e1 o projeto Java e o abrir\u00e1 em seu IDE. Agora voc\u00ea pode prosseguir com a cria\u00e7\u00e3o dos v\u00e1rios fluxos de checkout usando o Stripe.<\/p>\n
    Aceitando pagamentos on-line para compras de produtos<\/h2>\n
    A funcionalidade mais importante e amplamente utilizada do Stripe \u00e9 aceitar pagamentos \u00fanicos de clientes. Nesta se\u00e7\u00e3o, voc\u00ea aprender\u00e1 duas maneiras de integrar o processamento de pagamentos no seu aplicativo com o Stripe.<\/p>\n
    Checkout hospedado<\/h3>\n
    Primeiro, voc\u00ea cria uma p\u00e1gina de checkout que aciona um fluxo de trabalho de pagamento hospedado em que voc\u00ea s\u00f3 aciona um pagamento a partir do seu aplicativo frontend. O Stripe ent\u00e3o se encarrega de coletar os detalhes do cart\u00e3o do cliente e o pagamento, compartilhando apenas o resultado da opera\u00e7\u00e3o de pagamento no final.<\/p>\n
    Esta \u00e9 a apar\u00eancia da p\u00e1gina de checkout:<\/p>\n
    \"A
    A p\u00e1gina conclu\u00edda do checkout hospedado.<\/figcaption><\/figure>\n
    Essa p\u00e1gina tem tr\u00eas componentes principais: CartItem<\/code> \u2014 representa cada item no carrinho; TotalFooter<\/code> \u2014 exibe o valor total; CustomerDetails<\/code> \u2014 coleta os detalhes do cliente. Voc\u00ea pode reutilizar esses componentes para criar formul\u00e1rios de checkout para outros cen\u00e1rios neste artigo, tais como checkout integrado e assinaturas.<\/p>\n
    Cria\u00e7\u00e3o do frontend<\/h4>\n
    Crie uma pasta components<\/strong> em seu diret\u00f3rio frontend\/src<\/strong>. Na pasta components<\/strong>, crie um novo arquivo CartItem.tsx<\/strong> e cole o c\u00f3digo a seguir:<\/p>\n
    import {Button, Card, CardBody, CardFooter, Heading, Image, Stack, Text, VStack} from \"@chakra-ui\/react\";\n\nfunction CartItem(props: CartItemProps) {\n    return <Card direction={{base: 'column', sm: 'row'}}\n                 overflow='hidden'\n                 width={'xl'}\n                 variant='outline'>\n        <Image\n            objectFit='cover'\n            maxW={{base: '100%', sm: '200px'}}\n            src={props.data.image}\n        \/>\n        <Stack mt='6' spacing='3'>\n            <CardBody>\n                <VStack spacing={'3'} alignItems={\"flex-start\"}>\n                    <Heading size='md'>{props.data.name}<\/Heading>\n                    <VStack spacing={'1'} alignItems={\"flex-start\"}>\n                        <Text>\n                            {props.data.description}\n                        <\/Text>\n                        {(props.mode === \"checkout\" ? <Text>\n                            {\"Quantity: \" + props.data.quantity}\n                        <\/Text> : <><\/>)}\n                    <\/VStack>\n                <\/VStack>\n            <\/CardBody>\n\n            <CardFooter>\n                <VStack alignItems={'flex-start'}>\n                    <Text color='blue.600' fontSize='2xl'>\n                        {\"$\" + props.data.price}\n                    <\/Text>\n                <\/VStack>\n            <\/CardFooter>\n        <\/Stack>\n    <\/Card>\n}\n\nexport interface ItemData {\n    name: string\n    price: number\n    quantity: number\n    image: string\n    description: string\n    id: string\n}\n\ninterface CartItemProps {\n    data: ItemData\n    mode: \"subscription\" | \"checkout\"\n    onCancelled?: () => void\n}\n\nexport default CartItem<\/code><\/pre>\n
    O c\u00f3digo acima define duas interfaces a serem usadas como tipos para as propriedades passadas para o componente. O tipo ItemData<\/code> \u00e9 exportado para ser reutilizado em outros componentes.<\/p>\n
    O c\u00f3digo retorna o layout de um componente de item de carrinho. Ele utiliza as propriedades fornecidas para renderizar o item na tela.<\/p>\n
    Em seguida, crie um arquivo TotalFooter.tsx<\/strong> no diret\u00f3rio components<\/strong> e cole o seguinte c\u00f3digo:<\/p>\n
    import {Divider, HStack, Text} from \"@chakra-ui\/react\";\n\nfunction TotalFooter(props: TotalFooterProps) {\n    return <>\n        <Divider \/>\n        <HStack>\n            <Text>Total<\/Text>\n            <Text color='blue.600' fontSize='2xl'>\n                {\"$\" + props.total}\n            <\/Text>\n        <\/HStack>\n        {props.mode === \"subscription\" &&\n            <Text fontSize={\"xs\"}>(Monthly, starting today)<\/Text>\n        }\n        {props.mode === \"trial\" &&\n            <Text fontSize={\"xs\"}>(Monthly, starting next month)<\/Text>\n        }\n    <\/>\n}\n\ninterface TotalFooterProps {\n    total: number\n    mode: \"checkout\" | \"subscription\" | \"trial\"\n}\n\nexport default TotalFooter\n<\/code><\/pre>\n
    O componente TotalFooter<\/code> exibe o valor total do carrinho e usa o valor mode<\/code> para renderizar condicionalmente<\/a> um texto espec\u00edfico.<\/p>\n
    Por fim, crie o componente CustomerDetails.tsx<\/code> e cole o seguinte c\u00f3digo:<\/p>\n
    import {ItemData} from \".\/CartItem.tsx\";\nimport {Button, Input, VStack} from \"@chakra-ui\/react\";\nimport {useState} from \"react\";\n\nfunction CustomerDetails(props: CustomerDetailsProp) {\n    const [name, setName] = useState(\"\")\n    const [email, setEmail] = useState(\"\")\n    const onCustomerNameChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        setName(ev.target.value)\n    }\n\n\n\n    const onCustomerEmailChange = (ev: React.ChangeEvent<HTMLInputElement>) => {\n        setEmail(ev.target.value)\n    }\n\n    const initiatePayment = () => {\n        fetch(process.env.VITE_SERVER_BASE_URL + props.endpoint, {\n            method: \"POST\",\n            headers: {'Content-Type': 'application\/json'},\n            body: JSON.stringify({\n                items: props.data.map(elem => ({name: elem.name, id: elem.id})),\n                customerName: name,\n                customerEmail: email,\n            })\n        })\n            .then(r => r.text())\n            .then(r => {\n                window.location.href = r\n            })\n\n    }\n\n    return <>\n        <VStack spacing={3} width={'xl'}>\n            <Input variant='filled' placeholder='Customer Name' onChange={onCustomerNameChange} value={name}\/>\n            <Input variant='filled' placeholder='Customer Email' onChange={onCustomerEmailChange} value={email}\/>\n            <Button onClick={initiatePayment} colorScheme={'green'}>Checkout<\/Button>\n        <\/VStack>\n    <\/>\n}\n\ninterface CustomerDetailsProp {\n    data: ItemData[]\n    endpoint: string\n}\n\nexport default CustomerDetails\n<\/code><\/pre>\n
    O c\u00f3digo acima exibe um formul\u00e1rio com dois campos de entrada \u2014 para coletar o nome e o e-mail do usu\u00e1rio. Quando o bot\u00e3o Checkout<\/strong> \u00e9 clicado, o m\u00e9todo initiatePayment<\/code> \u00e9 chamado para enviar a solicita\u00e7\u00e3o de checkout para o backend.<\/p>\n
    Ele solicita o endpoint que voc\u00ea passou para o componente e envia as informa\u00e7\u00f5es do cliente e os itens do carrinho como parte da solicita\u00e7\u00e3o e, em seguida, redireciona o usu\u00e1rio para a URL recebida do servidor. Essa URL levar\u00e1 o usu\u00e1rio a uma p\u00e1gina de checkout hospedada no servidor do Stripe. Voc\u00ea ver\u00e1 como criar essa URL logo mais.<\/p>\n
    Observa\u00e7\u00e3o:<\/strong> esse componente usa a vari\u00e1vel de ambiente VITE_SERVER_BASE_URL<\/code> para a URL do servidor backend. Defina-a criando um arquivo .env<\/strong> na raiz do seu projeto:<\/p>\n
    VITE_SERVER_BASE_URL=http:\/\/localhost:8080<\/a><\/code><\/pre>\n
    Todos os componentes foram criados. Agora vamos prosseguir para construir o caminho do checkout hospedado usando os componentes. Para fazer isso, crie um novo arquivo HostedCheckout.tsx<\/strong> na pasta routes<\/strong>\u00a0com o seguinte c\u00f3digo:<\/p>\n
    import {Center, Heading, VStack} from \"@chakra-ui\/react\";\nimport {useState} from \"react\";\nimport CartItem, {ItemData} from \"..\/components\/CartItem.tsx\";\nimport TotalFooter from \"..\/components\/TotalFooter.tsx\";\nimport CustomerDetails from \"..\/components\/CustomerDetails.tsx\";\nimport {Products} from '..\/data.ts'\n\nfunction HostedCheckout() {\n    const [items] = useState<ItemData[]>(Products)\n    return <>\n        <Center h={'100vh'} color='black'>\n            <VStack spacing='24px'>\n                <Heading>Hosted Checkout Example<\/Heading>\n                {items.map(elem => {\n                    return <CartItem data={elem} mode={'checkout'}\/>\n                })}\n                <TotalFooter total={30} mode={\"checkout\"}\/>\n                <CustomerDetails data={items} endpoint={\"\/checkout\/hosted\"} mode={\"checkout\"}\/>\n            <\/VStack>\n        <\/Center>\n    <\/>\n}\n\nexport default HostedCheckout\n<\/code><\/pre>\n
    Esse caminho utiliza os tr\u00eas componentes que voc\u00ea acabou de criar para montar uma tela de checkout. Todos os modos do componente est\u00e3o configurados como checkout<\/strong>, e o endpoint \/checkout\/hosted<\/code> \u00e9 fornecido ao componente de formul\u00e1rio para iniciar a solicita\u00e7\u00e3o de checkout com precis\u00e3o.<\/p>\n
    O componente usa um objeto Products<\/code> para preencher o array de itens. Em cen\u00e1rios reais, esses dados v\u00eam da API do carrinho, que cont\u00e9m os itens selecionados pelo usu\u00e1rio. No entanto, para este tutorial, uma lista est\u00e1tica de um script preenche o array. Defina o array criando um arquivo data.ts<\/strong> na raiz do seu projeto de frontend e armazenando o seguinte c\u00f3digo nele:<\/p>\n
    import {ItemData} from \".\/components\/CartItem.tsx\";\n\nexport const Products: ItemData[] = [\n    {\n        description: \"Premium Shoes\",\n        image: \"https:\/\/source.unsplash.com\/NUoPWImmjCU\",\n        name: \"Puma Shoes\",\n        price: 20,\n        quantity: 1,\n        id: \"shoe\"\n    },\n    {\n        description: \"Comfortable everyday slippers\",\n        image: \"https:\/\/source.unsplash.com\/K_gIPI791Jo\",\n        name: \"Nike Sliders\",\n        price: 10,\n        quantity: 1,\n        id: \"slippers\"\n    },\n]\n<\/code><\/pre>\n
    Esse arquivo define dois itens no array de produtos que s\u00e3o renderizados no carrinho. Voc\u00ea pode ajustar os valores dos produtos.<\/p>\n
    Como \u00faltima etapa da cria\u00e7\u00e3o do frontend, crie duas novas rotas para lidar com o sucesso e o fracasso. A p\u00e1gina de checkout hospedada pelo Stripe redirecionar\u00e1 os usu\u00e1rios para o seu aplicativo nessas duas rotas com base no resultado da transa\u00e7\u00e3o. O Stripe tamb\u00e9m fornecer\u00e1 \u00e0s suas rotas um payload relacionado \u00e0 transa\u00e7\u00e3o, como o ID da sess\u00e3o de checkout, que voc\u00ea pode usar para recuperar o objeto da sess\u00e3o de checkout correspondente<\/a> e acessar dados relacionados ao checkout, como o m\u00e9todo de pagamento, detalhes da fatura, etc.<\/p>\n
    Para fazer isso, crie um arquivo Success.tsx<\/strong> no diret\u00f3rio src\/routes<\/strong> e salve o seguinte c\u00f3digo nele:<\/p>\n
    import {Button, Center, Heading, Text, VStack} from \"@chakra-ui\/react\";\nimport {useNavigate} from \"react-router-dom\";\n\nfunction Success() {\n    const queryParams = new URLSearchParams(window.location.search)\n    const navigate = useNavigate()\n    const onButtonClick = () => {\n        navigate(\"\/\")\n    }\n    return <Center h={'100vh'} color='green'>\n        <VStack spacing={3}>\n            <Heading fontSize={'4xl'}>Success!<\/Heading>\n            <Text color={'black'}>{queryParams.toString().split(\"&\").join(\"n\")}<\/Text>\n            <Button onClick={onButtonClick} colorScheme={'green'}>Go Home<\/Button>\n        <\/VStack>\n    <\/Center>\n}\n\nexport default Success\n<\/code><\/pre>\n
    Ap\u00f3s a renderiza\u00e7\u00e3o, esse componente mostra a mensagem “Success!” e imprime na tela todos os par\u00e2metros de consulta de URL. Ele tamb\u00e9m inclui um bot\u00e3o para redirecionar os usu\u00e1rios para a p\u00e1gina inicial do aplicativo.<\/p>\n
    Ao criar aplicativos do mundo real, essa p\u00e1gina \u00e9 onde voc\u00ea lidaria com transa\u00e7\u00f5es n\u00e3o cr\u00edticas do lado do aplicativo que dependem do sucesso da transa\u00e7\u00e3o em quest\u00e3o. Por exemplo, se voc\u00ea estiver criando uma p\u00e1gina de checkout para uma loja on-line, poder\u00e1 usar essa p\u00e1gina para mostrar uma confirma\u00e7\u00e3o ao usu\u00e1rio e um prazo de entrega estimado dos produtos comprados.<\/p>\n
    Em seguida, crie um arquivo Failure.tsx<\/strong> com o seguinte c\u00f3digo:<\/p>\n
    import {Button, Center, Heading, Text, VStack} from \"@chakra-ui\/react\";\nimport {useNavigate} from \"react-router-dom\";\n\nfunction Failure() {\n    const queryParams = new URLSearchParams(window.location.search)\n    const navigate = useNavigate()\n    const onButtonClick = () => {\n        navigate(\"\/\")\n    }\n\n    return <Center h={'100vh'} color='red'>\n        <VStack spacing={3}>\n            <Heading fontSize={'4xl'}>Failure!<\/Heading>\n            <Text color={'black'}>{queryParams.toString().split(\"&\").join(\"n\")}<\/Text>\n            <Button onClick={onButtonClick} colorScheme={'red'}>Try Again<\/Button>\n        <\/VStack>\n    <\/Center>\n}\n\nexport default Failure\n<\/code><\/pre>\n
    Esse componente \u00e9 semelhante ao do Success.tsx<\/strong> e exibe a mensagem “Failure!” (Falha!) quando renderizado.<\/p>\n