{"id":65945,"date":"2023-10-02T09:24:16","date_gmt":"2023-10-02T08:24:16","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=65945&preview=true&preview_id=65945"},"modified":"2023-10-24T10:16:10","modified_gmt":"2023-10-24T09:16:10","slug":"stripe-java-api","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/stripe-java-api\/","title":{"rendered":"Ein Leitfaden zur Stripe-Integration in Spring Boot"},"content":{"rendered":"

Mit der Zunahme digitaler Transaktionen ist die F\u00e4higkeit, Zahlungsgateways nahtlos zu integrieren, zu einer entscheidenden F\u00e4higkeit f\u00fcr Entwickler geworden. Ob f\u00fcr Marktpl\u00e4tze oder SaaS-Produkte<\/a>, ein Zahlungsabwickler ist unerl\u00e4sslich, um die Zahlungen der Nutzer\/innen zu sammeln und zu verarbeiten.<\/p>\n

In diesem Artikel erf\u00e4hrst du, wie du Stripe<\/a> in eine Spring Boot-Umgebung<\/a> integrierst, wie du Abonnements einrichtest, kostenlose Testversionen anbietest und Selbstbedienungsseiten erstellst, auf denen deine Kunden ihre Rechnungen herunterladen k\u00f6nnen.
\n

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

Was ist Stripe?<\/h2>\n

Stripe<\/a> ist eine weltweit bekannte Plattform zur Zahlungsabwicklung, die in 46 L\u00e4ndern<\/a> verf\u00fcgbar ist. Sie ist eine gute Wahl, wenn du eine Zahlungsintegration in deine Webanwendung einbauen willst, denn sie hat eine gro\u00dfe Reichweite, einen guten Ruf und eine ausf\u00fchrliche Dokumentation.<\/p>\n

Allgemeine Stripe-Konzepte verstehen<\/h3>\n

Es ist hilfreich, einige allgemeine Konzepte zu verstehen, die Stripe verwendet, um Zahlungsvorg\u00e4nge zwischen mehreren Parteien zu koordinieren und auszuf\u00fchren. Stripe bietet zwei Ans\u00e4tze f\u00fcr die Implementierung der Zahlungsintegration in deiner Anwendung.<\/p>\n

Du kannst entweder die Formulare von Stripe in deine Anwendung einbetten, um den Kunden ein In-App-Erlebnis zu bieten (Payment Intent<\/a>), oder die Kunden auf eine von Stripe gehostete Zahlungsseite umleiten, auf der Stripe den Prozess verwaltet und deine Anwendung dar\u00fcber informiert, ob eine Zahlung erfolgreich war oder nicht (Payment Link<\/a>).<\/p>\n

Zahlungsintention<\/h4>\n

Bei der Zahlungsabwicklung ist es wichtig, die Kunden- und Produktdaten im Voraus zu erfassen, bevor du sie zur Eingabe ihrer Kartendaten und zur Zahlung aufforderst. Diese Details umfassen die Beschreibung, den Gesamtbetrag, die Zahlungsart und mehr.<\/p>\n

Stripe verlangt von dir, dass du diese Daten in deiner Anwendung sammelst und ein PaymentIntent<\/code> Objekt im Backend generierst. Auf diese Weise kann Stripe eine Zahlungsanforderung f\u00fcr diese Absicht formulieren. Nach Abschluss der Zahlung kannst du die Zahlungsdetails, einschlie\u00dflich des Verwendungszwecks, immer \u00fcber das PaymentIntent<\/code> Objekt abrufen.<\/p>\n

Zahlungslinks<\/h4>\n

Um die Komplexit\u00e4t der Integration von Stripe direkt in deine Codebasis zu vermeiden, kannst du Stripe Checkouts<\/a> als gehostete Zahlungsl\u00f6sung nutzen. Wie bei der Erstellung von PaymentIntent<\/code> erstellst du ein CheckoutSession<\/code> mit den Zahlungs- und Kundendaten. Anstatt eine In-App PaymentIntent<\/code> zu initiieren, generiert die CheckoutSession<\/code> einen Zahlungslink, \u00fcber den du deine Kunden weiterleitest. So sieht eine gehostete Zahlungsseite aus:<\/p>\n

\"Die
Die von Stripe gehostete Kassenseite<\/figcaption><\/figure>\n

Nach der Zahlung leitet Stripe zur\u00fcck zu deiner Anwendung und erm\u00f6glicht so Aufgaben nach der Zahlung wie Best\u00e4tigungen und Lieferanfragen. Konfiguriere einen Backend-Webhook, um Stripe zu aktualisieren, damit die Zahlungsdaten auch dann erhalten bleiben, wenn die Kunden die Seite nach der Zahlung versehentlich schlie\u00dfen.<\/p>\n

Diese Methode ist zwar effektiv, aber es fehlt ihr an Flexibilit\u00e4t bei der Anpassung und Gestaltung. Au\u00dferdem kann es schwierig sein, sie f\u00fcr mobile Apps richtig einzurichten, wo eine native Integration viel nahtloser aussehen w\u00fcrde.<\/p>\n

API-Schl\u00fcssel<\/h4>\n

Wenn du mit der Stripe-API arbeitest, brauchst du API-Schl\u00fcssel f\u00fcr deine Client- und Server-Anwendungen, um mit dem Stripe-Backend zu interagieren. Du kannst auf deine Stripe-API-Schl\u00fcssel in deinem Stripe-Entwickler-Dashboard<\/a> zugreifen. So w\u00fcrde es aussehen:<\/p>\n

\"Der
Das Stripe-Dashboard mit den API-Schl\u00fcsseln<\/figcaption><\/figure>\n

Wie funktionieren Zahlungen in Stripe?<\/h3>\n

Um zu verstehen, wie Zahlungen in Stripe funktionieren, musst du alle beteiligten Akteure verstehen. An jeder Zahlungstransaktion sind vier Akteure beteiligt:<\/p>\n

    \n
  1. Kunde<\/strong>: Die Person, die f\u00fcr eine Dienstleistung\/ein Produkt bezahlen will.<\/li>\n
  2. H\u00e4ndler<\/strong>: Du, der Gesch\u00e4ftsinhaber, bist f\u00fcr den Empfang von Zahlungen und den Verkauf von Dienstleistungen\/Produkten verantwortlich.<\/li>\n
  3. Acquirer<\/strong>: Eine Bank, die Zahlungen f\u00fcr dich (den H\u00e4ndler) abwickelt und deine Zahlungsanfragen an die Banken deiner Kunden weiterleitet. Acquirer k\u00f6nnen mit Dritten zusammenarbeiten, um die Zahlungen zu bearbeiten.<\/li>\n
  4. Ausstellende Bank<\/strong>: Die Bank, die Kredite vergibt und Karten und andere Zahlungsmittel an Verbraucher ausgibt.<\/li>\n<\/ol>\n

    Hier ist ein typischer Zahlungsfluss zwischen diesen Akteuren auf einer sehr hohen Ebene.<\/p>\n

    \"Ein
    So funktionieren Online-Zahlungen<\/figcaption><\/figure>\n

    Der Kunde teilt dem H\u00e4ndler mit, dass er bereit ist zu zahlen. Der H\u00e4ndler leitet dann die Zahlungsdaten an seine Acquiring-Bank weiter, die die Zahlung von der Bank des Kunden einzieht und den H\u00e4ndler \u00fcber den Erfolg der Zahlung informiert.<\/p>\n

    Dies ist ein sehr detaillierter \u00dcberblick \u00fcber den Zahlungsprozess. Als H\u00e4ndler musst du dich nur um die Erfassung der Zahlungsabsicht, die Weiterleitung an den Zahlungsabwickler und die Bearbeitung des Zahlungsergebnisses k\u00fcmmern. Wie bereits erw\u00e4hnt, gibt es jedoch zwei M\u00f6glichkeiten, wie du das machen kannst.<\/p>\n

    Wenn du eine von Stripe verwaltete Kaufabwicklung erstellst, bei der Stripe sich um die Erfassung der Zahlungsdaten k\u00fcmmert, sieht der typische Ablauf folgenderma\u00dfen aus:<\/p>\n

    \"Der
    Der von Stripe verwaltete Checkout-Zahlungsablauf. (Quelle:<\/strong> Stripe Docs<\/a>)<\/figcaption><\/figure>\n

    Bei benutzerdefinierten Zahlungsabl\u00e4ufen liegt es wirklich an dir. Du kannst die Interaktion zwischen deinem Client, Server, Kunden und der Stripe-API nach den Bed\u00fcrfnissen deiner Anwendung gestalten. Du kannst diesen Workflow je nach Bedarf um Adresserfassung, Rechnungserstellung, Stornierung, kostenlose Tests usw. erweitern.<\/p>\n

    Jetzt, wo du wei\u00dft, wie Stripe-Zahlungen funktionieren, kannst du damit beginnen, sie in deine Java-Anwendung zu integrieren.<\/p>\n

    Stripe-Integration in Spring Boot-Anwendung<\/h2>\n

    Um mit der Stripe-Integration zu beginnen, musst du eine Frontend-Anwendung erstellen, die mit dem Java-Backend interagiert und Zahlungen ausl\u00f6st. In diesem Leitfaden baust du eine React-Anwendung, um verschiedene Zahlungsarten und Abonnements auszul\u00f6sen, damit du die Mechanismen besser verstehst.<\/p>\n

    Hinweis<\/strong>: In diesem Tutorial geht es nicht darum, eine komplette E-Commerce-Website zu erstellen, sondern vor allem darum, dich durch den einfachen Prozess der Integration von Stripe in Spring Boot zu f\u00fchren.<\/p>\n

    Einrichten der Frontend- und Backend-Projekte<\/h3>\n

    Erstelle ein neues Verzeichnis und r\u00fcste ein React-Projekt mit Vite, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n

    npm create vite@latest<\/code><\/pre>\n
    Setze den Projektnamen auf Frontend<\/strong> (oder einen beliebigen Namen), das Framework auf React<\/strong> und die Variante auf TypeScript<\/strong>. Navigiere in das Projektverzeichnis und installiere Chakra UI f\u00fcr die schnelle Erstellung von UI-Elementen, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n
    npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion @chakra-ui\/icons<\/code><\/pre>\n
    Au\u00dferdem installierst du react-router-dom<\/code> in deinem Projekt f\u00fcr das clientseitige Routing, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n
    npm i react-router-dom<\/code><\/pre>\n
    Jetzt kannst du mit der Erstellung deiner Frontend-Anwendung beginnen. Hier ist die Homepage, die du erstellen wirst.<\/p>\n
    \"Die
    Die fertige Startseite f\u00fcr die Frontend-Anwendung.<\/figcaption><\/figure>\n
    Wenn du auf eine beliebige Schaltfl\u00e4che auf dieser Seite klickst, gelangst du zu separaten Kassenseiten mit Zahlungsformularen. Um zu beginnen, erstelle einen neuen Ordner namens routes<\/strong> in deinem frontend\/src<\/strong> Verzeichnis. In diesem Ordner erstellst du eine Datei Home.tsx<\/strong>. Diese Datei enth\u00e4lt den Code f\u00fcr die Home-Route deiner Anwendung (\/<\/code>). F\u00fcge den folgenden Code in die Datei ein:<\/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
    Um die Navigation in deiner Anwendung zu aktivieren, aktualisiere deine App.tsx-Datei<\/strong>, um die Klasse RouteProvider<\/code> von react-router-dom<\/code> zu konfigurieren.<\/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
    F\u00fchre den Befehl npm run dev<\/code> aus, um eine Vorschau deiner Anwendung auf https:\/\/localhost:5173 zu erhalten.<\/a><\/p>\n
    Damit sind die ersten Schritte f\u00fcr die Frontend-Anwendung abgeschlossen. Als N\u00e4chstes erstellst du eine Backend-Anwendung mit Spring Boot. Um die Anwendung zu initialisieren, kannst du die Website spring initializr<\/a> verwenden (wenn deine IDE die Erstellung von Spring-Apps unterst\u00fctzt, brauchst du die Website nicht zu verwenden).<\/p>\n
    IntelliJ IDEA unterst\u00fctzt die Erstellung von Spring Boot-Anwendungen. W\u00e4hle zun\u00e4chst die Option Neues Projekt<\/strong> in IntelliJ IDEA. W\u00e4hle dann Spring Initializr<\/strong> aus dem linken Fenster. Gib die Details deines Backend-Projekts ein: Name (Backend<\/strong>), Speicherort (stripe-payments-java<\/strong> Verzeichnis), Sprache (Java<\/strong>) und Typ (Maven<\/strong>). Als Gruppen- und Artefaktnamen verwendest du com.kinsta.stripe-java<\/strong> bzw. backend<\/strong>.<\/p>\n
    \"Der
    Der IDEA-Dialog f\u00fcr neue Projekte<\/figcaption><\/figure>\n
    Klicke auf die Schaltfl\u00e4che Weiter<\/strong>. F\u00fcge dann deinem Projekt Abh\u00e4ngigkeiten hinzu, indem du Spring Web<\/strong> aus dem Dropdown-Men\u00fc Web<\/strong> im Abh\u00e4ngigkeitsbereich ausw\u00e4hlst und auf die Schaltfl\u00e4che Erstellen<\/strong> klickst.<\/p>\n
    \"Der
    Auswahl der Abh\u00e4ngigkeiten<\/figcaption><\/figure>\n
    Damit wird das Java-Projekt erstellt und in deiner IDE ge\u00f6ffnet. Jetzt kannst du mit der Erstellung der verschiedenen Checkout-Flows mit Stripe fortfahren.<\/p>\n
    Akzeptieren von Online-Zahlungen f\u00fcr Produktk\u00e4ufe<\/h2>\n
    Die wichtigste und am h\u00e4ufigsten genutzte Funktion von Stripe ist die Annahme von Einmalzahlungen von Kunden. In diesem Abschnitt lernst du zwei M\u00f6glichkeiten kennen, wie du die Zahlungsabwicklung mit Stripe in deine Anwendung integrieren kannst.<\/p>\n
    Hosted Checkout<\/h3>\n
    Zun\u00e4chst erstellst du eine Checkout-Seite, die einen gehosteten Zahlungsworkflow ausl\u00f6st, bei dem du eine Zahlung nur von deiner Frontend-Anwendung aus ausl\u00f6st. Stripe k\u00fcmmert sich dann um die Erfassung der Kartendaten des Kunden und den Einzug der Zahlung und teilt am Ende nur das Ergebnis des Zahlungsvorgangs mit.<\/p>\n
    So w\u00fcrde die Kassenseite aussehen:<\/p>\n
    \"Die
    Die fertige gehostete Kassenseite<\/figcaption><\/figure>\n
    Diese Seite hat drei Hauptkomponenten: CartItem<\/code> – TotalFooter<\/code> – zeigt den Gesamtbetrag an; CustomerDetails<\/code> – sammelt die Kundendaten. Du kannst diese Komponenten wiederverwenden, um Checkout-Formulare f\u00fcr andere Szenarien in diesem Artikel zu erstellen, z. B. f\u00fcr integrierte Checkouts und Abonnements.<\/p>\n
    Aufbau des Frontends<\/h4>\n
    Erstelle einen Komponentenordner<\/strong> in deinem Frontend\/src-Verzeichnis<\/strong>. Erstelle im Komponentenordner<\/strong> eine neue Datei CartItem.tsx<\/strong> und f\u00fcge den folgenden Code ein:<\/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
    Der obige Code definiert zwei Schnittstellen, die als Typen f\u00fcr die Eigenschaften verwendet werden, die an die Komponente \u00fcbergeben werden. Der Typ ItemData<\/code> wird zur Wiederverwendung in anderen Komponenten exportiert.<\/p>\n
    Der Code gibt das Layout einer Warenkorbkomponente zur\u00fcck. Er verwendet die \u00fcbergebenen Requisiten, um den Artikel auf dem Bildschirm darzustellen.<\/p>\n
    Als N\u00e4chstes erstellst du eine Datei TotalFooter.tsx<\/strong> im Komponentenverzeichnis<\/strong> und f\u00fcgst den folgenden Code ein:<\/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
    Die Komponente TotalFooter<\/code> zeigt den Gesamtwert des Warenkorbs an und verwendet den Wert mode<\/code>, um einen bestimmten Text anzuzeigen<\/a>.<\/p>\n
    Schlie\u00dflich erstellst du die Komponente CustomerDetails.tsx<\/code> und f\u00fcgst den folgenden Code ein:<\/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
    Der obige Code zeigt ein Formular mit zwei Eingabefeldern an, um den Namen und die E-Mail-Adresse des Benutzers zu erfassen. Wenn der Checkout-Button<\/strong> angeklickt wird, wird die Methode initiatePayment<\/code> aufgerufen, um die Checkout-Anfrage an das Backend zu senden.<\/p>\n
    Sie fordert den Endpunkt an, den du der Komponente \u00fcbergeben hast, und sendet die Kundendaten und die Artikel des Warenkorbs als Teil der Anfrage und leitet den Nutzer dann an die vom Server erhaltene URL weiter. Diese URL f\u00fchrt den Nutzer zu einer Kassenseite, die auf dem Server von Stripe gehostet wird. Wie du diese URL erstellst, erf\u00e4hrst du gleich.<\/p>\n
    Hinweis:<\/strong> Diese Komponente verwendet die Umgebungsvariable VITE_SERVER_BASE_URL<\/code> f\u00fcr die URL des Backend-Servers. Setze sie, indem du eine .env-Datei<\/strong> im Stammverzeichnis deines Projekts erstellst:<\/p>\n
    VITE_SERVER_BASE_URL=http:\/\/localhost:8080<\/a><\/code><\/pre>\n
    Alle Komponenten sind nun erstellt. Fahren wir nun fort, die Hosted Checkout Route mit den Komponenten zu erstellen. Dazu erstellst du eine neue Datei HostedCheckout.tsx<\/strong> in deinem routes-Ordner<\/strong> mit folgendem Code:<\/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
    Diese Route verwendet die drei Komponenten, die du gerade erstellt hast, um einen Checkout-Bildschirm zu erstellen. Alle Komponenten sind als Kasse<\/strong> konfiguriert und der Endpunkt \/checkout\/hosted<\/code> wird der Formularkomponente zur Verf\u00fcgung gestellt, um die Kassenanfrage korrekt zu initiieren.<\/p>\n
    Die Komponente verwendet ein Products<\/code> Objekt, um das Item-Array zu f\u00fcllen. In der Praxis kommen diese Daten von deiner Warenkorb-API und enthalten die vom Nutzer ausgew\u00e4hlten Artikel. In diesem Leitfaden wird das Array jedoch mit einer statischen Liste aus einem Skript gef\u00fcllt. Definiere das Array, indem du eine data.ts-Datei<\/strong> im Stammverzeichnis deines Frontend-Projekts erstellst und den folgenden Code darin speicherst:<\/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
    Diese Datei definiert zwei Elemente im Produkt-Array, die im Warenkorb angezeigt werden. Du kannst die Werte der Produkte beliebig ver\u00e4ndern.<\/p>\n
    Im letzten Schritt der Entwicklung des Frontends erstellst du zwei neue Routen, um Erfolg und Misserfolg zu behandeln. Die von Stripe gehostete Kassenseite leitet die Nutzer je nach Ergebnis der Transaktion \u00fcber diese beiden Routen in deine Anwendung weiter. Stripe stellt deinen Routen auch transaktionsbezogene Daten zur Verf\u00fcgung, z. B. die ID der Kassensitzung, die du verwenden kannst, um das entsprechende Kassensitzungsobjekt abzurufen<\/a> und auf kassenbezogene Daten wie die Zahlungsmethode, Rechnungsdetails usw. zuzugreifen.<\/p>\n
    Dazu erstellst du eine Datei Success.tsx<\/strong> im Verzeichnis src\/routes<\/strong> und speicherst den folgenden Code darin:<\/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
    Beim Rendern zeigt diese Komponente die Meldung „Success!“ an und gibt alle URL-Abfrageparameter auf dem Bildschirm aus. Au\u00dferdem enth\u00e4lt sie eine Schaltfl\u00e4che, mit der die Benutzer zur Homepage der Anwendung weitergeleitet werden.<\/p>\n
    Wenn du eine reale Anwendung entwickelst, ist diese Seite der Ort, an dem du unkritische app-seitige Transaktionen abwickelst, die vom Erfolg der jeweiligen Transaktion abh\u00e4ngen. Wenn du z. B. eine Kassenseite f\u00fcr einen Onlineshop erstellst, k\u00f6nntest du diese Seite nutzen, um dem Nutzer eine Best\u00e4tigung zu geben und ihm mitzuteilen, wann seine gekauften Produkte geliefert werden.<\/p>\n
    Als N\u00e4chstes erstellst du eine Datei Failure.tsx<\/strong> mit dem folgenden Code darin:<\/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
    Diese Komponente \u00e4hnelt der Success.tsx<\/strong> und zeigt die Meldung „Failure!“ an, wenn sie gerendert wird.<\/p>\n