Officialhelplines

How to Create Paystack Donation Page on Blogger

This tutorial provides you with step by step guides on how to create a PayStack donation page on blogger.


The process discussed here could seem extremely simple or complex to you - it all depends on how prepared your existing blogger template is or how familiar you are to simple HTML tags, CSS and JavaScript.


In any case, with this simple but lengthy tutorial, you will be able to create a paystack donation page of your own on your blogger website.


You can view a demo of the paystack donation page on Blogger by clicking on the link below:

Donation Page Demo

NOTE:

What you see in the demo page linked from above is a very simple and basic form of the donation page. If you need a more beautiful and complex paystack donation page with advanced customizations and options for your Blogger website, you can contact us by clicking the link below;


contact us

So, without wasting much time, let us delve straight into the topic for discussion.


But before we do that, for the sake of those that could be confused, let me first shed more lights on some of the points to be noted here. And they are:


  1. What is PayStack?

    PayStack is one of the leading online payment processors that also offer payment gateways which allows and enables e-commerce websites, individuals, fintech companies, corporate bodies and other entities collect and process payments online.


    PayStack was originally owned by a Nigerian firm but was later acquired by Stripe - an Irish-American company; a very giant entity in the industry.


  2. What is Blogger?

    Blogger is a free blogging platform that is very easy to use and simple to setup. It is likely the only blogging platform that is made for everyone. Thus; if:

    • you are just starting out as a blogger with very minimal or no coding knowledge at all...
    • you are a fresh blogger with very minimal or no money to spend on your blog yet you want a blogging platform that allows you make some money from your blog...
    • you are an experienced blogger with very minimal or no coding knowledge...
    • you are a fresh blogger with advanced coding knowledge...
    • you are an experienced blogger that is also fluent at coding...
    • you are a fresh blogger with reasonable amount of money budgeted for your blog...

    More note on that here: From Creating Blog to Making Real Money Blogging


So, what I discuss in this post is how to setup and create simple donation page on Blogger website that would be powered by paystack.

Okay. Now I believe the points are made, noted and well cleared. We may now proceed to the main topic for discussion which is: how to create paystack donation page on blogger.


How to Create PayStack Donation Page on Blogger

  1. How to Create PayStack Donation Page on Blogger - step 1, fig1

    Sign up with PayStack

    In order to create paystack donation page on blogger, you first need to sign up with paystack.


    You can sign up with PayStack as a business or as an individual. The procedures for signing up with PayStack depends greatly on your country of residence and your particular need for PayStack.


    However, generally, the procedures for opening account with PayStack is simple and straight forward.


    If you have already signed up, you may skip this step otherwise sign up and verify your PayStack account to proceed to the step two below.


  2. How to Create PayStack Donation Page on Blogger - step 1, fig2

    Set your PayStack Account to Live Mode

    If your PayStack account is not fully verified yet, the green "Live" toggle button would not appear and if that's the case, you cannot collect donations or payments using PayStack yet.


    Therefore, if your PayStack account is setup and not in "Live" mode yet, simply click the toggle button to switch it to Live Mode.


  3. How to Create PayStack Donation Page on Blogger - step 1, fig3

    Obtain your PayStack Live Public Key

    PayStack public key is a unique set of codes that is assigned to every single account registered with PayStack.


    The key is unique because a single key is never assigned to more than one merchant account. Thus, even if you have two businesses registered under one PayStack account, each business account under your PayStack account would be assigned different public keys.


    Now, what you need to do here is to get your PayStack Live Public Key copied out.


    So, how can you access and copy your PayStack public key?

    • How to Create PayStack Donation Page on Blogger - sub-steps 1, fig1

      I am supposing you are already logged on to PayStack. From your PayStack Dashboard, click on the settings icon / link from the bottom of the PayStack vertical menu to the left of the page.

    • How to Create PayStack Donation Page on Blogger - sub-steps 1, fig2

      The next page that opens would display your PayStack account profile page. Now, locate API Keys & Webhooks from the Horizontal Menu and click on it.

    • How to Create PayStack Donation Page on Blogger - sub-steps 1, fig3

      The next page displays to you something that is similar to what is seen in the image above. Simply highlight the entire code in front of the Live Public Key as seen in the image above and copy it.

    • Now, paste the Live Public Key you copied from above on to a safe place where you can easily access it. We would need it later. You can paste it on a NotePad.

  4. How to Create PayStack Donation Page on Blogger - step 1, fig4

    Create A New Static Page on Blogger

    This is where you direct anyone that may want to donate to you on your Blogger website via PayStack.


    You need to bear it in mind that the more simple and attractive you keep this page, the more likely people will donate to you.


    In the following steps, I show you how to create a static page for accepting donation through PayStack on Blogger website.


    Creating A Static Page on Blogger Website for Accepting Paystack Donations

    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig1
      Open Your NotePad App

      First, open or launch your NotePad App.


    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig2
      Import PayStack Payment Scripts into your Blogger Website Donation Page

      Now, using the simple js tag, you can import PayStack into your donation page.


      To do that, simply copy and paste the line of codes below onto the NotePad window you earlier opened.


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

      See the image above for what it should look like on the NotePad window.

    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig3
      Paste Your PayStack Public Key

      Remember the PayStack Public Key you were asked to copy earlier? Now, copy the entire line of codes below and paste it on your NotePad app.


                <div style="background: white; color: white;">
                <span id="ppk">paste-your-paystack-public-key-here</span></div>

      Make sure you replace the entire paste-your-paystack-public-key-here in the code above with your actual PayStack Public Key and then paste your outcome on the NotePad app you earlier opened.


      Refer to the image above for what it should look like.

    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig4
      Specify A Name for the Payment Being Collected on the Donation Page

      Now, you should specify the reason for which the payment is being collected. For example; you can just name it as "Donation".


      The length does not really matter. Just give it any descriptive name.


      The simple html tag below passes the payments reason, purpose or name to PayStack systems.


      <span id="payName" style="visibility:hidden;">Donations for iVTemplates</span>

      You can just copy and paste the line of codes above onto your NotePad. Remember to modify it to your tastes.


    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig5
      Make it Possible for the Donators to Enter their Alias

      If you like, you can refer to this as the name of the donator. Whatever it is to you, it is a requirement for PayStack to process payments. Thus; paystack needs to identify the person paying or donating to you by a name or alias.


      To do that, just copy the entire line of code below and paste it on your already opened NotePad window.


      <input type="text" id="first-name" placeholder="your alias here" />

      To see what it would look like, see the image above.


    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig6
      Allow your Donator Enter their E-mail Address

      This is also another requirement by paystack. This is where paystack sends the invoice and receipt for the payment made. You can also use the e-mail address for communicating your benevolent audiences.


      To do that, just copy the entire line of code below and paste it on your already opened NotePad window.


      <input type="email" id="email-address" placeholder="your e-mail here" />

      To see what it would look like, see the image above.


    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig7
      Specify the Amount You Want Donated

      Using some HTML tags with simple css classes or Id, you may now specify the amount you want donated.


      You can input some pre-defined values or make the donators input the amount they want and you can combine both options in one.


      In my example here, I use pre-defined values using the lines of codes given below.


      To do that, just copy and paste the lines of codes below here onto your already opened NotePad page.


      <select id="price">
                <option>select amount</option>
                <option value="1000">1000</option>
                <option value="3000">3000</option>
                <option value="5000">5000</option>
                </select>

      That's it. By simply copying and pasting the lines of html codes above onto your Blogger website donation page, you have successfully specified the amounts value you want donated.


    • How to Create PayStack Donation Page on Blogger - sub-steps 2, fig8
      Finally, Declare PayStack "Pay Now" or "Donate" Button

      The Pay Now button, when clicked, executes the directives or instructions that are set on the donation page and then initiates the payment sequences that call PayStack systems that collect the donations for you.


      And this is how to declare PayStack's Pay Now button.

      <button type='button' onClick='payWithPaystack()' title='Visa, Mastercard, Verve'> <i class='fa fa-cc-mastercard'></i> Donate </button>

      Again, copy and paste the codes above onto the NotePad window already opened.


  5. How to Create PayStack Donation Page on Blogger - steps, fig5

    Paste the NotePad Window's Contents On Blogger Static Page

    Now that everything is set, you may now paste the entire contents of the NotePad window's contents onto your Blogger website donation page.


    To do that, click anywhere inside the NotePad window and then press CTRL + A (on your keyboard) to select all and then, CTRL + C (also on your keyboard) to copy all.


    Now, go to your static page on Blogger, click inside the empty space and then press CTRL + V to paste everything earlier copied.


    Once you are done, you may now click SAVE or PUBLISH to publish the page.


    NOTE:

    Remember to switch your Blogger Page EDIT SCREEN to HTML editor mode before you paste the contents copied from the NotePad.

  6. How to Create PayStack Donation Page on Blogger - steps, fig6

    Embed PayStack Scripts in your Blogger Website

    Finally, you need to modify your Blogger website template a little bit by embedding PayStack scripts in your Blogger website source codes. NOTE: before you do this, I recommend that you do a full backup of your Blogger template. See instructions for backing up Blogger template here.


    To do this;

    • How to Create PayStack Donation Page on Blogger - sub-steps 3, fig-1

      From your Blogger Dashboard, see the Main Menu to the left of the page. From there, locate Theme and click it.

    • How to Create PayStack Donation Page on Blogger - sub-steps 3, fig-2

      On the page that opens next, click the radio button that has an arrow pointing downward in it. And from the drop-down links, click Edit HTML.

    • How to Create PayStack Donation Page on Blogger - sub-steps 3, fig-3

      What you will see next would be a bunch of codes. Click anywhere inside that bunch of codes and then press CTRL + F. Almost immediately, a search widget will pop out.

    • Now, in the Search Widget that popped out, copy and paste the code below:

      </head>

      Now, click the enter key. Once clicked, the system would take you straight to an highlighted </head> tag.

      How to Create PayStack Donation Page on Blogger - sub-steps 3, fig4
    • How to Create PayStack Donation Page on Blogger - sub-steps 3, fig5

      Once found, just above the tag, copy and paste the lines of codes below:

      <script>
      var paymentForm = document.getElementById('paymentForm');
      paymentForm.addEventListener('submit', payWithPaystack, false);
      function payWithPaystack() {
        var handler = PaystackPop.setup({
          key: document.getElementById('ppk').innerText,
          metadata:{
        custom_fields:[
          {
            display_name: "First Name",
            variable_name: "first_name",
            value: document.getElementById('first-name').value,
          },
          {
            display_name: "Cart Items",
            variable_name: "cart_items",
            value: document.getElementById('payName').innerText,
          },
        ]
      },
          email: document.getElementById('email-address').value,
          amount: document.getElementById('price').value * 100,
          currency: 'NGN',
          callback: function(response) {
        window.location = '/'
      },
          onClose: function() {
            alert('Transaction was not completed. Are you sure you want to cancel this payment?');
          },
        });
        handler.openIframe();
      }
      </script>
    • How to Create PayStack Donation Page on Blogger - final step

      You may now click SAVE to effect the changes made on the template.

  7. Done! You Can Now Test your Paystack Donation Page on Blogger

    If you have implemented all the steps discussed from above to this stage, you may now proceed to test your Paystack Donation Page on your Blogger website.



Conclusion

As I have earlier hinted, this is a very simple and basic Paystack donation page for Blogger. To further achieve a more beautiful design, you need to customize the look, feel and behavior of the donation page and its elements using CSS.


Additionally, you can also add advanced donations options using some JS and a few more HTML tags.


However, in a nutshell, this simple Paystack donation page for Blogger website allows you collect donations from your fans, readers and followers using Paystack as your payment processor.


0 Comments

to top