Hyper Widget

//payment gateways
var gateways = [
    {type:"card",gatewayId:"<your-gateway-id>"},
    {type:"zipPay",gatewayId:"<zipPay-gateway-id>"},
    {type:"stripeGP",gatewayId:"<googlepay-gateway-id>"},
    {type:"stripeAP",gatewayId:"<applepay-gateway-id>"},
]

//Hyper config
var config = {
    //remove useSandbox declaration for production
    publicKey:"<hyper-public-key>",
    useSandbox: true,
    gateways: gateways,
};

document.addEventListener("DOMContentLoaded", function (event) {
    var widget = hyper.initWidget(config);
    // continue widget configuration
    // ....
});

document.addEventListener("DOMContentLoaded", function (event) {
    var widget = hyper.initWidget(config);
    // continue widget configuration
    // ....
    widget.onApprove = function(res) {
        //replace this with code to handle successful pay authroization
        console.log('Response:', res);
    };
});

document.addEventListener("DOMContentLoaded", function (event) {
    var widget = hyper.initWidget(config);
    // continue widget configuration
    // ....
    //if a valid user profile is available, it can be used to optimize the checkout experience
    widget.onValidPreference = function(data) {
        //select the preferred product from the card
        console.log('Preferred SKU:', data.sku);
    };
});

document.addEventListener("DOMContentLoaded", function (event) {
    var widget = hyper.initWidget(config);
    // continue widget configuration
    // ....
    //when an unrecoverable error occurs
    widget.onError = function(err) {
        //cutomize this section to take recovery action
        console.log('Error occurred:', err);
    };
});