<form>
            <h1>Checkout</h1>
            <span>Enter your payment details below</span>
            <input
                type="email"
                id="email"
                value="d@d.com"
                placeholder="Email"
            />
            <input
                type="names"
                id="names"
                value="Adedeji Richards"
                placeholder="Names"
            />
            <input
                type="phone"
                id="phone"
                value="08065627281"
                placeholder="Phone number"
            />
            <hr />
            <input
                type="amount"
                id="amount"
                value="200"
                placeholder="0.00"
            />
            <button type="button" id="paynow">Pay now </button>
        </form>

        <div id="PaymentContainer" > </div >
    
    
        window.addEventListener("load", (event) => {
            const paynowButton = document.getElementById("paynow");
            const container = document.getElementById("container");

            paynowButton.addEventListener("click", () => {
                var names = document.getElementById("names").value;
                const email = document.getElementById("email").value;
                const phone = document.getElementById("phone").value;
                const amount = document.getElementById("amount").value;
                names = names ? names.split(" ") : names;
                paymentNowHandler({ names, email, phone, amount });
            });

            function paymentNowHandler(args) {
                
                Fountainpay.setup({
                    key: "FP-PUBK-176652724741666084319038",
                    tnxRef: "" + Math.floor(Math.random() * 1000000000 + 1),
                    amount: args.amount,
                    currency: "566",
                    narration:'Buy iPhone',
                    customer: {
                        email: args.email,
                        phoneNo: args.phone,
                        lastName: args.names[0],
                        otherName: args.names[1] || "",
                    },

                    metadata: {
                        container: "",
                        minimized: false,
                        theme: {
                            disableDarkMode: false,
                            mode: "light",
                        },
                    },
                    callback: function (response) {
                        alert(JSON.stringify(response));
                    },
                    close: function (error) {
                        alert(error);
                    },
                });
            }
        });