How to enable users decide the amount to pay with the Web SDKs

[Kamal-Moha]

Hi there, I'm trying to create a checkout page whereby users have to enter the amount they want to pay before proceeding.

I have managed to use the starter HTML & Node Web SDK which rendered properly. But unfortunately, I see it has a product with a fixed amount of 13USD.

I have found it difficult to edit this in order to fit my needs of asking users to add money to pay before checking out. I have managed to create the frontend of how I want things to be with user input. My issue is passing user input into the Hyperswitch payment intent.

Here's my checkout.js file

const pub_key = "pk_snd_a***************ab47245" 
var thank_you_page = "https://livescore.com/"

// replace the test publishable key with your hyperswitch publishable key
const hyper = Hyper(pub_key);

const items = [{ product_id: "A113" }];

// background color to match sdk theme
const backgroundColor = (theme) => {
  if (theme === "brutal") return "#ff00c533";
  else if (theme === "midnight") return "#1A1F36";
  else if (theme === "soft") return "#3E3E3E";
  else return "#ddd8d812";
};

let elements;

// initialize();
// checkStatus();


document.getElementById('collect-user-amount').addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent default form submission

  const amount_value = document.getElementById('amount-input').value;

  if (amount_value <= 0) {
      document.getElementById('error-message').innerText = 'Please enter a valid amount.';
      return;
  }

  // Proceed to checkout process
  initialize(amount_value);
  checkStatus();
});


document
  .querySelector("#payment-form")
  .addEventListener("submit", handleSubmit);

var emailAddress = "";



async function initialize(amount) {

  const response = await fetch("/create-payment-intent", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({amount}), // Using the amount from user input

  });
  const { clientSecret } = await response.json();

  const appearance = {
    theme: "default", // Theme - default, soft, brutal, midnight, none, charcoal
  };

  document.body.style.background = backgroundColor(appearance.theme);
  elements = hyper.elements({ appearance, clientSecret });

  const paymentElementOptions = {
    layout: "tabs",
  };

  const paymentElement = elements.create("payment", paymentElementOptions);
  paymentElement.mount("#payment-element");
}

async function handleSubmit(e) {
  e.preventDefault();
  setLoading(true);

  const { error } = await hyper.confirmPayment({
    elements,
    confirmParams: {
      return_url: thank_you_page,
      receipt_email: emailAddress,
    },
    redirect: "always",
  });

  if (error.type === "card_error" || error.type === "validation_error") {
    showMessage(error.message);
  } else {
    showMessage("An unexpected error occurred.");
  }

  setLoading(false);
}

async function checkStatus() {
  const clientSecret = new URLSearchParams(window.location.search).get(
    "payment_intent_client_secret"
  );

  if (!clientSecret) {
    return;
  }

  const { paymentIntent } = await hyper.retrievePaymentIntent(clientSecret);

  switch (paymentIntent.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;
  }
}

function showMessage(messageText) {
  const messageContainer = document.querySelector("#payment-message");

  messageContainer.classList.remove("hidden");
  messageContainer.textContent = messageText;

  setTimeout(function () {
    messageContainer.classList.add("hidden");
    messageText.textContent = "";
  }, 4000);
}

function setLoading(isLoading) {
  if (isLoading) {
    document.querySelector("#submit").disabled = true;
    document.querySelector("#spinner").classList.remove("hidden");
    document.querySelector("#button-text").classList.add("hidden");
  } else {
    document.querySelector("#submit").disabled = false;
    document.querySelector("#spinner").classList.add("hidden");
    document.querySelector("#button-text").classList.remove("hidden");
  }
}

Here's the checkout.html page;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Accept a payment</title>
    <meta name="description" content="A demo of a payment on Hyperswitch" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="checkout.css" />
    <script src="https://beta.hyperswitch.io/v1/HyperLoader.js"></script>
    <script src="checkout.js" defer></script>
  </head>
  <body>

    <form id="collect-user-amount">
        <input type="number" id="amount-input" placeholder="Enter amount" required>
        <input type="submit", value="Preview">
    </form>


    <form id="payment-form">

      <div id="payment-element"></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>
  </body>
</html>

Here's the server.js file;

const express = require("express");
const app = express();
const api_key = "snd_Py8uBnw7lemsfwvVa8H4YLe7MMOFvOdnItANEfjh448qksfbjqSYKgE4ZJVjPijb"

// replace the test api key with your api publishable key
const hyper = require("@juspay-tech/hyperswitch-node")(
  api_key
);

app.use(express.static("public"));
app.use(express.json());


const calculateAmount = (items) => {
  // calculate the order amount using request
  // return 1300;
  return amount_value;
  
};

app.post("/create-payment-intent", async (request, response) => {
  const { amount } = request.body;

  //create a payment using amount, currency, metadata etc.
  const paymentIntent = await hyper.paymentIntents.create({
    amount: calculateAmount(amount),
    // amount: amount,
    currency: "USD",
  });

  //return clientSecret to initiate payment flow at the client
  response.send({
    clientSecret: paymentIntent.client_secret,
  });
});

app.listen(4242, () => console.log("Node server listening on port 4242!"));

Please help me create this checkout pge with this customizations. Thanks