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
- Paystack Account
- Personal Paystack public key
- 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: 'customer@email.com',
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: "+2348012345678"
}
]
},
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.
Top comments (0)