{"id":70437,"date":"2023-10-02T16:31:49","date_gmt":"2023-10-02T14:31:49","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=70437&preview=true&preview_id=70437"},"modified":"2023-10-12T17:59:28","modified_gmt":"2023-10-12T15:59:28","slug":"stripe-java-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/stripe-java-api\/","title":{"rendered":"Una Gu\u00eda Para la Integraci\u00f3n de Stripe en Spring Boot"},"content":{"rendered":"

A medida que aumentan las transacciones digitales, la capacidad de integrar perfectamente las pasarelas de pago se ha convertido en una habilidad cr\u00edtica para los desarrolladores. Ya sea para marketplaces o productos SaaS<\/a>, un procesador de pagos es crucial para cobrar y procesar los pagos de los usuarios.<\/p>\n

Este art\u00edculo explica c\u00f3mo integrar Stripe<\/a> en un entorno Spring Boot<\/a>, c\u00f3mo configurar suscripciones, ofrecer pruebas gratuitas y crear p\u00e1ginas de autoservicio para que tus clientes descarguen sus facturas.
\n

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

\u00bfQu\u00e9 es Stripe?<\/h2>\n

Stripe<\/a> es una plataforma de procesamiento de pagos de renombre mundial disponible en 46 pa\u00edses<\/a>. Es una gran elecci\u00f3n si quieres crear una integraci\u00f3n de pagos en tu aplicaci\u00f3n web gracias a su gran alcance, su reputaci\u00f3n y su detallada documentaci\u00f3n.<\/p>\n

Comprender los conceptos comunes de Stripe<\/h3>\n

Es \u00fatil entender algunos conceptos comunes que Stripe utiliza para coordinar y llevar a cabo operaciones de pago entre m\u00faltiples partes. Stripe ofrece dos enfoques para implementar la integraci\u00f3n de pagos en tu aplicaci\u00f3n.<\/p>\n

Puedes incrustar los formularios de Stripe dentro de tu aplicaci\u00f3n para una experiencia de cliente dentro de la aplicaci\u00f3n (Payment Intent<\/a>) o redirigir a los clientes a una p\u00e1gina de pago alojada en Stripe, donde Stripe gestiona el proceso e informa a tu aplicaci\u00f3n cuando un pago se realiza correctamente o no (Payment Link<\/a>).<\/p>\n

Payment Intent (Intenci\u00f3n de pago)<\/h4>\n

Al gestionar los pagos, es importante recopilar por adelantado los detalles del cliente y del producto antes de solicitarles la informaci\u00f3n de la tarjeta y el pago. Estos datos incluyen la descripci\u00f3n, el importe total, el modo de pago, etc.<\/p>\n

Stripe requiere que recopiles estos datos en tu aplicaci\u00f3n y generes un objeto PaymentIntent<\/code> en su backend. Este enfoque permite a Stripe formular una solicitud de pago para esa intenci\u00f3n. Una vez concluido el pago, puedes recuperar sistem\u00e1ticamente los detalles del pago, incluido su prop\u00f3sito, a trav\u00e9s del objeto PaymentIntent<\/code>.<\/p>\n

Payment Link (Enlace de pago)<\/h4>\n

Para evitar las complejidades de integrar Stripe directamente en tu c\u00f3digo base, considera utilizar Stripe Checkouts<\/a> para una soluci\u00f3n de pago alojada. Al igual que al crear un PaymentIntent<\/code>, crear\u00e1s un CheckoutSession<\/code> con los detalles del pago y del cliente. En lugar de iniciar un pago en la aplicaci\u00f3n PaymentIntent<\/code>, el CheckoutSession<\/code> genera un enlace de pago al que rediriges a tus clientes. Este es el aspecto de una p\u00e1gina de pago alojada:<\/p>\n

\"La
La p\u00e1gina de pago alojada en Stripe.<\/figcaption><\/figure>\n

Tras el pago, Stripe redirige de nuevo a tu aplicaci\u00f3n, permitiendo tareas posteriores al pago como confirmaciones y solicitudes de entrega. Para mayor fiabilidad, configura un webhook backend para actualizar Stripe, asegurando la retenci\u00f3n de los datos de pago incluso si los clientes cierran accidentalmente la p\u00e1gina despu\u00e9s del pago.<\/p>\n

Aunque es eficaz, este m\u00e9todo carece de flexibilidad en la personalizaci\u00f3n y el dise\u00f1o. Tambi\u00e9n puede ser complicado configurarlo correctamente para aplicaciones m\u00f3viles, donde una integraci\u00f3n nativa resultar\u00eda mucho m\u00e1s fluida.<\/p>\n

Claves API<\/h4>\n

Cuando trabajes con la API de Stripe, necesitar\u00e1s acceder a claves API para que tus aplicaciones cliente y servidor interact\u00faen con el backend de Stripe. Puedes acceder a tus claves API de Stripe en tu panel de desarrollador de Stripe<\/a>. Este es el aspecto que tendr\u00eda<\/p>\n

\"El
El panel de Stripe mostrando las claves API<\/figcaption><\/figure>\n

\u00bfC\u00f3mo funcionan los pagos en Stripe?<\/h3>\n

Para entender c\u00f3mo funcionan los pagos en Stripe, tienes que entender a todas las partes implicadas. En cada transacci\u00f3n de pago intervienen cuatro partes interesadas:<\/p>\n

    \n
  1. Cliente<\/strong>: La persona que tiene la intenci\u00f3n de pagar por un servicio\/producto.<\/li>\n
  2. Comerciante<\/strong>: T\u00fa, el empresario, eres el responsable de recibir los pagos y vender los servicios\/productos.<\/li>\n
  3. Adquirente<\/strong>: Un banco que procesa los pagos en tu nombre (el comerciante) y dirige tu solicitud de pago a los bancos de tus clientes. Las entidades adquirentes pueden asociarse con terceros para ayudar a procesar los pagos.<\/li>\n
  4. Banco emisor<\/strong>: El banco que concede cr\u00e9ditos y emite tarjetas, y otros medios de pago a los consumidores.<\/li>\n<\/ol>\n

    Aqu\u00ed puedes ver un flujo de pago t\u00edpico entre estas partes interesadas a muy alto nivel.<\/p>\n

    \"C\u00f3mo
    C\u00f3mo funcionan los pagos online<\/figcaption><\/figure>\n

    El cliente hace saber al comerciante que est\u00e1 dispuesto a pagar. A continuaci\u00f3n, el comerciante env\u00eda los detalles relacionados con el pago a su banco adquirente, que recoge el pago del banco emisor del cliente y comunica al comerciante que el pago se ha realizado correctamente.<\/p>\n

    Este es un resumen de muy alto nivel del proceso de pago. Como comerciante, s\u00f3lo tienes que preocuparte de recoger la intenci\u00f3n de pago, transmitirla al procesador de pagos y gestionar el resultado del pago. Sin embargo, como ya hemos comentado, existen dos formas de hacerlo.<\/p>\n

    Cuando se crea una sesi\u00f3n de pago gestionada por Stripe en la que Stripe se encarga de la recogida de los datos de pago, el flujo t\u00edpico es el siguiente:<\/p>\n

    \"El
    El flujo de trabajo del pago gestionado por Stripe. (Fuente:<\/strong> Stripe Docs<\/a>)<\/figcaption><\/figure>\n

    Con los flujos de pago personalizados, realmente depende de ti. Puedes dise\u00f1ar la interacci\u00f3n entre tu cliente, el servidor, el cliente y la API de Stripe en funci\u00f3n de las necesidades de tu aplicaci\u00f3n. Puedes a\u00f1adir a este flujo de trabajo la recogida de direcciones, la generaci\u00f3n de facturas, la cancelaci\u00f3n, las pruebas gratuitas, etc., seg\u00fan necesites.<\/p>\n

    Ahora que entiendes c\u00f3mo funcionan los pagos con Stripe, est\u00e1s listo para empezar a integrarlo en tu aplicaci\u00f3n Java.<\/p>\n

    Integraci\u00f3n de Stripe en una Aplicaci\u00f3n Spring Boot<\/h2>\n

    Para comenzar la integraci\u00f3n de Stripe, crea una aplicaci\u00f3n frontend para interactuar con el backend Java e iniciar los pagos. En este tutorial, construir\u00e1s una app React para activar varios tipos de pago y suscripciones, de forma que obtengas una clara comprensi\u00f3n de sus mecanismos.<\/p>\n

    Nota<\/strong>: Este tutorial no cubre la construcci\u00f3n de un sitio de comercio electr\u00f3nico completo; su objetivo principal es guiarte a trav\u00e9s del sencillo proceso de integraci\u00f3n de Stripe en Spring Boot.<\/p>\n

    Configuraci\u00f3n de los proyectos frontend y backend<\/h3>\n

    Crea un nuevo directorio y monta un proyecto React utilizando Vite ejecutando el siguiente comando:<\/p>\n

    npm create vite@latest<\/code><\/pre>\n
    Establece el nombre del proyecto como frontend<\/strong> (o el nombre que prefieras), framework como React<\/strong> y variante como TypeScript<\/strong>. Navega hasta el directorio del proyecto e instala Chakra UI para un andamiaje r\u00e1pido de los elementos de la interfaz de usuario ejecutando el siguiente comando:<\/p>\n
    npm i @chakra-ui\/react @emotion\/react @emotion\/styled framer-motion @chakra-ui\/icons<\/code><\/pre>\n
    Tambi\u00e9n instalar\u00e1s react-router-dom<\/code> en tu proyecto para el enrutamiento del lado del cliente ejecutando el siguiente comando:<\/p>\n
    npm i react-router-dom<\/code><\/pre>\n
    Ahora, est\u00e1s listo para empezar a construir tu aplicaci\u00f3n frontend. Esta es la p\u00e1gina de inicio que vas a construir.<\/p>\n
    \"La
    La p\u00e1gina de inicio completada para la aplicaci\u00f3n del frontend.<\/figcaption><\/figure>\n
    Si haces clic en cualquier bot\u00f3n de esta p\u00e1gina, acceder\u00e1s a p\u00e1ginas de pago independientes con formularios de pago. Para empezar, crea una nueva carpeta llamada routes<\/strong> en tu directorio frontend\/src<\/strong>. Dentro de esta carpeta, crea un archivo Home.tsx<\/strong>. Este archivo contendr\u00e1 el c\u00f3digo de la ruta de inicio de tu aplicaci\u00f3n (\/<\/code>). Pega el siguiente c\u00f3digo en el archivo:<\/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 habilitar la navegaci\u00f3n en tu aplicaci\u00f3n, actualiza tu archivo App.tsx<\/strong> para configurar la clase 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
    Ejecuta el comando npm run dev<\/code> para previsualizar tu aplicaci\u00f3n en https:\/\/localhost:5173<\/a>.<\/p>\n
    Esto completa la configuraci\u00f3n inicial necesaria para el frontend de la app. A continuaci\u00f3n, crea una aplicaci\u00f3n backend utilizando Spring Boot. Para inicializar la aplicaci\u00f3n, puedes utilizar el sitio web spring initializr<\/a> (si tu IDE admite la creaci\u00f3n de aplicaciones Spring, no necesitas utilizar el sitio web).<\/p>\n
    IntelliJ IDEA soporta la creaci\u00f3n de aplicaciones Spring Boot. Empieza eligiendo la opci\u00f3n New Project<\/strong>\u00a0en IntelliJ IDEA. A continuaci\u00f3n, elige Spring Initializr<\/strong> en el panel izquierdo. Introduce los detalles de tu proyecto backend: name (backend<\/strong>), location (directorio stripe-payments-java<\/strong>), language (Java<\/strong>) y type (Maven<\/strong>). Para los nombres de grupo y artefacto, utiliza com.kinsta.stripe-java<\/strong> y backend ,<\/strong> respectivamente.<\/p>\n
    \"El
    El di\u00e1logo de nuevo proyecto de IDEA.<\/figcaption><\/figure>\n
    Haz clic en el bot\u00f3n Next<\/strong>. A continuaci\u00f3n, a\u00f1ade dependencias a tu proyecto eligiendo Spring Web<\/strong> en el desplegable Web<\/strong> del panel de dependencias y haz clic en el bot\u00f3n Create<\/strong>.<\/p>\n
    \"Eligiendo
    Eligiendo las dependencias.<\/figcaption><\/figure>\n
    Esto crear\u00e1 el proyecto Java y lo abrir\u00e1 en tu IDE. Ahora puedes proceder a crear los distintos flujos de pago utilizando Stripe.<\/p>\n
    Aceptar Pagos Online para la Compra de Productos<\/h2>\n
    La funcionalidad m\u00e1s importante y utilizada de Stripe es aceptar pagos \u00fanicos de los clientes. En esta secci\u00f3n, aprender\u00e1s dos formas de integrar el procesamiento de pagos en tu aplicaci\u00f3n con Stripe.<\/p>\n
    Hosted Checkout (Pago Alojado)<\/h3>\n
    En primer lugar, construyes una p\u00e1gina de pago que activa un flujo de trabajo de pago alojado en el que s\u00f3lo activas un pago desde tu aplicaci\u00f3n frontend. Entonces Stripe se encarga de recopilar los datos de la tarjeta del cliente y de cobrar el pago, y s\u00f3lo comparte el resultado de la operaci\u00f3n de pago al final.<\/p>\n
    Este es el aspecto que tendr\u00eda la p\u00e1gina de pago:<\/p>\n
    \"La
    La p\u00e1gina de pago alojada finalizada.<\/figcaption><\/figure>\n
    Esta p\u00e1gina tiene tres componentes principales: CartItem<\/code> – representa cada art\u00edculo del carrito; TotalFooter<\/code> – muestra el importe total; CustomerDetails<\/code> – recoge los datos del cliente. Puedes reutilizar estos componentes para crear formularios de pago para otros escenarios de este art\u00edculo, como el pago integrado y las suscripciones.<\/p>\n
    Construir el frontend<\/h4>\n
    Crea una carpeta components<\/strong> en tu directorio frontend\/src<\/strong>. En la carpeta components<\/strong>, crea un nuevo archivo CartItem.tsx<\/strong> y pega el siguiente c\u00f3digo:<\/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
    El c\u00f3digo anterior define dos interfaces que se utilizar\u00e1n como tipos para las propiedades pasadas al componente. El tipo ItemData<\/code> se exporta para reutilizarlo en otros componentes.<\/p>\n
    El c\u00f3digo devuelve el dise\u00f1o de un componente de art\u00edculo de carrito. Utiliza las propiedades proporcionadas para representar el elemento en la pantalla.<\/p>\n
    A continuaci\u00f3n, crea un archivo TotalFooter.tsx<\/strong> en el directorio de components<\/strong> y pega el siguiente 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
    El componente TotalFooter<\/code> muestra el valor total del carrito y utiliza el valor mode<\/code> para mostrar condicionalmente<\/a> un texto espec\u00edfico.<\/p>\n
    Por \u00faltimo, crea el componente CustomerDetails.tsx<\/code> y pega el siguiente 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
    El c\u00f3digo anterior muestra un formulario con dos campos de entrada, para recoger el nombre y el correo electr\u00f3nico del usuario. Cuando se pulsa el bot\u00f3n de Checkout<\/strong>, se invoca el m\u00e9todo initiatePayment<\/code> para enviar la solicitud de pago al backend.<\/p>\n
    Solicita el punto final que has pasado al componente y env\u00eda la informaci\u00f3n del cliente y los art\u00edculos del carrito como parte de la solicitud, luego redirige al usuario a la URL recibida del servidor. Esta URL llevar\u00e1 al usuario a una p\u00e1gina de pago alojada en el servidor de Stripe. M\u00e1s adelante te ocupar\u00e1s de la construcci\u00f3n de esta URL.<\/p>\n
    Nota:<\/strong> Este componente utiliza la variable de entorno VITE_SERVER_BASE_URL<\/code> para la URL del servidor backend. Establ\u00e9cela creando un archivo .env<\/strong> en la ra\u00edz de tu proyecto:<\/p>\n
    VITE_SERVER_BASE_URL=http:\/\/localhost:8080<\/a><\/code><\/pre>\n
    Todos los componentes han sido creados. Ahora, vamos a construir la ruta de pago alojado utilizando los componentes. Para ello, crea un nuevo archivo HostedCheckout.tsx<\/strong> en tu carpeta de routes<\/strong> con el siguiente 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
    Esta ruta utiliza los tres componentes que acabas de construir para montar una pantalla de pago. Todos los modos de los componentes est\u00e1n configurados como checkout<\/strong>, y se proporciona el endpoint \/checkout\/hosted<\/code> al componente del formulario para iniciar la solicitud de checkout con precisi\u00f3n.<\/p>\n
    El componente utiliza un objeto Products<\/code> para rellenar la matriz de elementos. En el mundo real, estos datos proceden de la API de tu carrito, y contienen los art\u00edculos seleccionados por el usuario. Sin embargo, para este tutorial, una lista est\u00e1tica de un script rellena el array. Define la matriz creando un archivo data.ts<\/strong> en la ra\u00edz de tu proyecto frontend y almacenando el siguiente c\u00f3digo en \u00e9l:<\/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
    Este archivo define dos elementos en la matriz de productos que se muestran en el carrito. Puedes modificar tranquilamente los valores de los productos.<\/p>\n
    Como \u00faltimo paso en la construcci\u00f3n del frontend, crea dos nuevas rutas para gestionar el \u00e9xito y el fracaso. La p\u00e1gina de pago alojada en Stripe redirigir\u00e1 a los usuarios a tu aplicaci\u00f3n por estas dos rutas en funci\u00f3n del resultado de la transacci\u00f3n. Stripe tambi\u00e9n proporcionar\u00e1 a tus rutas la carga \u00fatil relacionada con la transacci\u00f3n, como el ID de sesi\u00f3n de pago, que puedes utilizar para recuperar el objeto de sesi\u00f3n de pago correspondiente<\/a> y acceder a los datos relacionados con el pago, como el m\u00e9todo de pago, los detalles de la factura, etc.<\/p>\n
    Para ello, crea un archivo Success.tsx<\/strong> en el directorio src\/routes<\/strong> y guarda en \u00e9l el siguiente c\u00f3digo:<\/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
    Al renderizarse, este componente muestra el mensaje \u00ab\u00a1Success!\u00bb e imprime en pantalla cualquier par\u00e1metro de consulta de la URL. Tambi\u00e9n incluye un bot\u00f3n para redirigir a los usuarios a la p\u00e1gina de inicio de la aplicaci\u00f3n.<\/p>\n
    Cuando construyas aplicaciones para el mundo real, esta p\u00e1gina es donde gestionar\u00e1s las transacciones no cr\u00edticas del lado de la aplicaci\u00f3n que dependan del \u00e9xito de la transacci\u00f3n en cuesti\u00f3n. Por ejemplo, si est\u00e1s creando una p\u00e1gina de pago para una tienda online, podr\u00edas utilizar esta p\u00e1gina para mostrar una confirmaci\u00f3n al usuario y un tiempo estimado de entrega de los productos adquiridos.<\/p>\n
    A continuaci\u00f3n, crea un archivo Failure.tsx<\/strong> con el siguiente 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
    Este componente es similar al de Success.tsx<\/strong> y muestra el mensaje \u00ab\u00a1Failure!\u00bb cuando se procesa.<\/p>\n