A Guide to Seamlessly Integrating the PayBox Widget into Your Website (Part1)

Julius | Sept. 2, 2023, 8:13 a.m.

Hello SmartDev Family ,Julius here, and I'm back with another quick and informative article. Today, we’re diving into a topic that’s all about enhancing your website’s functionality and user experience. If you’ve ever wondered how to seamlessly integrate the PayBox widget into your website, you’re in the right place. In this short guide, I’ll walk you through the simple steps to make the integration process a breeze. So, let’s get started and take your website’s features up a notch with PayBox!

So without wasting much time let’s get to work.

For those who don’t know what PayBox is:
“PayBox is a versatile payment gateway that allows you to easily add payment functionality to your website. It’s like a handy little widget that you can integrate into your site, enabling your users to make payments securely and conveniently. With PayBox, you can offer a smooth and hassle-free payment experience for your customers, making transactions a breeze while boosting the overall usability of your website”

STEP 1:
Visit PayBox official website and read through and get to know what they are

PayBox website https://payabox.com.co

STEP 2:
You will need to create an account with Paybox, you can do that by clicking here, this takes you the register page of Paybox, it is very easy to setup, Input the create credentials and you are good to go .

Create an account with paybox https://paybox.com.co/register

Step 3:

Let’s talk about adding the widget, visit the PayBox widget documentation here, this is a simple documentation that will guide you to integrate PayBox widget into your website,

PayBox widget documentation

Step 4:
Embed the widget script tag into you html page, you can see it below , just copy and past it under your code before the closing body tag </body> of you website,

<!-- embed script -->
<script src="https://widget.paybox.com.co/js/app.js" defer></script>

Step 5 :

Add the PayBox tag to the product you want to be receiving payment for.

<paybox-button-widget  merchant-key="demo" total="10.99" currency="GHS"> Basic PayBox Button 
</paybox-button-widget>

make sure you put in a real merchant key in the code, and make sure it is not really visible and exposed in your code just like that.

you can find your merchant key on you PayBox dashboard

paybox dashboard

Click on Add services

You will see your merchant Id, copy and replace it in your code where it says merchant key .

for the pricing you can change it and add the price of the product over there.

Take note you can let’s paybox work with your backend database so it passes the prices and other information to the paybox widget automatically,

This is part one .

Drop a comment if you get into a problem.

Thank you Bye..