20 November 2019

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

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.

You can also follow me on twitter @stephenjude_

Join my inner circle newsletter

Be the first to hear about anything I publish, launch, or think is helpful for you. Subscribe here

Hey, have you tried Litehost lately ?

Litehost is a web hosting platform for PHP & Laravel developers with Composer, Git, PHP & CLI pre-installed. Try it now