<form id="payment-form">
  <div id="vaultera-checkout">
    <!--Vaultera SDK injects the Checkout-->
  </div>
  <button id="submit">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</span>
  </button>
  <div id="payment-message" class="hidden"></div>
</form>

// Fetches a payment intent and captures the client secret
async function initialize() {
  const response = await fetch("/create-payment", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ currency: "USD", amount: 100 }),
  });
  const { clientSecret } = await response.json();
  
  // Initialize Hyperloader.js
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "https://sdk.test.switch.vaultera.co";
 
  let switch; 
  script.onload = () => {
    Switch = window.Switch("YOUR_PUBLISHABLE_KEY", {
      customBackendUrl: "YOUR_BACKEND_URL",
      // You can configure this as an endpoint for all the API calls such as session, payments, confirm call.
    });
    
    const appearance = {
      theme: "midnight",
    };
    
    const widgets = switch.widgets({ appearance, clientSecret });
    
    const unifiedCheckoutOptions = {
      layout: "tabs",
      wallets: {
        walletReturnUrl: "https://example.com/complete",
        // Mandatory parameter for Wallet Flows such as Google Pay, PayPal, and Apple Pay
      },
    };
    
    const unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
    unifiedCheckout.mount("#unified-checkout");
  };
  
  document.body.appendChild(script);
}

const unifiedCheckout = widgets.create("payment", unifiedCheckoutOptions);
unifiedCheckout.mount("#unified-checkout");

unifiedCheckout.onSDKHandleClick(() => {
  // Add any custom logic for when the payment button is clicked, such as logging or tracking
  console.log("On Click Wallets");
});

unifiedCheckout.on("completeDoThis", () => {
  console.log("On Payment Complete");
  // Add any custom post-payment logic here, such as redirection or displaying a success message
});

async function handleSubmit(e) {
  setMessage("");
  e.preventDefault();

  if (!switch || !widgets) {
    return;
  }
  setIsLoading(true);

  const { error, status } = await switch.confirmPayment({
    widgets,
    confirmParams: {
      // Make sure to change this to your payment completion page
      return_url: "https://example.com/complete",
    },
    redirect: "always", // if you wish to redirect always, otherwise it is defaulted to "if_required"
  });

  if (error) {
    if (error.type === "card_error" || error.type === "validation_error") {
      setMessage(error.message);
    } else {
      if (error.message) {
        setMessage(error.message);
      } else {
        setMessage("An unexpected error occurred.");
      }
    }
  }
  if (status) {
    handlePaymentStatus(status); // handle payment status
  }
  setIsLoading(false);
}

// Fetches the payment status after payment submission
async function checkStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const { payment } = await switch.retrievePayment(clientSecret);

  Switch (payment.status) {
    case "succeeded":
      showMessage("Payment succeeded!");
      break;
    case "processing":
      showMessage("Your payment is processing.");
      break;
    case "requires_payment_method":
      showMessage("Your payment was not successful, please try again.");
      break;
    default:
      showMessage("Something went wrong.");
      break;
  }
}

// Source Hyperloader on your HTML file using the <script /> tag
switch = Switch.init("YOUR_PUBLISHABLE_KEY", {
    customBackendUrl: "YOUR_BACKEND_URL",
    //You can configure this as an endpoint for all the api calls such as session, payments, confirm call.
});

// iOS implementation example

// Android implementation example

// Flutter implementation example

// React Native implementation example

paymentSession?.initPaymentSession(paymentIntentClientSecret: paymentIntentClientSecret)

// Android implementation example

// JavaScript implementation example

// Flutter implementation example

// React Native implementation example

private var handler: PaymentSessionHandler?
 
func initSavedPaymentMethodSessionCallback(handler: PaymentSessionHandler) -> Void {
    self.handler = handler
}
    
@objc func launchHeadless(_ sender: Any) {
    hyperViewModel.paymentSession?.getCustomerSavedPaymentMethods(initSavedPaymentMethodSessionCallback)
    getDefault.isEnabled = true
    getLast.isEnabled = true
    getData.isEnabled = true
}
    
@objc func getCustomerDefaultSavedPaymentMethodData(_ sender: Any) {
    let paymentMethod = self.handler?.getCustomerDefaultSavedPaymentMethodData()
}

// Android implementation example

// JavaScript implementation example

// Flutter implementation example

// React Native implementation example