Officialhelplines

How to Create Flutterwave Donation Page on Blogger

How to Create Flutterwave Donation Page on Blogger

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


In one of my previous posts, I have discussed, with illustrations, how to create paystack donation page on Blogger website and I thought; it would be nice if I can create something similar for FlutterWave users as well.


On that note, if you are a FlutterWave user that also operates a Blogger website, the tutorial discussed here would come very handy if you ever have the need to collect donations on your Blogger website using FlutterWave as your payment processor.


Meanwhile, it should be noted that the process discussed here could seem extremely simple or complex to you - it all depends on how familiar you are to simple HTML tags, CSS and JavaScript.


You can view a demo of the FlutterWave donation page on a Blogger website 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 FlutterWave donation page with advanced customizations and options for your Blogger website, you can use the link below;


contact us

Okay. We may now proceed but first, the introduction.


  1. What is Flutterwave?

    Flutterwave is one of the leading online payment processors in Nigeria. Using Flutterwave, you can collect payments for goods and services, donations and raise funds directly from your websites, blogs and or social channels.


  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; both novice and pro bloggers.


    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 Flutterwave.


How to Create Flutterwave Donation Page on Blogger

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

    Sign up with Flutterwave

    To be able to accept and process any form of payments through Flutterwave, you need to first create an account with Flutterwave hence , your first step would be to create a Flutterwave account.


    You can sign up with Flutterwave both as a starter or an established business. Whichever one you are able to do, you can accept and process payments through Flutterwave. However, it should be noted that the option you go for here would determine the documents that would be required of you.


    If you have already signed up, you may skip this step otherwise go here to sign up with Flutterwave and create an account before you proceed to the next step.


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

    Ensure your Account is in Live Mode

    Usually, you don't have to do anything to get your Flutterwave account into Live Mode. By default your Flutterwave account is put in Live Mode as soon as your account is registered but as a precaution, confirm that your Flutterwave account is in Live Mode by looking at the area where the arrow in the image above points.


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

    Get your Flutterwave Account Public Key

    Similar to PayStack, Flutterwave also provides public key. As was explained in the PayStack tutorial that public key is a unique set of codes that is assigned to every single account registered with PayStack, the same goes with Flutterwave.


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

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

      Here, I am assuming you are already logged on to your Flutterwave account and now on your Flutterwave Dashboard. From your Flutterwave Dashboard, click on the settings icon / link from the bottom of the Flutterwave vertical menu to the left of the page.

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

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

    • How to Create Flutterwave 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 that is seen just below the Public Key as seen in the image above and copy it.

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

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

    Create A New Static Page on Blogger for Collecting Donations

    To collect donations on Blogger website through Flutterwave, you need to first create a Static Page. This is where you direct anyone that may want to donate to you on your Blogger website.


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


    NOTE:

    The more simple, informative and attractive you keep this page, the more likely people will donate to you.

    Creating A Static Page on Blogger Website for Accepting Flutterwave Donations

    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig1
      Go to Pages from your Blogger Dashboard

      On your Blogger Dashboard, look to the Blogger Main Vertical Menu that is located left of your view. From the list of links there, locate Page and click on it.


      When clicked, the next page takes you to a page where all your existing or already created static pages including drafts are listed.


    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig2
      Click "+ New Page"

      When you arrive at the page described from the step above, look to the top of the Menu and locate + New Page and click on it.


      When clicked, that will open a new blank page. Now, proceed to the next step.


    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig3
      Switch the Page Editor Screen to HTML View

      Since we are working with codes here, you would need to switch the Blogger editor screen to HTML View in order to arrive at the right result.


      To switch the editor to HTML View, simply look at the image above and click on the icon the arrow points and select the appropriate option.


      Once done, you may now proceed to the next steps.


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

      Before you can process any payments through Flutterwave, you need to first embed Flutterwave payments scripts on any page from which you want the payments values collected.


      Now, using the simple js tag provided below, you can import Flutterwave into your donation page.


      To do that, simply copy and paste the line of codes below onto the blank static page opened on your Blogger Website.


      <script src='https://checkout.flutterwave.com/v3.js'></script>

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

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

      Remember the Public Key you were asked to copy earlier? It is required by Flutterwave to process payments. Now, copy the entire line of codes below and paste it on the new page that is being created.


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

      Make sure you replace the entire paste-your-flutterwave-public-key-here in the code above with your actual Flutterwave Public Key and then paste your outcome on the new page that is being created.


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

    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig6
      Create A Transaction Ref

      With Flutterwave, it is a must that you generate and attach a unique reference code to every (inflow) transactions that occur on your Flutterwave account.


      The simple line of codes below automatically generates a unique reference code for every single donations that occurs on that page.


      <span class='' id='treft' style="background: #fff; color: #fff;">TRN<script>document.write(new Date().getFullYear())+document.write(new Date().getMinutes())+document.write(new Date().getSeconds())+document.write(new Date().getHours())</script>RC</span>

      Copy the lines of codes above and paste it on the donation page that is being created.


      Refer to the image above for an idea of how it'll look like on the page.


    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig7
      Give A Reason 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".


      Using the simple html tag below, you can pass the payments reason, purpose or name to Flutterwave systems.


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

      Remember to modify the "Donations for iVTemplates" to your tastes.


    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig8
      Allow the Donators Enter their Alias

      Prudence apart, this a requirement by Flutterwave. Without passing the name or alias of the person making the payment to Flutterwave systems, the system won't even initiate the payment sequence.


      In other words, you need to either hard-code this or allow your donators enter their name or alias on the donation page.


      To do that, just copy the entire line of code below and paste it on the new page that is being created.


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

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


    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig9
      Make it Possible for the Donator to Enter their E-mail Address

      Similar to the alias or name, this is another data without which Flutterwave would not process the payment hence, it becomes a must to collect and pass the donator email address to Flutterwave systems.


      To do that, just copy the entire line of code below and paste it on the new page that is being created.


      <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 Flutterwave Donation Page on Blogger - sub-steps 2, fig10
      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.


      You can just copy the entire codes provided below and paste it on the new page that is being created. You can also modify it to your taste by adding more values (amount) as options or by simply modifying the existing values.


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

      See the image above to understand how it looks on the page.

    • How to Create Flutterwave Donation Page on Blogger - sub-steps 2, fig11
      Finally, Declare Flutterwave "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 Flutterwave systems that collect the donations for you.


      This is how to declare Flutterwave's Pay Now button:

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

      Again, copy and paste the codes above onto the page that is being created.


    • Publish the Page

      And now, you may either click "SAVE" or "PUBLISH" to have the page published and then, proceed to the next main steps as explained below.


  5. How to Create FlutterWave Donation Page on Blogger - steps, fig6

    Embed FlutterWave Scripts in your Blogger Website

    Finally, you need to modify your Blogger website template a little bit by embedding FlutterWave 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 embed FlutterWave scripts in your Blogger website;

    • How to Create FlutterWave 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 FlutterWave 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 FlutterWave 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 FlutterWave Donation Page on Blogger - sub-steps 3, fig4
    • How to Create FlutterWave Donation Page on Blogger - sub-steps 3, fig5

      Once found, just above the </head> tag, copy and paste the lines of codes below:

      <script>
        function makePayment() {
          FlutterwaveCheckout({
            public_key: document.getElementById("fpk").innerText,
            tx_ref: document.getElementById("treft").innerText,
            amount: document.getElementById("price").value,
            currency: "NGN",
            payment_options: "card",
            redirect_url: // specified redirect URL
              "/p/thank-you.html",
            meta: {
      	CartItems: document.getElementById("payName").innerText,
            },
            customer: {
              email: document.getElementById("email-address").value,
              name: document.getElementById("first-name").value,
      	  },
            callback: function (data) {
              console.log(data);
            },
            onclose: function() {
              // close modal
            },
            customizations: {
              title: "",
              description: "Donations...",
              logo: "",
            },
          });
        }
      </script>
    • How to Create Flutterwave Donation Page on Blogger - final step

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

  6. Done! You Can Now Test your Flutterwave Donation Page on Blogger

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



Conclusion

Although, if you prefer, you can achieve a more beautiful design with advanced customizations and options; with this simple Flutterwave donation page for Blogger website, you can collect donations from your fans, readers and followers using Flutterwave as your payment processor.


Meanwhile, to further achieve a more beautiful design and advanced options, you need to customize the look, feel and behavior of the donation page including its elements using some Js and CSS codes.


Have Questions to Ask?

If you have any questions to ask on the topic discussed on this page, you may use the comment box below here.


Thank you and good luck.


0 Comments

to top