DEV Community: Yusuf

How to Integrate Paystack Payment into your Project with HTML and JavaScript

Yusuf — Thu, 24 Aug 2023 08:12:52 +0000

Paystack is a modern payment gateway solution for Africa, The Paystack API allows you access to a lot of payment features on the platform via your Paystack dashboard.

Requirements

Paystack Account
Personal Paystack public key
A basic know-how of HTML and JavaScript

Sign up with Paystack

Go through the sign up process and log in into your account.
Click the setting tap.

Click on the "API Keys & Webhooks" tab to reveal your API keys.

We'll be using the Test Public Key, so copy it.

Create HTML file

Create the pay button
<div class="check-out"> <button>Pay</button> </div>
Add the inline script
we have to create a link to the Paystack’s javascript library with the below code added to your HTML body.

<script src="https://js.paystack.co/v1/inline.js"></script> <script src="checkOut.js"></script>

Create JavaScript file

We'll finalize our payment setup with the paystack's payment modal

const checkOut = document.querySelector('.check-out button');

checkOut.addEventListener('click', function payWithPaystack() {

    var handler = PaystackPop.setup({
        key: 'Paste_your_API_KEY_here',
        email: 'customer@email.com',
        amount: `1000000`, //amount here is 10,000 double zeros has to be added
        metadata: {
            custom_fields: [
                {
                    display_name: "mobile Number",
                    variable_name: "Mobile Number",
                    value: "+2348012345678"
                }
            ]
        },

        callback: function (response) {
            alert('transaction is ' + response.reference);
        },

        onclose: function(){
            alert('transaction cancelled');
        }

    });

    handler.openIframe();//to call the paystack payment interface
})

Use the public key not the secret key.
modify the code to fit into your project needs.

Here's a preview if everything goes well.

Initiate a phone call and SMS with HTML

Yusuf — Tue, 12 Jul 2022 17:34:34 +0000

A simple one line code to initiate a phone call goes thus:

<a href = "tel:1-234-567-8901"> 1-234-567-8901</a>

to initiate sms:
<a href = "sms:1-234-567-8901"> SMS Message</a>

Creative Problem Solving Techniques

Yusuf — Sun, 10 Jul 2022 22:36:13 +0000

The world is never short of programmers or coders it's only short of creative problem solvers. having great problem solving techniques keeps you at edge and way ahead of others.

They are traditionally four(4) steps to problem solving.

1. Define the problem.
2. Generate new ideas.
3. Evaluate and select solutions.
4. Implement.

those are the foundational problems solving techniques you'll have to stick to when you're faced with your next problem. Without further a do, let's dive further.

Define the problem: First, you must define the problem, what is it cause? what are the signs there's a problem at all?
Generate new ideas: Next, you identify various options for solutions. What are some good ideas to solve this?
Evaluate and select solutions: Then, evaluate your options and choose from among them. What is the best option to solve the problem? What's the easier? How should you prioritize?
Implement: Finally implement the chosen solution. Does it solve the problem? Is there another option you need to try?

Creative Problem Solving Process

♦Separate ideation from evaluation:
When brainstorming creative ideas for your next project, have a separate for writing it all down. focus on generating lots of ideas. Don't prioritize them or evaluate them until everything is captured.

♦Judging will shut it down:
Nothing stops the flow of creative ideas faster than judging them on the spot. Wait until the brainstorming is over before you evaluate.

♦Restate problems as questions:
Restating problems as questions will give you more clarity about the problem. it's easier to a group into thinking of creative ideas when challenges are stated as open-ended questions.

♦Use "Yes and" to expand ideas:
It's way too easy to shutdown and negate ideas by using the word "but" (i.e. "But i think this is better..."). Avoid this at all cost, instead expand on what was previously introduced by saying "Yes, and?..." to keep ideas flowing and evolving.

ps: Before you solve a problem, seek to understand it fully.
I hope someone find this useful.
follow for more tips.

Finally joined this amazing dev community. dev.to

Yusuf — Sat, 09 Jul 2022 11:07:00 +0000

Started my coding journey January 2022, I've heard the numerous advantages of joining a dev community but I've always felt I'm not ready yet, little did I know that they is no perfect time to be ready.
So I've decided to just do it.
Looking forward to meeting new people and making new friends here to help each other grow in our respective endeavors. cheers