PaystackLite: Fastest Way To Setup Paystack Checkout Form In Your Laravel Application

Published November 20, 2019 • 4 mins read

Paystack

Paystack is the modern online and offline payment for Africa. One thing that excites me about Paystack is that you don't need to be a registered company to make use of their payment gateway. Anybody can use it to start accepting payments.

PaystackLite

Setting up Paystack checkout form is pretty simple and easy but copying & pasting code over and over again in different client's and company's projects is quite irritating. So I decided to bundle those code into a Laravel package. That's how PaystackLite came about.

PaystackLite make use of blade directives to abstract away all Javascript configurations for setting up Paystack checkout forms. This is the easiest way to integrate Paystack checkout form in Laravel applications.

Lets get our hand dirty with few lines of code. I will assume you already have your Laravel application "up and running".

Installing PaystackLite

Install the package with composer.

composer require stephenjude/paystack-lite

If you are using Laravel less than 5.4, add the line below to the providers array in your config/app.php file.

Stephenjude\PaystackLite\PaystackLiteServiceProvider::class,

Update your .env file and add your public key, secret key, customer default email and payment url.

PAYSTACK_PUBLIC_KEY=xxxxxxxxxxxxx
PAYSTACK_SECRET_KEY=xxxxxxxxxxxxx
PAYSTACK_PAYMENT_URL=https://api.paystack.co
PAYSTACK_CUSTOMER_DEFAULT_EMAIL=general@email.com

Setting up Paystack Checkout Form

PaystackLite makes use of @paystack blade directive. The @paystack blade directive creates a JavaScript helper method payWithPaystack which takes five parameters.

  1. The amount to be paid.
  2. The customer's email.
  3. Meta data.
  4. Callback function when payment is complete.
  5. Callback function when checkout form is closed.

So whenever we want to display Paystack payment form we just call the payWithPaystack method.

<script>
document.getElementById('paymentBtn').onclick = function () {
  payWithPaystack(amount, email, meta, onPaymentCompleted, onPaymentCancelled);
}
</script>

So our blade file will look like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <button id="paymentBtn">Make Payment</button>

    <!-- Include paystack blade directive -->
    @paystack

    <script>
        document.getElementById('paymentBtn').onclick = function () {

            var amount = 1000;
            var email = 'customer@email.com';
            var meta = {
                custom_fields: [
                    {
                        display_name: "Name",
                        variable_name: "name",
                        value: "My Customer"
                    }
                ]
            };

            //display checkout form
            payWithPaystack(amount, email, meta, onPaymentCompleted, onPaymentCancelled);
        };

        // Callback when payment is complete.
        function onPaymentCompleted(response) {
            alert('payment completed!');
            // do what you like here with the response data returned
        }

        // Callback when checkout form is closed.
        function onPaymentCancelled() {
            alert('payment cancelled!');
        }

    </script>
</body>

</html>

Yeah that's it. Now we have Paystack checkout form displayed whenever the Make Payment button is clicked. You can find the source code for this tutorial on Github.

Conclusion

PaystackLite isn't just only about payment checkout form, it's also a Paystack API wrapper for Paystack endpoints. Check out the documentation for more details. Don't forget to star PaystackLite on Github.

Join my weekly newsletter and never miss out on new, tutorials, tips, and more.

You can also follow me on twitter @stephenjudeso

Hey, have you tried Litehost lately?

Litehost is my side project which is a shared hosting platform with PHP & Laravel developers in mind. It has Composer, Git & PHP CLI pre-installed on its servers. SSH access is also granted on request. Litehost is pretty affordable. Try it today.