{"id":73422,"date":"2023-10-02T09:28:21","date_gmt":"2023-10-02T08:28:21","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=73422&preview=true&preview_id=73422"},"modified":"2023-10-12T17:03:13","modified_gmt":"2023-10-12T16:03:13","slug":"integration-stripe-spring-boot","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/integration-stripe-spring-boot\/","title":{"rendered":"Un guide pour l’int\u00e9gration de Stripe dans une application Spring Boot"},"content":{"rendered":"

Avec l’augmentation des transactions num\u00e9riques, la capacit\u00e9 \u00e0 int\u00e9grer de fa\u00e7on transparente les passerelles de paiement est devenue une comp\u00e9tence essentielle pour les d\u00e9veloppeurs. Que ce soit pour les places de march\u00e9 ou les produits SaaS<\/a>, un processeur de paiement est crucial pour collecter et traiter les paiements des utilisateurs.<\/p>\n

Cet article explique comment int\u00e9grer Stripe<\/a> dans un environnement Spring Boot<\/a>, comment mettre en place des abonnements, proposer des essais gratuits et construire des pages en libre-service pour que tes clients puissent t\u00e9l\u00e9charger leurs factures de paiement.
\n

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

Qu’est-ce que Stripe ?<\/h2>\n

Stripe<\/a> est une plateforme de traitement des paiements de renomm\u00e9e mondiale, disponible dans 46 pays<\/a>. C’est un excellent choix si vous voulez int\u00e9grer un syst\u00e8me de paiement dans votre application web, en raison de sa grande port\u00e9e, de son nom r\u00e9put\u00e9 et de sa documentation d\u00e9taill\u00e9e.<\/p>\n

Comprendre les concepts communs de Stripe<\/h3>\n

Il est utile de comprendre certains concepts communs que Stripe utilise pour coordonner et effectuer des op\u00e9rations de paiement entre plusieurs parties. Stripe propose deux approches pour mettre en \u0153uvre l’int\u00e9gration des paiements dans votre application.<\/p>\n

Vous pouvez soit int\u00e9grer les formulaires de Stripe dans votre application pour une exp\u00e9rience client in-app (intention de paiement<\/a>), soit rediriger les clients vers une page de paiement h\u00e9berg\u00e9e par Stripe, o\u00f9 Stripe g\u00e8re le processus et informe votre application lorsqu’un paiement a r\u00e9ussi ou \u00e9chou\u00e9 (lien de paiement<\/a>).<\/p>\n

Intention de paiement<\/h4>\n

Lorsque vous g\u00e9rez des paiements, il est important de recueillir les d\u00e9tails concernant le client et le produit avant de leur demander les informations relatives \u00e0 la carte et au paiement. Ces d\u00e9tails comprennent la description, le montant total, le moyen de paiement, etc.<\/p>\n

Stripe vous demande de collecter ces d\u00e9tails dans votre application et de g\u00e9n\u00e9rer un objet PaymentIntent<\/code> dans son backend. Cette approche permet \u00e0 Stripe de formuler une demande de paiement pour cette intention. Une fois le paiement termin\u00e9, vous pouvez syst\u00e9matiquement r\u00e9cup\u00e9rer les d\u00e9tails du paiement, y compris son objet, par le biais de l’objet PaymentIntent<\/code>.<\/p>\n

Liens de paiement<\/h4>\n

Pour \u00e9viter la complexit\u00e9 de l’int\u00e9gration de Stripe directement dans votre base de code, envisagez d’utiliser Stripe Checkouts<\/a> pour une solution de paiement h\u00e9berg\u00e9e. Comme pour la cr\u00e9ation d’un PaymentIntent<\/code>, vous cr\u00e9erez un CheckoutSession<\/code> avec les d\u00e9tails du paiement et du client. Au lieu d’initier un PaymentIntent<\/code> in-app, le CheckoutSession<\/code> g\u00e9n\u00e8re un lien de paiement vers lequel vous redirigez vos clients. Voici \u00e0 quoi ressemble une page de paiement h\u00e9berg\u00e9e :<\/p>\n

\"La
La page de paiement h\u00e9berg\u00e9e par Stripe.<\/figcaption><\/figure>\n

Apr\u00e8s le paiement, Stripe redirige vers votre application, ce qui permet d’effectuer des t\u00e2ches post-paiement telles que les confirmations et les demandes de livraison. Pour plus de fiabilit\u00e9, configurez un crochet web de backend pour mettre \u00e0 jour Stripe, assurant ainsi la conservation des donn\u00e9es de paiement m\u00eame si les clients ferment accidentellement la page apr\u00e8s le paiement.<\/p>\n

Bien qu’efficace, cette m\u00e9thode manque de flexibilit\u00e9 en mati\u00e8re de personnalisation et de conception. Elle peut \u00e9galement \u00eatre d\u00e9licate \u00e0 configurer correctement pour les applications mobiles, o\u00f9 une int\u00e9gration native aurait l’air bien plus transparente.<\/p>\n

Cl\u00e9s API<\/h4>\n

Lorsque vous travaillez avec l’API Stripe, vous devez avoir acc\u00e8s aux cl\u00e9s API pour que vos applications client et serveur puissent interagir avec le backend Stripe. Vous pouvez acc\u00e9der \u00e0 vos cl\u00e9s API Stripe sur votre tableau de bord de d\u00e9veloppeur Stripe<\/a>. Voici \u00e0 quoi il ressemblerait :<\/p>\n

\"Le
Le tableau de bord Stripe affichant les cl\u00e9s API<\/figcaption><\/figure>\n

Comment fonctionnent les paiements dans Stripe ?<\/h3>\n

Pour comprendre comment fonctionnent les paiements dans Stripe, vous devez comprendre toutes les parties prenantes impliqu\u00e9es. Quatre parties prenantes sont impliqu\u00e9es dans chaque transaction de paiement :<\/p>\n

    \n
  1. Client <\/strong>: La personne qui a l’intention de payer pour un service\/produit.<\/li>\n
  2. Marchand <\/strong>: Vous, le ou la propri\u00e9taire de l’entreprise, vous \u00eates responsable de la r\u00e9ception des paiements et de la vente des services\/produits.<\/li>\n
  3. Acqu\u00e9reur <\/strong>: Une banque qui traite les paiements en votre nom (le commer\u00e7ant) et achemine votre demande de paiement aux banques de vos clients. Les acqu\u00e9reurs peuvent s’associer \u00e0 un tiers pour aider \u00e0 traiter les paiements.<\/li>\n
  4. Banque \u00e9mettrice <\/strong>: La banque qui accorde des cr\u00e9dits et \u00e9met des cartes et d’autres moyens de paiement aux consommateurs.<\/li>\n<\/ol>\n

    Voici un flux de paiement typique entre ces parties prenantes \u00e0 un niveau tr\u00e8s \u00e9lev\u00e9.<\/p>\n

    \"Comment
    Comment fonctionnent les paiements en ligne<\/figcaption><\/figure>\n

    Le client fait savoir au commer\u00e7ant qu’il est pr\u00eat \u00e0 payer. Le commer\u00e7ant transmet ensuite les informations relatives au paiement \u00e0 sa banque acqu\u00e9reur, qui collecte le paiement aupr\u00e8s de la banque \u00e9mettrice du client et informe le commer\u00e7ant que le paiement a bien \u00e9t\u00e9 effectu\u00e9.<\/p>\n

    Il s’agit l\u00e0 d’un aper\u00e7u de tr\u00e8s haut niveau du processus de paiement. En tant que commer\u00e7ant, vous n’avez\u00a0 qu’\u00e0 vous pr\u00e9occuper de la collecte de l’intention de paiement, de sa transmission au processeur de paiement et du traitement du r\u00e9sultat du paiement. Cependant, comme nous l’avons vu plus haut, il y a deux fa\u00e7ons de proc\u00e9der.<\/p>\n

    Lors de la cr\u00e9ation d’une session de paiement g\u00e9r\u00e9e par Stripe, o\u00f9 Stripe s’occupe de la collecte des d\u00e9tails du paiement, voici \u00e0 quoi ressemble le flux typique :<\/p>\n

    \"Le
    Le flux de paiement de la session de paiement h\u00e9berg\u00e9e par Stripe. (Source :<\/strong> Stripe Docs<\/a>)<\/figcaption><\/figure>\n

    Avec les flux de paiement personnalis\u00e9s, tout d\u00e9pend vraiment de vous. Vous pouvez concevoir l’interaction entre votre client, le serveur, le client et l’API Stripe en fonction des besoins de votre application. Vous pouvez ajouter \u00e0 ce flux de travail la collecte d’adresses, la g\u00e9n\u00e9ration de factures, l’annulation, les essais gratuits, etc. Selon vos besoins.<\/p>\n

    Maintenant que vous comprennez le fonctionnement des paiements Stripe, vous \u00eates pr\u00eat \u00e0 commencer \u00e0 le construire dans votre application Java.<\/p>\n

    Int\u00e9gration de Stripe dans une application Spring Boot<\/h2>\n

    Pour commencer l’int\u00e9gration de Stripe, cr\u00e9e une application frontend pour interagir avec le backend Java et initier les paiements. Dans ce tutoriel, vous construirez une appli React pour d\u00e9clencher diff\u00e9rents types de paiements et d’abonnements afin de bien comprendre leurs m\u00e9canismes.<\/p>\n

    Remarque <\/strong>: ce tutoriel ne couvrira pas la construction d’un site de commerce \u00e9lectronique complet ; il vise principalement \u00e0 vous guider dans le processus simple d’int\u00e9gration de Stripe dans Spring Boot.<\/p>\n

    Configuration des projets frontend et backend<\/h3>\n

    Cr\u00e9ez un nouveau r\u00e9pertoire et \u00e9chafaudez un projet React \u00e0 l’aide de Vite en ex\u00e9cutant la commande suivante :<\/p>\n

    npm create vite@latest<\/code><\/pre>\n
    D\u00e9finissez le nom du projet comme frontend<\/strong> (ou tout autre nom pr\u00e9f\u00e9r\u00e9), le framework comme React<\/strong> et la variante comme TypeScript<\/strong>. Naviguez vers le r\u00e9pertoire du projet et installez Chakra UI pour un \u00e9chafaudage rapide des \u00e9l\u00e9ments de l’interface utilisateur en ex\u00e9cutant la commande suivante :<\/p>\n
    npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion @chakra-ui\/icons<\/code><\/pre>\n
    Vous installerez \u00e9galement react-router-dom<\/code> dans votre projet pour le routage c\u00f4t\u00e9 client en ex\u00e9cutant la commande ci-dessous :<\/p>\n
    npm i react-router-dom<\/code><\/pre>\n
    Maintenant, vous \u00eates pr\u00eat \u00e0 construire votre application frontend. Voici la page d’accueil que vous allez construire.<\/p>\n
    \"La
    La page d’accueil termin\u00e9e de l’application frontend.<\/figcaption><\/figure>\n
    En cliquant sur n’importe quel bouton de cette page, vous acc\u00e8derez \u00e0 des pages de paiement s\u00e9par\u00e9es avec des formulaires de paiement. Pour commencer, cr\u00e9ez un nouveau dossier nomm\u00e9 routes<\/strong> dans votre r\u00e9pertoire frontend\/src<\/strong>. Dans ce dossier, cr\u00e9ez un fichier Home.tsx.<\/strong> Ce fichier contiendra le code de la route d’accueil de votre application (\/<\/code>). Collez le code suivant dans le fichier :<\/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
    Pour permettre la navigation dans votre application, mettez \u00e0 jour votre fichier App.tsx<\/strong> pour configurer la classe RouteProvider<\/code> \u00e0 partir 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
    Ex\u00e9cutez la commande npm run dev<\/code> pour pr\u00e9visualiser votre application sur https:\/\/localhost:5173<\/a>.<\/p>\n
    Ceci termine la configuration initiale n\u00e9cessaire pour l’appli frontend. Ensuite, cr\u00e9ez une application backend \u00e0 l’aide de Spring Boot. Pour initialiser l’application, vous pouvez utiliser le site web spring initializr<\/a> (si votre IDE prend en charge la cr\u00e9ation d’applications Spring, vous n’avez pas besoin d’utiliser le site web).<\/p>\n
    IntelliJ IDEA prend en charge la cr\u00e9ation d’applications Spring Boot. Commencez par choisir l’option New project<\/strong> sur IntelliJ IDEA. Ensuite, choisissez Spring Initializr<\/strong> dans le panneau de gauche. Saisissez les d\u00e9tails de votre projet backend : nom (backend<\/strong>), emplacement (stripe-payments-java<\/strong>), langage (Java<\/strong>) et type (Maven<\/strong>). Pour les noms de groupe et d’artefact, utilisez respectivement com.kinsta.stripe-java<\/strong> et backend<\/strong>.<\/p>\n
    \"La
    La bo\u00eete de dialogue du nouveau projet IDEA.<\/figcaption><\/figure>\n
    Cliquez sur le bouton Next<\/strong>. Ajoutez ensuite des d\u00e9pendances \u00e0 votre projet en choisissant Spring Web<\/strong> dans le menu d\u00e9roulant Web<\/strong> du volet des d\u00e9pendances et cliquez sur le bouton Create<\/strong>.<\/p>\n
    \"Choix
    Choix des d\u00e9pendances.<\/figcaption><\/figure>\n
    Cela va cr\u00e9er le projet Java et l’ouvrir dans votre IDE. Vous pouvez maintenant proc\u00e9der \u00e0 la cr\u00e9ation des diff\u00e9rents flux de paiement \u00e0 l’aide de Stripe.<\/p>\n
    Accepter les paiements en ligne pour les achats de produits<\/h2>\n
    La fonctionnalit\u00e9 la plus importante et la plus utilis\u00e9e de Stripe est l’acceptation de paiements uniques de la part des clients. Dans cette section, vous apprendrez deux fa\u00e7ons d’int\u00e9grer le traitement des paiements dans votre application avec Stripe.<\/p>\n
    Commande h\u00e9berg\u00e9e<\/h3>\n
    Tout d’abord, Vous construisez une page de commande qui d\u00e9clenche un flux de travail de paiement h\u00e9berg\u00e9 o\u00f9 vous ne d\u00e9clenchez un paiement qu’\u00e0 partir de votre application frontend. Stripe se charge ensuite de recueillir les d\u00e9tails de la carte du client et de collecter le paiement, et ne partage le r\u00e9sultat de l’op\u00e9ration de paiement qu’\u00e0 la fin.<\/p>\n
    Voici \u00e0 quoi ressemblerait la page de paiement :<\/p>\n
    \"La
    La page de commande h\u00e9berg\u00e9e compl\u00e9t\u00e9e.<\/figcaption><\/figure>\n
    Cette page comporte trois \u00e9l\u00e9ments principaux : CartItem<\/code> – repr\u00e9sente chaque article du panier ; TotalFooter<\/code> – affiche le montant total ; CustomerDetails<\/code> – recueille les d\u00e9tails du client. Vous pouvez r\u00e9utiliser ces composants pour cr\u00e9er des formulaires de commande pour d’autres sc\u00e9narios de cet article, comme le paiement int\u00e9gr\u00e9 et les abonnements.<\/p>\n
    Construire le frontend<\/h4>\n
    Cr\u00e9ez un dossier components<\/strong> dans votre r\u00e9pertoire frontend\/src<\/strong>. Dans le dossier components<\/strong>, cr\u00e9ez un nouveau fichier CartItem.tsx<\/strong> et collez le code suivant :<\/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
    Le code ci-dessus d\u00e9finit deux interfaces \u00e0 utiliser comme types pour les propri\u00e9t\u00e9s transmises au composant. Le type ItemData<\/code> est export\u00e9 pour \u00eatre r\u00e9utilis\u00e9 dans d’autres composants.<\/p>\n
    Le code renvoie la disposition d’un composant d’article de panier. Il utilise les propri\u00e9t\u00e9s fournies pour afficher l’article \u00e0 l’\u00e9cran.<\/p>\n
    Ensuite, cr\u00e9ez un fichier TotalFooter.tsx<\/strong> dans le r\u00e9pertoire des compoents<\/strong> et collez le code suivant :<\/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
    Le composant TotalFooter<\/code> affiche la valeur totale du panier et utilise la valeur mode<\/code> pour rendre un texte sp\u00e9cifique de mani\u00e8re conditionnelle<\/a>.<\/p>\n
    Enfin, cr\u00e9ez le composant CustomerDetails.tsx<\/code> et collez le code suivant :<\/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
    Le code ci-dessus affiche un formulaire avec deux champs de saisie – pour recueillir le nom et l’e-mail de l’utilisateur. Lorsque l’utilisateur clique sur le bouton Commander<\/strong>, la m\u00e9thode initiatePayment<\/code> est invoqu\u00e9e pour envoyer la demande de paiement au backend.<\/p>\n
    Elle demande le point de terminaison que vous avez pass\u00e9 au composant et envoie les informations du client et les articles du panier dans le cadre de la demande, puis redirige l’utilisateur vers l’URL re\u00e7ue du serveur. Cette URL conduira l’utilisateur \u00e0 une page de commande h\u00e9berg\u00e9e sur le serveur de Stripe. Vous apprendrez \u00e0 construire cette URL dans quelques instants.<\/p>\n
    Note :<\/strong> Ce composant utilise la variable d’environnement VITE_SERVER_BASE_URL<\/code> pour l’URL du serveur backend. D\u00e9finissez-la en cr\u00e9ant un fichier .env<\/strong> \u00e0 la racine de votre projet :<\/p>\n
    VITE_SERVER_BASE_URL=http:\/\/localhost:8080<\/a><\/code><\/pre>\n
    Tous les composants ont \u00e9t\u00e9 cr\u00e9\u00e9s. Passons maintenant \u00e0 la construction de l’itin\u00e9raire de commande h\u00e9berg\u00e9 \u00e0 l’aide des composants. Pour cela, cr\u00e9ez un nouveau fichier HostedCheckout.tsx<\/strong> dans votre dossier routes<\/strong> avec le code suivant :<\/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
    Cette route utilise les trois composants que vous venez de construire pour assembler un \u00e9cran de commande. Tous les modes des composants sont configur\u00e9s comme checkout<\/strong>, et le point de terminaison \/checkout\/hosted<\/code> est fourni au composant de formulaire pour initier la demande de commande avec pr\u00e9cision.<\/p>\n
    Le composant utilise un objet Products<\/code> pour remplir le tableau des articles. Dans le monde r\u00e9el, ces donn\u00e9es proviennent de l’API du panier et contiennent les articles s\u00e9lectionn\u00e9s par l’utilisateur. Cependant, pour ce tutoriel, c’est une liste statique provenant d’un script qui remplit le tableau. D\u00e9finissez le tableau en cr\u00e9ant un fichier data.ts<\/strong> \u00e0 la racine de votre projet frontend et en y stockant le code suivant :<\/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
    Ce fichier d\u00e9finit deux \u00e9l\u00e9ments dans le tableau des produits qui sont affich\u00e9s dans le panier. N’h\u00e9sitez pas \u00e0 modifier les valeurs des produits.<\/p>\n
    La derni\u00e8re \u00e9tape de la construction du frontend consiste \u00e0 cr\u00e9er deux nouvelles routes pour g\u00e9rer les succ\u00e8s et les \u00e9checs. La page de commande h\u00e9berg\u00e9e par Stripe redirigera les utilisateurs dans votre application sur ces deux routes en fonction du r\u00e9sultat de la transaction. Stripe fournira \u00e9galement \u00e0 vos routes des donn\u00e9es utiles li\u00e9es \u00e0 la transaction, telles que l’identifiant de la session de commande, que vous pourrez utiliser pour r\u00e9cup\u00e9rer l’objet de session de paiement correspondant<\/a> et acc\u00e9der aux donn\u00e9es li\u00e9es au paiement, telles que le moyen de paiement, les d\u00e9tails de la facture, etc.<\/p>\n
    Pour cela, cr\u00e9ez un fichier Success.tsx<\/strong> dans le r\u00e9pertoire src\/routes<\/strong> et enregistrez-y le code suivant :<\/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
    Lors du rendu, ce composant affiche le message \u00ab Success ! \u00bb et affiche tous les param\u00e8tres de requ\u00eate de l’URL \u00e0 l’\u00e9cran. Il comprend \u00e9galement un bouton pour rediriger les utilisateurs vers la page d’accueil de l’application.<\/p>\n
    Lors de la cr\u00e9ation d’applications r\u00e9elles, c’est sur cette page que se d\u00e9roulent les transactions non critiques qui d\u00e9pendent de la r\u00e9ussite de la transaction en cours. Par exemple, si vous construisez une page de commande pour une boutique en ligne, vous pouvez utiliser cette page pour montrer une confirmation \u00e0 l’utilisateur et lui indiquer quand les produits qu’il a achet\u00e9s seront livr\u00e9s.<\/p>\n
    Ensuite, cr\u00e9ez un fichier Failure.tsx<\/strong> contenant le code suivant :<\/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
    Ce composant est similaire \u00e0 celui de Success.tsx<\/strong> et affiche le message \u00ab Failure ! \u00bb lorsqu’il est rendu.<\/p>\n