We have a javascript SDK to make your work seamless and run all necessary process on your website.

CDN URL for Payfonte javascript SDK is https://cdn.payfonte.com/payfonte.min.js

Check the code snippet below

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Payfonte SDK</title>
</head>
<body class="main-layout">
<button onclick="showCheckout()">Pay 1000.00</button>
<script src="https://cdn.payfonte.com/payfonte.min.js"></script>
<script>
    function showCheckout() {
        const handler = new Payfonte({
            isProduction: false, //can be true of false
            reference: "{{reference}}", //if you have your own transactionId you want to track this payment with
            clientId: "{{client-id}}",  //required, Your client-id
            amount: 100000, //required Amount in the lowest denominator. If no lower denominator multiply by 100 e.g amount * 100
            metadata: {}, //your data that will come back with the event
            currency:"NGN",
            country:"NG",
            customer: {
                name:"John Doe",
                email: "[email protected]",
                phoneNumber: "23470xxxxxx"
            },
            metadata:{ //other data you need to comeback with the webhook
            }
            callback: (data) => {
                console.log("payfonte callback", data, data.reference);
            },
            onClose: () => {
                console.log("Modal Close Event");
            }
        });

        handler.setup();
        handler.openIframe();
    }
</script>
</body>
</html>