Need to Accept Payment on Blogger? This is How to Use Flutterwave

Finally, after several days of testing, tweaking and some observations, we have finally released our first blogger theme that fully supports Flutterwave payments. This is in addition to PayPal payments that is already featured in all 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 blog.


It also means 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 acceptable by merchants and stores directly from your Blogger blog when you install any of our blogger templates that supports the Flutterwave payments henceforth.


Additionally, Flutterwave also allows your customers pay you using Barter, mPesa, Ghana mobile money, bank transfer, their bank accounts, Tanzania mobile money, Rwanda mobile money, Zambia mobile money, Uganda mobile money, Payattitude, Paga, 1voucher and a few other channels not listed here.


Thus, being able to use Flutterwave on your blogger blog means you can also accept payments from customers or enable your customers pay you directly from your blogger blog 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 more recent blogger templates.


Meanwhile, be rest assured that every minutes you spend peering through this post is rewarded handsomely in supposed values you get in return.


Wants Flutterwave payments enabled in your blogger blog without changing your theme? Contact us.

Don't understand the steps explained? Don't worry. See our videos. The whole steps take less than 3 minutes!

What is Flutterwave?

Flutterwave can be regarded as a payment processor and based on your own 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.


Flutterwave can also be used by businesses and individuals to 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 Blog?

Because it helps you accept payments from wider audiences, enable more payment channels and lets you offer your customers 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 Your Customers (Shoppers) 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 chargeback 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 Chargeback 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 iVTheme Blogger Theme Currently Supports Flutterwave Payments?

At the moment, only iVMega Premium Blogger Template supports Flutterwave payments.


In addition to being able to accept cards, mPesa, Barter among other payments channels using the iVMega Blogger Template via Flutterwave, the iVMega 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 the features and see the video of the iVMega 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 iVTheme 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 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 should have had this answer all by 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 from stock unless such features are specifically requested by individuals and perhaps, Coporate 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 payment.


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.


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 blog or business (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 themes 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
Tweet to Vote Paystack
Vote VoguePay
Tweet to Vote VoguePay
Vote Both
Tweet to Vote Both

So, how can you receive payments for sold items, rendered services or accept donations from your blogger blog followers 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 Blog Using Flutterwave

STEP 1. Register An Account with Flutterwave

Before you can be able to process and accept payments on your blogger blog, 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. Visit their 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.


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

STEP 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 configuration illustrated 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.


STEP 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 blog, six (6) parameters must be supplied and of all these six (6) parameters, only 2 (two) are mandatorily supplied by you while 2 (two) or more are supplied by your customers as well.


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


i- 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 in our configuration. It is autogenerated such that even when a million transaction occurs from your blog the same minutes, their tx_ref would not be the same.


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


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


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


v- Redirect_url:

This is where your customers are redirected after each successful payment is made. This redirect_url should point back to your blogger blog. 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 blog. 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.


vi- Customizations:

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


STEP 5. Create and Publish A Static Page or Blog 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 blog, 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: we mention that only 2 (two) parameters are mandatorily entered by you? And 2 (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 supply you, you must make it possible for your customers to supply that info.


Below here is how to do just that.


How to Enter Parameters for Initiating Flutterwave Payments
i. Switch Your Blogger Blog Post Editing Screen to HTML View
Blogger blog HTML Editing View

First, you need to switch your blogger blog 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.

ii. Enter the Item Name or Service Name
Flutterwave item 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.


And here is how to declare (enter) it;

  • First, 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, static page, in a table on your blogger blog sidebar... 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.
iii. Enter the Amount
Flutterwave item price

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 blog 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 theme 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 - 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"


iv. 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.
Lastly, Help your Customer Initiate Flutterwave Payment Modal
Flutterwave Pay Now Button

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