"use client"; import Script from "next/script"; import { createContext, useContext, useState } from "react"; type SDKLoadState = "none" | "loading" | "error" | "success"; type SDKForPaymentMethod = "klarna" | "afterpay" | "clearpay" | "applepay"; type SDKName = "klarna" | "afterpay" | "applepay"; interface PaymentSDKState { klarna: SDKLoadState; afterpay: SDKLoadState; applepay: SDKLoadState; } interface PaymentContextProps { loadSdk: (method:string) => void; getSDKState: (method:SDKForPaymentMethod) => SDKLoadState | undefined; loadSDKState: PaymentSDKState; } const klarnaSDKURL = "https://x.klarnacdn.net/kp/lib/v1/api.js"; const afterpaySDKURL = process.env.NEXT_PUBLIC_APP_ENV === "production" ? "https://portal.afterpay.com/afterpay.js" : "https://portal.sandbox.afterpay.com/afterpay.js"; const applepaySDKURL = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js"; const PaymentSDKContext = createContext(null); const normalizeSDKName = (method:string):SDKName| undefined =>{ switch(method){ case "clearpay": case "afterpay": return "afterpay"; case "klarna": return "klarna"; case "applepay": return "applepay"; default: return undefined; } } export function PaymentSDKProvider({ children }: { children:React.ReactNode; }){ const [loadSDKState, setLoadSDKState] = useState({ klarna: 'none', // none loading error success afterpay: 'none', // none loading error success applepay: 'none' // none loading error success }); const loadSdk = (method:string) => { const m = normalizeSDKName(method); if(m) { setLoadSDKState((prev) => { if(prev[m] !== "none") { return prev; } return { ...prev, [m]:"loading" }; }); } } const onSdkLoad = (m:SDKName) => { setLoadSDKState((prev) => { return { ...prev, [m]: 'success' } }); }; const onSdkError = (m:SDKName) => { setLoadSDKState((prev) => { return { ...prev, [m]: 'error' } }); }; const getSDKState = (method:SDKForPaymentMethod) => { const m = normalizeSDKName(method); if(m) { return loadSDKState[m]; } else { return undefined; } } return ( {loadSDKState.klarna !== "none" &&