How to Integrate Paystack Payment into your Project with HTML and JavaScript

Paystack is a modern payment gateway solution for Africa, The Paystack API allows you access to a lot of payment features on the platform via your Paystack dashboard.

Requirements

1. Paystack Account
2. Personal Paystack public key
3. A basic know-how of HTML and JavaScript

Sign up with Paystack

• Go through the sign up process and log in into your account.

• Click the setting tap.

• Click on the "API Keys & Webhooks" tab to reveal your API keys.

• We'll be using the Test Public Key, so copy it.

Create HTML file

• Create the pay button
  <div class="check-out">
<button>Pay</button>
</div>

• Add the inline script
  we have to create a link to the Paystack’s javascript library with the below code added to your HTML body.

<script src="https://js.paystack.co/v1/inline.js"></script>
<script src="checkOut.js"></script>


Create JavaScript file

We'll finalize our payment setup with the paystack's payment modal

const checkOut = document.querySelector('.check-out button');

checkOut.addEventListener('click', function payWithPaystack() {

    var handler = PaystackPop.setup({
        key: 'Paste_your_API_KEY_here',
        email: '[e-mail]',
        amount: `1000000`, //amount here is 10,000 double zeros has to be added
        metadata: {
            custom_fields: [
                {
                    display_name: "mobile Number",
                    variable_name: "Mobile Number",
                    value: "[phone]"
                }
            ]
        },

        callback: function (response) {
            alert('transaction is ' + response.reference);
        },

        onclose: function(){
            alert('transaction cancelled');
        }

    });

    handler.openIframe();//to call the paystack payment interface
})

Use the public key not the secret key.
modify the code to fit into your project needs.

Here's a preview if everything goes well.