Officialhelplines

Blogger Website: How to Accept FlutterWave Payments

Finally, after several days of testing, tweaking, testing again and again... and then... observe, iVMega Pro Premium Blogger Template now fully supports Flutterwave payments; making it the first of our Premium Blogger Template to ever supports Flutterwave payments.


This is in addition to PayPal payments that is already featured in all of our premium blogger templates.


What Does this Mean?

This means; through Flutterwave, you can now process and accept payments made with MasterCard card, Visa card and Verve card users directly from your blogger website.


It also means; without leaving your Blogger website, you can now accept donations, sell items, and receive payments from your customers that prefer to pay you using their MasterCard card, Visa card, Varve card and probably all other major credit and debit cards that are globally accepted by merchants and stores when you install iVMega Pro or any of our blogger templates that supports the Flutterwave payments henceforth.


Payment Channels Supported by Flutterwave:

  1. Barter
  2. Credit/Debit Cards (Verve, Visa, MasterCard...)
  3. mPesa
  4. PayPal
  5. Ghana mobile money
  6. Bank transfer
  7. Bank accounts
  8. Bank USSD
  9. Tanzania mobile money
  10. Rwanda mobile money
  11. Zambia mobile money
  12. Uganda mobile money
  13. Payattitude
  14. Paga
  15. 1Voucher

Through Flutterwave, customers can pay you or your businesses using any of the payment channels listed from above as options. Thus, being able to use Flutterwave on your blogger website means you can also accept payments from customers or enable your customers pay you directly from your blogger website for services rendered, items sold or donations using any of the additional payment channels forelisted.


NOTE

This is fairly a long post detailing why and how we made Flutterwave payments an added enhancement feature in our premium Blogger blogger templates.



Meanwhile, as usual, I will like for you to get everything right and understand all that is discussed here which is why I will be starting with making you understand what Flutterwave actually is.


So,


What is Flutterwave?

Flutterwave can be referred to as a payment processor and from your point of view, you can also refer to Flutterwave as a payment gateway. However way you see it, the core function of Flutterwave is to help businesses accept payments from customers for sold goods or services rendered.


Using Flutterwave, businesses and individuals can also send cross-border payments across Africa and beyond in a manner similar to PayPal Friends and Family payments.


Why Should I Use Flutterwave Payments On My Blogger Website?

Because it helps you accept payments from wider audiences, enable more payment channels and lets you offer your customers more flexibility and freedom.


Besides, Flutterwave is a service that makes you accept payments as if the payments are being transferred and sent directly to your bank accounts. Why? Because Flutterwave gives you the flexibility of either leaving the payments received in your Flutterwave wallet or automatically have it sent directly to your registered bank accounts.


And most importantly for you, your customers would love to have Flutterwave as an option.


But I Have Never Heard of Flutterwave Before. Can I Trust it?

Yes. Flutterwave may not be as popular as PayPal, Skrill, Payoneer to name a few of the other household names in the fintech industry yet, I guarantee you that Flutterwave is a service that should be given the same or better priority than you do for other similar services such as PayPal.


Why? You should trust Flutterwave because your customers would.


Few Reasons for Which Your Customers Would Choose Flutterwave

  1. Protection Against Fraud:

    As the internet fraud activities increases from day to day, it is paramount for any shoppers to be worrisome when shopping online and be as selective as possible in choosing the stores to shop or the payment channels to use.


    As a result, to protect the shoppers fund and the integrity of Flutterwave itself, the company uses an extensive KYC protocols.


    Flutterwave's KYC (know your customer) processes is an extensive and thorough one. This means that Flutterwave know the merchants you do businesses with than they know themselves.


    And no business setup with dubious motives would use a channel that exposes him. Right?


  2. Flutterwave Deals with Personality:

    By this, I mean all customers transactions with merchants on the Flutterwave channel are extremely traceable. This is because when customer pay a merchant using Flutterwave payment service, it is more like you are sending the payment directly to the merchants' bank account.


    And that can be traced. Thus, when you make a payment that does not attract values, customers know they can get their money back easily.


  3. Transparent Chargeback Procedures:

    Flutterwave's most popular payment channel being patronized is "card".


    When customers make a suspected or dubious transactions they can easily file a Chargeback and this is extremely easy with most financial institutions.


    Although charge-back can sometimes be filled even when the value is received but as a result of misunderstanding between customers and merchants, Flutterwave provides an easy and transparent dashboard for merchants to accept, decline or counter the Charge-back case as they see fit.



Now, because your customers probably already know all the forelisted points and perhaps, more; they would prefer to choose Flutterwave above other channels.


Which of Our Blogger Templates Currently Supports Flutterwave Payments?

As at the time this article is being published, only iVMega Pro Premium Blogger Template supports Flutterwave payments.


In addition to being able to accept cards, mPesa, Barter among other payments channels using the iVMega Pro Blogger Template via Flutterwave, the iVMega Pro Premium Blogger Template is extremely clean, neat, fast, speedy and responsive.


The template can be used by and installed on individual, personal and Coporate blogs. You can check iVMega Pro Premium blogger template here.


Henceforth, our future releases of blogger templates would be released fully supporting the Flutterwave payments services starting November 24. later this year.


Why Did We Strive to Have Flutterwave Featured in Our Blogger Templates?

The simple answer is: because majority of us at iVTemplates are bloggers too and we use the blogspot platform as frequent as any other blogging platform therefore; we understand everything the bloggers using the blogspot platform lack which in turn becomes their wants. We know that Flutterwave payments is in actual fact needed (and wanted) by the bloggers using the blogspot platform.


Moreover, if you have seen the about us section and read about our focus, mission and vision, you would have had the answers yourself.


In any case, see our extended answer from below. You might have a few things to take home from there.


And now the extended answer;


Originally, we do not create blogger templates that has the possibility and flexibility of accepting payments out of the box unless such features are specifically requested by individuals and perhaps, corporate bodies that may need such features enabled.


But we understand that while some bloggers actually blog for fun, most bloggers are bloging to make some money. Besides, it's not a bad idea to earn some rewards for a job well done. Is it?


A blogger that writes good how-to tutorials can ask for donations from loyal fans. Another blogger that publishes exclusive betting tips can require membership subscription which certainly involves payments.


Or, a fashion blogger that has really good designers can display fashion items for sale to her audience.


Even bloggers with extremely huge and quality traffic can sell ads spaces, guest posting and receive payments for it - processing and receiving payments should not be a difficult task for blogspot bloggers, too. Should it?


This is why we decided to including the possibility of processing payments directly from your blogger blog.


How Did We Start?

At first, we started with PayPal.


PayPal is an extremely popular and lovely payment processor. It is loved by virtually all shoppers but not all merchants love PayPal. In fact, majority of merchants that use PayPal do so because lots of customers prefer using PayPal - this was an extract from the response from our users.


Therefore, because our templates users ask for more, we set out to please.


So, in order to break the barrier, we need to introduce an alternative that offers the same or similar set of services as PayPal's.


So, Why Did We Choose Flutterwave?

The Simple answer: for its acceptability and flexibility.


We know lots of fintech companies. There is CashU, PayStack, Payoneer, Remita, Skrill, VoguePay and a whole lots of them but we need to introduce first, the most acceptable and then flexible one and at these, Flutterwave wins.


How?

PayPal for example; is extremely flexible but not so acceptable. Though for a set of good reasons, PayPal limits certain services from certain countries. Some merchants could only use certain services while merchants from certain countries are totally disallowed by the PayPal system.


Based on the information gathered while making our choice, it is also observed that shoppers from certain countries are constrained from using certain valuable PayPal services.


Whereas in that, Flutterwave services are available to merchants in vertually all countries of the world.


Paystack or VoguePay could have humbly fill the space instead of Flutterwave, but as observed; there is likely some limitations to the number of currency a merchant can accept.


For example, to accept payment in USD from your website (with Paystack) you need to have a business (or, at least personal) bank account that is domiciled in US Dollars.


Although, in the future, we would feature Paystack and likely; VoguePay payments in our premium blogger templates aslo but the outcome of these possibilities totally depends on the requests (for both or either of the services) we receive.


If you would like to announce or vote your request, you can simply use our Twitter handle by using either of the boxes below.


Vote Paystack

@iVTemplates, I'd loved to see PayStack payments fully functional in my blogger website



Vote VoguePay

@iVTemplates, I'd prefer to see VoguePay fully functional in blogger website instead



So, How Can You Receive Payments for Sold Items, Rendered Services or Accept Donations from your Blogger Website Using Flutterwave?

I supposed you have already seen the video captioned: "Recieve and Process payments on Blogger Blog via Flutterwave" earlier on this page. And I supposed you liked the payment flow and speed.


How to Accept Payment or Donations on Blogger Website Using Flutterwave

  1. Register An Account with Flutterwave

    Before you can be able to process and accept payments on your blogger website, you need to register an account with Flutterwave. To do that, you may visit flutterwave.com from here or do a Google search for it.


    Note

    The registration requirements may very by country. Simply visit Flutterwave website to register and supply all the information as required on the registration portal.


    Once you are registered and your Flutterwave account is set to live, you are good to go.


  2. Obtain your Flutterwave Public Key

    The Flutterwave public key is more like a unique identifier that is assigned to every merchant account registered with Flutterwave. Flutterwave uses the public key to identifying in whose account a particular transaction or activity is being carried out.


    Once your registration with Flutterwave is successful and you are set to accepting payments, copy your Flutterwave public key from your Flutterwave settings dashboard. It would be required in your blogger template.


    Note

    You will find your Flutterwave public key under API section in your Flutterwave settings dashboard.


  3. Replace your Flutterwave Public Key with the One Provided in your Template

    Copy your assigned Flutterwave public Key from your Flutterwave account dashboard and replace it with the one already present in your template. See our illustrated tutorial on how to do that.


    We have already provided a detailed and illustrated tutorial on how to configure your blogger template including how to get your blogger template setup for accepting payments via Flutterwave and PayPal.


    Each of our blogger template comes with its own specific illustrated configuration tutorial PDF file. This file is uploaded in the same folder as your template in your Google Drive. We also push the updated PDF file in that same location in case there is any updates.


  4. Set Your Payment Preferences

    By your payment preferences, I mean the amount you wish to collect, service name or item name for which the payment is being requested and other details required.


    Before you can initiate Flutterwave payment from your blogger website, six parameters must be supplied and of all these six parameters, only two are mandatorily supplied by you while another two or more are supplied by your customers.


    Before we proceed to the next step, please see the list below; explaining briefly, the mandatory parameters required to initiate and process Flutterwave payments from your blogger website.


    • tx_ref

      tx_ref carries the transaction reference and must be unique for every transaction. Do not worry about this as we have taken care of that by making sure that a unique tx_ref is automatically supplied for every single transaction initiated. It is done such that even when a million transaction occurs from your blog the same minutes, their tx_ref would not be the same.


    • Amount

      This is the price you wish to bill, charge or collect from your customers for a service or an item. You need to enter this manually.


      In the next step, you shall see how to simply enter it in your blog post, blogger page or anywhere on your blogger blog.


    • Customer

      These fields hold and pass your customers information to the Flutterwave systems. Information such as customers' email address, phone number, name etc are passed to the Flutterwave systems and used in processing the transaction.


      Your customers have to enter these information on the page. In the next step, we show you how to allow your customers supply any information you require of them.


    • Payment_options

      This is where you declare which payment channels you wish to make available to your customers. For example, if you want mPesa, card and bank accounts payments only.


      We default this to cards payments only but your Flutterwave dashboard preferences can override this.


      Please check the illustrated PDF file that's contained in your theme folder in Google Drive for detailed instructions on this.


    • Redirect_url

      This is where your customers are redirected after each successful payment is made. This redirect_url should point back to your blogger website. We have already contained a matching "thank you" page for your blogger blog in your template folder on Google Drive.


      You simply need to copy and paste the entire content on a new or existing static page on your blogger website. And then replace its url in your redirect_url space provided within the template.


      See the illustrated instructional PDF file contained in your template folder on Google Drive for detailed insructions on that.


    • Customizations

      This section allows you brand the Flutterwave payments modal shown to customers when they click to pay you through Flutterwave. Your blog or business name, logo and description are expected there.


  5. Create and Publish A Static Page or Post

    Now this next step is a simple one you are used to. Just login your blogger blog and create a new blog post or a new static page - which one to choose here greatly depends on your personal requirements.


    If the payment you are requesting is a donation, I would recommend that you create a static page. If it is an item you are selling on your blogger website, for the best SEO result, you should use blog post instead of a static page.


    Whichever one you choose, it's okay with me for as long as it's okay by you and Flutterwave payments would work fine regardless. Just enter your preferences (parameters) as appropriate.


    Remember?

    Only two parameters are mandatorily entered by you? And the other two by your customers but depending on the purpose for which the payment is being requested, you may require your customers to enter more data on your page before proceeding to the Flutterwave payment modal.


    In any case, regardless of how many data you require your customers to supply, you need to make it possible and easy for your customers to supply that info.


    How to Enter Parameters for Initiating Flutterwave Payments

    1. Blogger blog HTML Editing View
      Switch Your Blogger Post Editing Screen to HTML View

      First, you need to switch your blogger editing view to HTML Editing view.


      Pro Tip:

      If you are not comfortable with typing in HTML, you can type your whole content in Rich Text Format view first then, when you are done typing; simply switch to HTML and modify the sections as explained below here.

    2. Flutterwave item name
      Enter the Item Name or Service Name

      Before anything at all, you should have a name for what you are selling. Even if it's just donations you are collecting; just declare "donation" as the name.


      To do that, let's suppose the name of the item you are selling is Franco T-Shirt.


      Now, to make Flutterwave systems mark or identify that Franco T-Shirt is the name of the item or is the reason for which you are requesting for that payment, simply declare (enter) it within your blog post or static page. You could do so in a table on your blogger sidebar or within the page using any html tag with an id "item_name". By any html tag I mean, b, span, li... See the example below:


       <b id="item_name"> Franco T-Shirt </b>

      And by that, you have simply entered the item name and Flutterwave can now identify it.


    3. Flutterwave item price
      Enter the Amount

      Now is the time to enter the amount you wish to collect, bill or charge.


      Similar to how you declared (enter) the name from the above, to enter the price just follow the same procedure but this time; ensure you change the item_name id to item_price.


      See this example:


      <span id="item_price"> 2500 </span>
      Things to NOTE:
      • I didn't put any sign ($, £, €, ¥ etc) before or after the price. I simply enter 2500. Ensure you do the same.

      • In which currency people paying through Flutterwave on your blog has already being declared in the blogger template. We default the currency code to USD (US Dollars). If you wish to change it to say; NGN (Nigeria Naira) or GHS... you can refer to the instructional document (PDF file) contained in your template's Google Drive folder.

      • The price 2500 that is used in the example is an assumption for the item. You can bill or charge from between 1 and above. But the maximum amount you can charge per transaction is capped at $1000 or it's equivalent in other currencies - that's Flutterwave controlled limit, I guess.

      • Although you can enter (declare) the amount (price) you wish to bill (collect or charge) before the name, what's important is that you make sure all the parameters required to initiate the transaction are present.

      • Also, in the example for price given above, I used the span tag. I could have used the b tag so that it becomes:

      • <b id="item_price"> 2500 </b>
      • I just prefer not to use it because they both mean the same. It's only the formatting that's different. However, what's important that must be there and that actually passes the message we need to the Flutterwave payment systems are the ids thus; the "item_name" and "item_price"

    4. Allow your Customers Enter their Data

      Remember that your customers' data are a requirement? Of all the customers' data needed to initiate a Flutterwave payment, the email address is most required but I recommend that, for any transaction; your customer's name (even if only the first name) must be supplied too.


      This would come handy and useful whenever you need to communicate your customers such as sending them messages for supporting and patronising your business.


      So, how do you allow your customers enter their data in a manner that would be useful to initiate Flutterwave payments on your blogger blog?


      See these examples below:


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

      That's for name; your customer's first name.


      And this simple line of codes below allows your customers enter their e-mail address on your blogger blog while the line of codes above allows your customers enter their first name.


      <input type="email" id="email-address" placeholder="enter your email here" />
      Flutterewave customer email input
      Things to NOTE:
      • You can simply copy all or any of the codes from above and paste it where you want it displayed on your blog post or static page. They can also fit in anywhere you want within your blogger blog.

      • If you decide to write the codes yourself, observe the ids within the line of codes. I mean the id="first-name", "id=email-address" and make sure they appear exactly as seen from above.

      • Lastly, be informed that you need to switch your blogger blog post or page editing screen to HTML View before the codes copied (pasted) can be properly formatted.

    5. Flutterwave Pay Now Button
      Lastly, Help your Customer Initiate Flutterwave Payment Modal

      To do this, simply input your Pay Now button ideally in a spot where your customers can easily see it.


      You can copy and paste the line of codes in the code block below and paste it whereever you want Flutterwave payment button appear on your page.


      <button type='button' onClick='makePayment()'> Pay Now</button>

      Once clicked, the button above collects and sends all the required data including the ones entered by you, by your customer and those auto-generated and sends them to the Flutterwave systems. Using these info Flutterwave displays an appropriate payment modal from which your customer proceed to complete the payment.


      Note:
      • Ensure your button contains onClick='makePayment()' as exactly - it is very important because that is the key that ties the button to Flutterwave function that calls the payment modal.

      • To avoid any confusion or mistakes, these text are already contained in your template folder. You can simply copy and paste from there.


0 Comments

to top