How to integrate Paystack on e-commerce websites

How to integrate PayStack payment gateway into websites

Do you have an e-commerce website looking for how you can integrate a Paystack payment gateway on it so your customers can seamlessly pay for your service or product online (right on your website) without manually sending the payment to your account?

Being one of Nigeria’s best payment gateways, Paystack can be used to receive and send money online using card details. Before you can securely receive payment from your customers via your website, first of all, you have to let your web developer integrate the payment gateway. You may see how we can set up a WordPress blog for you for free.

If your business is centered in the African region, the Paystack payment gateway is the surest best payment gateway you may integrate on your website. The good news is it can be integrated into any type of website.

How to integrate Paystack payment gateway in website

How to integrate a Paystack payment gateway into e-commerce websites

Regardless of the type of Content Management System that your website was created with, Paystack can be integrated into it to help you receive payment from your customers across Africa. You may see our expert guides on the WordPress content management system.

How secure is Paystack to integrated on my website while there are other payment gateways like PayPal which is known everywhere in the world. Don’t worry, PaySstack is a licensed organization established in Nigeria to carry out e-commerce financial services.

Now, I am going to discuss with you how to integrate a Paystack payment gateway to be able to receive payments from your customers via your website from anywhere they are in the world.

Read these also:

How to integrate Paystack on WordPress websites

WordPress is the most widely used CMS in the world, and as such, the technical teams at Paystack have worked hard to provide extensive support for the different plugins and frameworks mostly used on the platform.

One of the easiest methods to integrate Paystack on any WordPress website is using the WooCommerce plugin. Please follow the guides and instructions below.

To integrate Paystack on your WordPress website, first, you must have a Paystack merchant account, have an active WooCommerce plugin installed and your website must have a valid SSL Certificate. You may see our guide on how to use Cloudflare for an SSL certificate.

If you have these two things available on your WordPress website, you can start to integrate the Paystack payment gateway on your website. Please follow the instructions below:

  1. Go to your WordPress Admin > Plugins > Add New from the left-hand menu.
  2. In the search box type ”Paystack WooCommerce Payment Gateway”.
  3. Click on Install Now when you see Paystack WooCommerce Payment Gateway to install the plugin.
  4. After installation, activate the plugin.

Please note that creating a custom payment gateway using Paystack requires several steps, first, you must do payment gateway provider registration, register as a payment gateway provider with your credit card or that of your company, and lots more.

If you are a digital marketer predominantly doing online business in Africa, integrating the Paystack payment gateway on your website is very, very ideal because Paystack doesn’t charge people who use their service. Paystack only charges small fees only when your customer has successfully purchased something on your website.

After following the instructions we have shown to you in this post above and using them religiously, you will henceforth collect payments from customers using MasterCard, Visa, and Verve cards anywhere in the world.

How to integrate Paystack on Joomla

Paystack also allows you to receive payment on your Joomla site using their Joomla extensions. To get started, you need to find the right Paystack extension for your Joomla site because, at the moment, they have extensions for  Virtuemart, Icejoomla, and BreezingCommerce. 

Right now, I’ll discuss with you how to integrate the Paystack payment gateway on your website using Virtuemart. You can use same same processes below for all the other extensions because all the extensions are the same.

Installing Joomla Plugin

To get started, please click https://github.com/PaystackHQ/Joomla-VirtueMart-3-Paystack to download the Virtuemart Paystack plugin from Github, then click on the Clone or Download button and click the Download Zip button that shows in the pop-out. 

Next, go to your Joomla Dashboard >> Extensions >> Manage >> Install. On the tab on the Install page, select Upload Package File and upload the downloaded zip file. This would install and configure the plugin.

Install Virtuemart before Paystack plugin

Please ensure you have installed Virtuemart on your Joomla site before installing the Paystack Virtuemart plugin. Note that the Paystack Virtuemart plugin cannot work without Virtuemart.

Configure Paystack on Virtuemart

To set up Paystack on your Joomla Settings, click on Virtuemart and select Payment Methods.

On the next page that will open, you‘ll see the list of Payment methods available on your Virtuemart Plugin. To add Paystack, click on the New button at the top and fill in the form that follows.

Below are the fields that you need to fill in the form:

  1. Payment Name: Simply fill in the name “Paystack”
  2. Set Alias: Also enter “Paystack”
  3. Published: Set to Yes
  4. Payment Description: This is the text that describes this Payment option to the user on checkout. You can just enter “Pay with your Debit/Credit Card”
  5. Payment Method: Click on the dropdown and select VM Payment – Paystack from the options.
  6. Currency: Select Naira from the list in the dropdown

After that click on Save (7) on the top of the page. When the page saves, click on the Configuration tab (8). It will open the configuration page where you will be required to enter your API keys. You must save the Payment Method Information before clicking on the Configuration tab. If you don’t do that, you will not see the API Keys form.

Get your Test and Live API keys

There are 2 states on your dashboard; Live Mode and Test Mode. You’ll see the Test Mode/Live Mode toggle on the top right corner of your dashboard. 

If there is no toggle and it’s just Test Mode, this means that your Paystack account has not been activated. Please click here and follow the instructions to activate your account

When you go to the Settings Page to get your API keys, please note that the mode in which your dashboard is in will determine the keys that will be displayed, hence, if the dashboard is on Test Mode, you can only see the Test API keys and vice versaTo see the other Keys, switch the toggle from one mode to another.

At the top of this tab is the Test Mode dropdown. Paystack provides test parameters that allow you to simulate a transaction without using real money. If you select Yes, Paystack will be using your Test API keys to parse the payments, meaning that the orders processed then will be done with test cards, no real money is exchanged therefore no real value should be delivered.

If you do these things correctly, you should see Paystack in the list of payment options on checkout.

Read this also: how to open Kuda bank account step by step.

How to integrate Paystack on Shopify

Shopify is a website creator like Joomla or WordPress. If your website is launched by Shopify and wants to integrate the Paystack payment gateway on it, then follow the step-by-step instructions below;

  1. Visit the Shopify website where you can integrate the Paystack payment gateway by clicking here
  2. Then click “Install payment provider” when prompted.
  3. Scroll to the “Accept Paystack” section of the page and insert your Paystack Public Keys and Secret Keys in the fields highlighted.
  4. Note these keys are available on your Paystack dashboard, then Click “Activate”.
  5. If successful, then your online store can now accept payments using Paystack

Please note that Paystack processes the currency your business has been enabled for. If you want to enable other currency for your customers to pay you with, for example, US dollars, then just simply log in to your Paystack profile and enable it yourself.

How to integrate Paystack on Wix.com websites

Wix.com is a website creator/builder that helps people get online and create beautiful, professional websites and online stores. Depending on your business type, Wix.com also has lots of ready-to-go solutions to choose from. Paystack merchants can now collect payments through the following Wix apps:

  • Wix Stores: Wix Stores gives you all the tools you need to create a sleek, professional online store and grow your e-commerce business.
  • Wix Bookings: Wix Bookings offers a complete online scheduling software that allows clients to book appointments and services, and pay online.
  • Wix Events: With Wix Events, you can create events, list them on your site, manage RSVPs and guestlists, and sell tickets.
  • Wix Music: Wix Music gives you everything you need to list, promote, and sell your music commission-free.
  • Wix Videos: With Wix Videos, you can showcase your videos, engage your visitors, and monetize your content!

Unhappily, it is currently not possible to collect payments through Paystack for the following apps – Wix Hotels, Wix Restaurants, and Wix Pricing Plans (recurring payments).

With the integration of the Paystack payment gateway, you can accept payments for your products or services with Paystack on your Wix Store or Wix bookings website! To get started, just follow the instructions below: 

  1. Go to your Wix Dashboard.
  2. Go to Settings -> Accept Payments.
  3. Check the box for Paystack and click on the “Connect Me” button at the bottom of the page.
  4. You should see a modal popup saying you’ve successfully connected to Paystack. Close the modal, and click on “Set up an account to activate”.
  5. Click on “Connect an existing account” if you already have a Paystack account. Clicking “Create an account” will take you to Paystack to sign up for your account.
  6. On the next screen, enter your API keys. Wix only supports live mode at the moment, so please use your live API keys when connecting Paystack to your Wix account. Using your test keys will return an error.
  7. Click “Connect My Account” and you’re good to go! Your Paystack account is now connected to your Wix site.

Read this also: top best banks to open a domiciliary account within Nigeria (2024).

How to integrate Paystack on Opencart

Opencart is also one of the web builders that helps web designers set up any type of website stress-free. Here’s how to integrate payment with Paystack on your OpenCart online store.

Install Paystack
  • To get started, click here and download the Paystack OpenCart plugin.
  • When you extract the downloaded zip file, it should contain 2 folders; Admin and Catalog.
  • Upload both folders to the root of your OpenCart website, which also has its own Admin and Catalog folders.
  • Merge the Paystack plugin folders with the root folders so that the contents of the Plugin Admin and Catalog folders are contained in the root Admin and Catalog folders.
  • Please be careful not to replace the root folders with the plugin folders. This will crash your site. If you cannot merge the folders, follow their folder structures and place all the plugin files in the corresponding directories in the root folders.
  • Next, go to your OpenCart dashboard menu and select the  Extensions, then select Extensions on the submenu to see your list of extensions. Click on the Choose Extension Type dropdown and select Payments. This will show a list of Payments extensions available on your site.
  • Scroll down till you find Paystack. You can see that it hasn’t been installed on the site and it is still Disabled. If you don’t find Paystack on this list, you probably didn’t install the files properly or you installed the wrong version.
  • Click on the green button beside Paystack to install it. This should take a few seconds. After that click on the blue Edit button to configure and enable Paystack.
Configure Paystack

The only settings you need to edit in this section are:

  1.  Test Keys: Paystack Dashboard >> Settings >> API keys to retrieve your API keys (the secret key and public key) and paste them in the appropriate fields. Make sure your account is on Test Mode so you can see the test keys.

How to get your Test and Live API keys?

Note there are 2 states on your dashboard; Live Mode and Test Mode. You’ll see the Test Mode/Live Mode toggle on the top right corner of your dashboard. If there is no toggle and it’s just Test Mode, this means that your Paystack account has not been activated.  Click here to activate your account.

When you go to the Settings Page to get your API keys, please note the mode that your dashboard is in, as that will determine the keys that will be displayed. So if the dashboard is on Test Mode, you can only see the Test API Keys and vice versaTo see the other Keys, switch the toggle from one mode to another.

  1. Live Mode: Live Mode allows your site to process live payments. Paystack allows you to switch the Live Mode on or off so that your site can use the Test Keys.  The Test Parameters allow you to simulate a transaction without using real money. If you set the Live Mode dropdown to No, Paystack will be using your Test API keys to parse the payments, meaning that the orders processed then will be done with test cards, no real money is exchanged therefore no real value should be delivered. When you are ready to start receiving live payments, switch the Live Mode to Yes.
  2. Live Keys: Just like with the Test Keys, Follow this link to your Paystack Dashboard >> Settings >> API keys to retrieve your Live API keys (the secret key and public key) and paste them in the appropriate fields. Make sure your account is on Live Mode so you can see the Live Mode. 
  3. Total: This field allows you to set the minimum amount an order has to have before it can be processed using Paystack. You must leave this field empty if you want to use Paystack to process all payments on your site. 
  4. Status: Switch this to Enabled
Change the default currency to Naira

The Paystack plugin currently works when the default currency is in Naira. If you haven’t done this already, go to your:

  • OpenCart dashboard >> System >> Localisations >> Currencies and click the blue button to open the Add Currency form. Fill and save the form to create a new currency. 
  • Next, go to System >> Settings to see your stores. Click the store edit button.
  • Go to the Currency section and change that Naira to make Naira your default currency.
Paystack on Checkout

If you’ve done all these, you should see the Paystack option on the list of payment options on your checkout page.

See this also: how to open Access Bank Dollar account step by step.

How to integrate Paystack on Magento

Paystack Module for Magento allows customers to buy your store products on checkout using their debit/credit cards or bank account details.

If you want to integrate the Paystack payment gateway on your Magento website, please follow the step-by-step guides and instructions below:

Requirements
  • A working Magento installation
  • An SSH client like Terminal (for Linux and MacOS and PuTTY for Windows)
  • Composer.
Steps to integration
  1. Visit the Github website by clicking here to download the latest release of the Paystack plugin for Magento in .tgz format
  2. Login to your Store Admin
  3. Navigate to System > Magento Connect > Magento Connect Manager.
  4. Scroll to Direct package file upload and click Choose File. Choose the downloaded .tgz file
  5. On loading the .tgz file, click Upload.
  6. Success: Your extension is now properly installed and ready for use.
Configuration
  1. In the Magento Admin panel, navigate to the System > Configuration section and select Payment Methods from the Sales section of the left‐hand Configuration menu.
  2. Find Paystack Inline Module and click the title to expand if not already expanded.
  3. Provide your Test keys and Live Keys as made available on the Paystack Dashboard by clicking here.
  4. You may also change the title of the module specifying what you’d want your customers to see when choosing to pay via Paystack.
  5. Set your Webhook URL on your Paystack Dashboard to //your/magento/site/root/paystack/webhook/handler.

How to integrate Paystack on Prestashop

Integrating Paystack with PrestaShop to enable your customers to purchase goods or services on your website is easy via the PrestaShop back office. Follow the steps below to setup Paystack on PrestaShop:

  1. Download the zip folder containing the PrestaShop module here.
  2. In your PrestaShop back office, click the Modules link on the left side menu of your dashboard. 
  3. Click the Upload A Module button. A dialog box will pop up, asking you to upload a file. Drag the paystack.zip file
    to this dialog box or click ‘Select A File’ to select from your file picker and select paystack.zip.You will receive a success message.
  4. If you are not automatically redirected on successful installation, manually navigate to the Installed Modules tab. Click ‘Configure’ on the Paystack module.
  5. You will be directed to an interface where you can input your API keys. These keys are available on your Paystack dashboard at https://dashboard.paystack.co/#/settings/developer.
  6. The Paystack module will work when the Test (Public and Secret) Keys and/or Live (Public and Secret) Keys are inserted.
  7. Use Test Keys to test payments on your sites without incurring a charge, and use Live Keys when you are ready to start accepting real live payments from customers.

Read this also: Zenith Bank domiciliary account form (step by step guides).

How to integrate Paystack on Squarespace websites

Presently, Paystack doesn’t have a direct integration with Squarespace, although the effort to make this possible is currently in the works.

The technical engineers at Paystack have however found a way for you to set up Paystack on Squarespace, using an e-commerce platform called Ecwid. With Ecwid, you do not need to have any technical skills or write any line of code! 

  • Paystack has direct integration with Ecwid.
  • In the same vein, Ecwid has direct integration with Squarespace.

What this means is that you can integrate Paystack into an Ecwid store and then embed the Ecwid store into your Squarespace website. To do this, please follow the instructions below:

  1. Integrate Paystack to your Ecwid account.
  2. Sign up on Squarespace and create a store.
  3. To embed your Ecwid store, click on the page option and add a new page.
  4. Once you’ve added a new page, add the code block by clicking the ‘+” icon on the top right of the page. Note that the code block is a premium feature and will only be available to you if you pay for Squarespace
  5. To get your Ecwid store code, log in to Ecwid → Go to All sales channels (overview) → Choose Squarespace and copy the code.
  6. Once you’ve copied your code, paste it to the code block you created on Squarespace and apply.
  7. Save the page, head to your store and now you should see your Ecwid Store linked here.
  8. Now, once anyone purchases any product on your Squarespace store, they will pay you via Paystack!
  9. Try a test payment and see how it works!

Now you can start receiving payments on Squarespace through Paystack. For more information, please contact Paystack by sending an email to [email protected].

Integrating Paystack on a website

Benefits of integrating Paystack into websites

Integrating the Paystack payment gateway into e-commerce websites has the top 12 benefits below;

  1. It can help you build custom payment experiences with well-documented APIs
  2. Enable you to build awesome products
  3. Make your customers delighted with a seamless payment experience
  4. Accept payments on all major shopping platforms everywhere in the world
  5. Protect yourself and your customers with advanced fraud detection
  6. Verify the identity of your customers
  7. Have a modern, beautiful payment experience
  8. Control access to data with User Permissions
  9. Understand customer purchase patterns
  10. Monitor your business performance while on the go
  11. Make your businesses grow amazingly
  12. Get help from happy technical engineers at Paystack.

Paystack contact information

If you want to contact Paystack, here are their contact details.

CountryAddress
GhanaAfricaWorks,
35 Patrice Lumumba Road,
Airport Residential Area,
Accra, Ghana.
USA354 Oyster Point Blvd.,
South San Francisco,
CA 94080
United States
South Africa45 Kingfisher Dr
Fourways
Sandton, 2055
South Africa.
Nigeria126 Joel Ogunnaike Street,
Ikeja GRA, Ikeja,
Lagos, Nigeria.
Phone number: +234 163 16160

Conclusion

Over 60,000 businesses trust Paystack to help accept online and offline payments from anyone, anywhere in the world.

Hope this article has helped you today.

If you know that this article has helped you know how to integrate the Paystack payment gateway on your website, then please share it with your friends and remember to subscribe to my YouTube channel and our newsletter for more important updates. You can also find me on Facebook.

Leave a Comment

Your email address will not be published. Required fields are marked *