Pay with Card - Memecoins

import { useEffect, useState } from 'react';
import Script from 'next/script';
import Image from 'next/image';
import { Spinner } from '@/components/ui/spinner';

export function CheckoutComEmbedded({ embeddedCheckoutParameters }) {
  const { createOrder, order } = useOrder();
  const [isCheckoutReady, setIsCheckoutReady] = useState(false);
  const [isScriptLoaded, setIsScriptLoaded] = useState(false);

  useEffect(() => {
    async function initiateOrder() {
      try {
        await createOrder(embeddedCheckoutParameters);
      } catch (error) {
        console.error("Failed to create order:", error);
      }
    }

    initiateOrder();
  }, [embeddedCheckoutParameters, createOrder]);

  useEffect(() => {
    if (order == null) {
      return;
    }

    console.log("order", order);
  }, [order]);

  useEffect(() => {
    if (order == null) {
      return;
    }

    const initializeCheckout = async () => {
      try {
        if (typeof window.CheckoutWebComponents !== 'function') {
          console.error('CheckoutWebComponents not loaded properly');
          return;
        }

        const checkout = await window.CheckoutWebComponents({
          appearance: {
            colorBorder: "#FFFFFF",
            colorAction: '#060735',
            borderRadius: ["8px", "50px"],
          },
          publicKey: order.payment.preparation.checkoutcomPublicKey,
          environment: "sandbox", // Change to "live" for production
          locale: "en-US",
          paymentSession: order.payment.preparation.checkoutcomPaymentSession,
          cors: {
            mode: 'no-cors',
            credentials: 'same-origin'
          },
          onReady: () => {
            console.log("Flow is ready");
            setIsCheckoutReady(true);
          }, // checkout.com takes a second to load, so need to wait for it to render
          onPaymentCompleted: (component, paymentResponse) => {
            console.log("Payment completed with ID:", paymentResponse.id);
          },
          onChange: (component) => {
            console.log(`Component ${component.type} validity changed:`, component.isValid());
          },
          onError: (component, error) => {
            console.error("Payment error:", error, "Component:", component.type);
          },
        });

        const flowComponent = checkout.create("flow");
        const container = document.getElementById("flow-container");
        if (container) {
          flowComponent.mount(container);
        }
      } catch (error) {
        console.error("Error initializing checkout:", error);
      }
    };

    // Initialize checkout when the script is loaded and payment session exists
    const scriptElement = document.querySelector('script[src*="checkout-web-components"]');
    if (scriptElement) {
      initializeCheckout();
    }
  }, [order]);

  if (!order) {
    return (
      <div className="w-full max-w-[400px] sm:max-w-[600px] md:max-w-[800px] mx-auto px-6 md:px-10">
        <div className="bg-white p-6 md:p-10 rounded-lg">
          <div className="flex flex-col items-center justify-center py-10">
            <Spinner size="large" />
            <p className="text-muted-foreground mt-4">Loading checkout...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="w-full max-w-[400px] sm:max-w-[600px] md:max-w-[800px] mx-auto px-6 md:px-10">
      <div className="bg-white p-6 md:p-10 rounded-lg">
        <Script
          src="https://checkout-web-components.checkout.com/index.js"
          strategy="afterInteractive"
          onLoad={() => {
            console.log("Checkout.com script loaded");
            setIsScriptLoaded(true);
          }}
          onError={(e) => {
            console.error("Error loading Checkout.com script:", e);
          }}
        />
        <div className="flex-grow">
          <div id="flow-container" className="w-full"></div>
        </div>
        {isCheckoutReady && (
          <div className="text-center mt-4 text-sm" style={{ color: 'rgb(102, 102, 102)' }}>
            <p>
              By continuing, you accept{' '}
              <Image
                src="/crossmint-logo.svg"
                alt="Crossmint"
                width={16}
                height={16}
                className="inline-block mx-1"
              />
              <a
                href="https://www.crossmint.com/legal/terms-of-service"
                target="_blank"
                rel="noopener noreferrer"
                className="underline hover:text-gray-800"
              >
                Crossmint's terms
              </a>
            </p>
          </div>
        )}
      </div>
    </div>
  );
}

// Add this to your global declarations
declare global {
  interface Window {
    CheckoutWebComponents: any;
  }
}

// Example of handling the payment completion
onPaymentCompleted: (component, paymentResponse) => {
  console.log("Payment completed with ID:", paymentResponse.id);
  // Update your UI to show payment success
  setPaymentStatus('success');
  // Proceed to the next step (e.g., order confirmation)
  navigateToOrderConfirmation(orderId);
},

onError: (component, error) => {
  console.error("Payment error:", error, "Component:", component.type);
  // Update your UI to show payment failure
  setPaymentStatus('error');
  // Display error message to the user
  setErrorMessage(error.message || 'Payment failed. Please try again.');
},

{
    "id": "order_xyz",
    "status": "completed",
    "phases": {
        "quote": { "status": "completed" },
        "payment": { "status": "completed" },
        "delivery": { "status": "completed", "details": "Memecoins delivered to specified wallet" }
    }
}

{
    "order": {
        "payment": {
            "status": "completed",
            "refunded": {
                "amount": "1.00",
                "currency": "usd",
                "txId": "0x1234abcd...",
                "chain": "ethereum"
            }
        }
    }
}

async refreshOrder(orderId, clientSecret) {
  try {
    const ancestorOrigins = typeof window !== 'undefined' && window.location?.ancestorOrigins
      ? Array.from(window.location.ancestorOrigins)
      : [];

    const response = await this.callApi(`2022-06-09/orders/${orderId}/refresh`, "POST", {}, {
      "authorization": `${clientSecret}`,
      "x-ancestor-origins": JSON.stringify(ancestorOrigins)
    });

    const parsed = await response.json();
    return parsed;
  } catch (error) {
    console.error("Error refreshing quote:", error);
    throw error;
  }
}