Integrate vaultera switch SDK to your HTML Web App using vaultera switch-node Before following these steps, please configure your payment methods. Use this guide to integrate vaultera switch SDK to your HTML app. You can also use the demo app as a reference with your vaultera switch credentials to test the setup.

​
1. Setup the Server

Follow the Server Setup section.

​
2. Build Checkout Page on the Client

​
2.1 Load HyperLoader

Use HyperLoader to ensure PCI compliant means of accepting payment details from your customer and sending it directly to the vaultera switch server. Always load HyperLoader from https://sdk.staging.switch.vaultera.co to ensure compliance. Please refrain from including the script in a bundle or hosting it yourself. 
<script src="https://sdk.staging.switch.vaultera.co"></script>
This is for the staging environment. For the production environment, use the following URL: 
<script src="https://sdk.switch.vaultera.co"></script>

​
2.2 Define the Payment Form

This step is recommended for the Unified Checkout for an enhanced user experience. In case you are integrating Express Checkout (mentioned later below), this step is not required. Add one empty placeholder div to your checkout form for each Widget that you’ll mount. HyperLoader inserts an iframe into each div to securely collect the customer’s email address and payment information. 
<form id="payment-form">
  <div id="vaultera-checkout">
    <!--Vaultera Switch SDK injects the Unified Checkout-->
  </div>
</form>

​
2.3 Initialize Vaultera Switch SDK

Initialize Vaultera Switch SDK onto your app with your publishable key using the Hyper constructor. You’ll use HyperLoader to create the Unified Checkout and complete the payment on the client. To get a Publishable Key, please find it here. 
const hyper = Switch("YOUR_PUBLISHABLE_KEY", {
  customBackendUrl: "YOUR_BACKEND_URL",
});

​
Unified Checkout

​
2.4 Fetch the Payment and Create the Unified Checkout

Immediately make a request to the endpoint on your server to create a new Payment as soon as your checkout page loads. The clientSecret returned by your endpoint is used to complete the payment. Important: Make sure to never share your API key with your client application as this could potentially compromise your payment flow. Following this, create a unifiedCheckout and mount it to the placeholder div in your payment form. This embeds an iframe with a dynamic form that displays configured payment method types available from the Payment, allowing your customer to select a payment method. The form automatically collects the associated payment details for the selected payment method type. 
<form id="payment-form">
    <div id="vaultera-checkout">
        <!--HyperLoader injects the Unified Checkout-->
    </div>
</form>

<script>
    const vaultera_switch = Switch("<PUBLISHABLE_KEY>", {
        customBackendUrl: "https://api.staging.switch.vaultera.co",
    });

    async function initialize() {
        const response = await fetch("http://<SERVER_BACKEND_URL>/create-payment", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ items: [{ id: "xl-tshirt" }], country: "US" }),
        });
        const jsonResponse = await response.json();

        widgets = vaultera_switch.widgets({ clientSecret: jsonResponse.client_secret });

        const unifiedCheckoutOptions = {
            layout: "tabs",
            wallets: {
                walletReturnUrl: "https://<CHECKOUT_PAGE_URL>/complete"
            },
            sdkHandleConfirmPayment: {
                handleConfirm: true,
                buttonText: "Pay Now",
                confirmParams: {
                    return_url: "https://<CHECKOUT_PAGE_URL>/complete",
                },
            },
        };

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

    initialize();
</script>

​
3. Complete Payment on the Client

​
3.1 Handle the Submit Event and Complete the Payment

Note: This step is not required if sdk is handling the payment button click, this is how it will be if you have followed the previous steps. Listen to the form’s submit event to know when to confirm the payment through the Switch API. Call confirmPayment(), passing along the unifiedCheckout and a return_url to indicate where Switch should redirect the user after they complete the payment. Hyper redirects the customer to an authentication page depending on the payment method. After the customer completes the authentication process, they’re redirected to the return_url. 
async function handleSubmit(e) {
  setMessage("");
  e.preventDefault();

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

  const { error, status } = await hyper.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);
}
Also, if there are any immediate errors (for example, your customer’s card is declined), HyperLoader returns an error. Show that error message to your customer so they can try again.

​
3.2 Display a Payment Status Message

When Hyper redirects the customer to the return_url, the payment_intent_client_secret query parameter is appended by HyperLoader. Use this to retrieve the Payment to determine what to show to your customer. 
// 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 hyper.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;
  }
}
Important: Please retrieve the payment status from the vaultera switch backend to get the terminal status of the payment. Do not rely solely on the status returned by the SDK, as it may not always reflect the final state of the transaction.

​
Congratulations!

Now that you have integrated the vaultera switch SDK on your app, you can customize the payment elements to blend with the rest of your app.