feat: wip -> integrate Culqi payment gateway in Checkout component

Author: diegotc86

src/routes/checkout/index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { X } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { redirect, useNavigation, useSubmit } from "react-router";
 import { z } from "zod";
@@ -116,6 +117,7 @@ export default function Checkout({ loaderData }: Route.ComponentProps) {
   const navigation = useNavigation();
   const submit = useSubmit();
   const loading = navigation.state === "submitting";
+  const [Culqui, setCulqui] = useState(null);
 
   const {
     register,
@@ -138,14 +140,95 @@ export default function Checkout({ loaderData }: Route.ComponentProps) {
     mode: "onTouched",
   });
 
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = "https://js.culqi.com/checkout-js";
+    script.async = true;
+    script.onload = () => {
+      // Aqui ya existe window.CulqiCheckout
+      const settings = {
+        title: "FullStock",
+        currency: "USD",
+        amount: total * 100, // Este parámetro es requerido para realizar pagos yape(80.00)
+        // order: "ord_live_d1P0Tu1n7Od4nZdp", // Este parámetro es requerido para realizar pagos con pagoEfectivo, billeteras y Cuotéalo
+        // xculqirsaid: "Inserta aquí el id de tu llave pública RSA",
+        // rsapublickey: "Inserta aquí tu llave pública RSA",
+      };
+
+      const paymentMethods = {
+        // las opciones se ordenan según se configuren
+        tarjeta: true,
+        yape: false,
+        billetera: false,
+        bancaMovil: false,
+        agente: false,
+        cuotealo: false,
+      };
+
+      const options = {
+        lang: "auto",
+        installments: true, // Habilitar o deshabilitar el campo de cuotas
+        modal: true,
+        // container: "#culqi-container", // Opcional - Div donde quieres cargar el checkout
+        paymentMethods: paymentMethods,
+        paymentMethodsSort: Object.keys(paymentMethods), // las opciones se ordenan según se configuren en paymentMethods
+      };
+
+      const appearance = {
+        theme: "default",
+        hiddenCulqiLogo: false,
+        hiddenBannerContent: false,
+        hiddenBanner: false,
+        hiddenToolBarAmount: false,
+        hiddenEmail: false,
+        menuType: "select", // sidebar / sliderTop / select
+        buttonCardPayText: "Pagar", //
+        logo: null, // 'http://www.childrensociety.ms/wp-content/uploads/2019/11/MCS-Logo-2019-no-text.jpg',
+        defaultStyle: {
+          bannerColor: "blue", // hexadecimal
+          buttonBackground: "yellow", // hexadecimal
+          menuColor: "pink", // hexadecimal
+          linksColor: "green", // hexadecimal
+          buttonTextColor: "blue", // hexadecimal
+          priceColor: "red",
+        },
+      };
+
+      const config = {
+        settings,
+        // client,
+        options,
+        appearance,
+      };
+
+      const publicKey = "pk_test_Ws4NXfH95QXlZgaz";
+      // @ts-ignore
+      const Culqi = new window.CulqiCheckout(publicKey, config);
+
+      setCulqui(Culqi);
+
+      console.log("Script loaded");
+    };
+
+    document.body.appendChild(script);
+
+    // Cleanup function
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
+
   async function onSubmit(formData: CheckoutForm) {
-    submit(
-      {
-        shippingDetailsJson: JSON.stringify(formData),
-        cartItemsJson: JSON.stringify(cart.items),
-      },
-      { method: "POST" }
-    );
+    // submit(
+    //   {
+    //     shippingDetailsJson: JSON.stringify(formData),
+    //     cartItemsJson: JSON.stringify(cart.items),
+    //   },
+    //   { method: "POST" }
+    // );
+    if (Culqui) {
+      Culqui.open();
+    }
   }
 
   return (