DEV Community

Cover image for How to Integrate Paystack payment system
Jeremy Ikwuje
Jeremy Ikwuje

Posted on • Edited on

How to Integrate Paystack payment system

#webdev #php #payment #api

In this guide, you'll learn how to integrate Paystack payment system on your website.

This guide is comprehensive, so you should go through every information for maximum output.

Paystack is a Modern online and offline payments for Africa.

Before you can start integrating Paystack, you will need a Paystack account. Create a free account now if you haven't already done so.

The Paystack API gives you access to pretty much all the features you can use on your account dashboard and lets you extend them for use in your application. It strives to be RESTful and is organized around the main resources you would be interacting with - with a few notable exceptions.

After creating an account, the next thing is to sign in to your new Paystack account. On your dashboard, you will find your public and secret key. We will make use of the public and secret key for this guide.

Spotlight: I built a better alternative to AbokiFX, you can check it out here.

Let Dive In

Paystack has three major approaches to integrate their API and collect payments on your websites. But this guide explains only two approaches. The third approach is with pure JavaScript, which I will discuss entirely on a separate post.

  1. Paystack Inline
  2. Paystack Standard

Using any one of the two depends on what you're trying to do. Each one comes with its own user and developer experience.

Paystack Inline

This approach offers a simple, secure and convenient payment flow for web. It can be integrated with a line of code thereby making it the easiest way to start accepting payments. It also makes it possible to start and end the payment flow on the same page, thus combating redirect fatigue.

Now, the code below displays a Paystack pay button.

<form>
  <script src="https://js.paystack.co/v1/inline.js"></script>
  <button type="button" onclick="payWithPaystack()"> Pay </button> 
</form>
Enter fullscreen mode Exit fullscreen mode

The pay button is yet to do what you expect. So if you click on it, nothing will happen. For it to work you need to add the payWithPaystack() Javascript function below the form.

Here is the payWithPaystack function provided by Paystack.

<!-- place below the html form -->
<script>
  function payWithPaystack(){
    var handler = PaystackPop.setup({
      key: 'paste your key here',
      email: 'customer@email.com',
      amount: 10000,
      ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
      metadata: {
         custom_fields: [
            {
                display_name: "Mobile Number",
                variable_name: "mobile_number",
                value: "+2348012345678"
            }
         ]
      },
      callback: function(response){
          alert('success. transaction ref is ' + response.reference);
      },
      onClose: function(){
          alert('window closed');
      }
    });
    handler.openIframe();
  }
</script>
Enter fullscreen mode Exit fullscreen mode

You need to replace the key: value 'paste your key here' with the public key on your Paystack account settings. If login, you can locate the key here.

Please note that the key to use with inline is the public key and not the secret key

If you did it correctly, on the click of the pay button, a nice looking Paystack payment UI will pop out. Since you're testing the payment API, you should use a test card.

To use a test card, you should use the test public key instead. And never forget to replace the test public key with the live public key on a live website.

paystack payment form

When the payment is successful, your browser will show an alert, indicating a successful transaction, with a reference key.

paystack payment form

With this Inline method, everything works on a single page. Also, notice the callback and onClose object key. The callback allows you to control the user experience within a callback function if the payment is successful. e.g Redirecting the user to a Thank You page.

Paystack Standard

This is the standard approach of collecting payments on your web app. The standard approach is a better and secure way to integrate within your php web app.

Now, for this approach to work on your server you need to confirm that your server can conclude a TLSv1.2 connection. Most up-to-date servers have this capability. If you're on a web server, you contact your service provider for guidance if you have any SSL errors.

For this approach, you'll need to create two new files.

   initialize.php
   callback.php
Enter fullscreen mode Exit fullscreen mode

Initialize a transaction

Paste the following code inside the initialize.php

<?php
$curl = curl_init();

$email = "your@email.com";
$amount = 30000;  //the amount in kobo. This value is actually NGN 300

// url to go to after payment
$callback_url = 'myapp.com/pay/callback.php';  

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.paystack.co/transaction/initialize",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => json_encode([
    'amount'=>$amount,
    'email'=>$email,
    'callback_url' => $callback_url
  ]),
  CURLOPT_HTTPHEADER => [
    "authorization: Bearer sk_test_36658e3260b1d1668b563e6d8268e46ad6da3273", //replace this with your own test key
    "content-type: application/json",
    "cache-control: no-cache"
  ],
));

$response = curl_exec($curl);
$err = curl_error($curl);

if($err){
  // there was an error contacting the Paystack API
  die('Curl returned error: ' . $err);
}

$tranx = json_decode($response, true);

if(!$tranx['status']){
  // there was an error from the API
  print_r('API returned error: ' . $tranx['message']);
}

// comment out this line if you want to redirect the user to the payment page
print_r($tranx);
// redirect to page so User can pay
// uncomment this line to allow the user redirect to the payment page
header('Location: ' . $tranx['data']['authorization_url']);
Enter fullscreen mode Exit fullscreen mode

The initialize.php will initialize your customer transaction with the paystack API and redirect the user to a Paystack payment page.

On a live server, replace the test key with your own live secret key. Look for the line with comment 'replace this with your own test key' and remove the sk_test_xxxxxxxxx to your secret key.

Note that, the $email and $amount are the customer's email address and the amount they are to pay while the $callback_url is the URL the customer will be redirected to after payment.

Bringing the customers back to your site is an important part of the standard approach, so don't forget to change the $callback_url to that of your app.

The email and amount can be collected through forms or whatever way you intended.

The $amount is in Nigeria Kobo, so always add double zeros on any amount you are charging the customer. e.g 100000 for 1000

You can use this money tool for accuracy on the complicated amount.

When the customer enters their card details, Paystack will validate and charge the card. When successful, it will then redirect back to your callback_url set when initializing the transaction or on your dashboard at: https://dashboard.paystack.co/#/settings/developer .

If your callback_url is not set, your customers see a "Transaction was successful" message without any redirect.

Verify the Transaction

Now, since the callback is specified in your code, you need to set the callback.php.

Enter the code below inside the callback.php

<?php

$curl = curl_init();
$reference = isset($_GET['reference']) ? $_GET['reference'] : '';
if(!$reference){
  die('No reference supplied');
}

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.paystack.co/transaction/verify/" . rawurlencode($reference),
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER => [
    "accept: application/json",
    "authorization: Bearer SECRET_KEY",
    "cache-control: no-cache"
  ],
));

$response = curl_exec($curl);
$err = curl_error($curl);

if($err){
    // there was an error contacting the Paystack API
  die('Curl returned error: ' . $err);
}

$tranx = json_decode($response);

if(!$tranx->status){
  // there was an error from the API
  die('API returned error: ' . $tranx->message);
}

if('success' == $tranx->data->status){
  // transaction was successful...
  // please check other things like whether you already gave value for this ref
  // if the email matches the customer who owns the product etc
  // Give value
  echo "<h2>Thank you for making a purchase. Your file has bee sent your email.</h2>";
}
Enter fullscreen mode Exit fullscreen mode

If you follow the steps correctly. You will get the following result.

'paystack standard demo'

If you run into the error below.

API returned error: Transaction reference not found
Enter fullscreen mode Exit fullscreen mode

Then make sure the SECRET_KEY in callback.php is the same as the one used in the initialize.php and the callback URL should be a live domain.

Congratulation, you just integrated paystack payment into your app.

Have any problem, you can comment. If it is urgent, you can message me on Twitter.

Hints

Go to dashboard > settings > webhook/keys to get your public and secret key for both the live and test.

The live keys are used for production purpose. While the public is for testing purpose.

To enable live mode on paystack, you'll need to submit your business details.

Latest comments (89)

Collapse
 
samson_edwin_360 profile image
Samson Edwin •

Is there a way to design the payment form page myself cause I already built one suitable for my website brand

Collapse
 
heistheddy profile image
Onibudo Olatade •

i want to use the utility api for electricity and cable tv, what do i need to do or get

Collapse
 
maccido profile image
Maccido Shehu •

Pls sir i need some help on this topic, my php ecommerce website had product page each product contain different price, pls sir how can i use above code to get payment on each product

Collapse
 
sirabdull profile image
Abdullahi Akintayo •

th Api IS giving an error

: Invalid keyArray ( [status] => [message] => Invalid key )
Warning: Undefined array key "data" in C:\Users\ABDUL\Desktop\exam\nms-online-compedium-1\backend\server\phppages\subscription\initialize.php on line 47

Collapse
 
emmyjay profile image
emmy-jay •

please it's not redirecting me to the callback.php page, and I specified the url in the initialize.php page can you please help me

Collapse
 
emmyjay profile image
emmy-jay • • Edited

I keep getting "Curl returned error: SSL certificate problem: unable to get local issuer certificate" please what do I do. I'm using WAMP Server

Collapse
 
abbatronics profile image
Abbatronics • • Edited

Jeremy pls help

Hello, I'm new here, I need help on how to integrate paystack standard to my ecommerce website which was written in django. I want to know which folder to place the initialize.php file in the django, also can i use include command to include it to checkout.HTML file that already exit, also do I need to create a model.py for the php file. I need your help thanks

Collapse
 
billyjeem123 profile image
Billyhadiat •

Hi Jeremiah.

Thanks for the detailed instructions.
I've been able to implement Paystack gateway successfully and gets a redirect to the specified callback URL.

But i have question.... if i want to use my custom form for the payment checkout in the sense that remember that if the -> *initialise *<-endpoint is sucessful, we direct a user to a {paystack checkout page}..

let assume that i am not using paystack checkout if i want to send user account details to the initialise endpoint, what parameter would i send for the account details or can i just declare a parameter of my choice the details and

Thank you.

Collapse
 
ijsucceed profile image
Jeremy Ikwuje •

If you're looking to pass custom information, what you do is to pass those information in a property called meta.

Collapse
 
okewater_1 profile image
Nedu •

I have successfully added paystack to my plugin but i cannot update the plugin with payment information.
How can i add this code to the paystack file to be able to increase cause with payment details?

Collapse
 
hardsoftmac profile image
HardSoftMac •

Can you please help with "Ensure CORS response headers are valid". It's not redirecting to checkout.paystack.com/...

I am using the Standard paystack

View full discussion (89 comments)