E-commerce

This guide covers the following:

• An overview of how E-commerce works.
• An introduction to Flutterwave Inline.
• Step-by-step instructions to implement Flutterwave Inline.

Overview of E-commerce Business

An E-commerce platform lets people buy and sell goods and services online. It operates under different models, including:

• Business-to-Business (B2B)
• Business-to-Consumer (B2C)
• Consumer-to-Consumer (C2C)
• Consumer-to-Business (C2B).

Platforms can focus on one of these models or combine several, but they all need essential components like websites, payment gateways, logistics, and inventory management to create a smooth experience for buyers and sellers.

Although E-commerce brings convenience and benefits to both parties, running a platform also comes with its share of challenges, such as:

1. Payment Failures and Abandoned Carts: Customers drop off when payment methods fail or are too complicated.
2. Limited Payment Options: Customers prefer different payment methods based on their location (e.g., mobile money in Africa, cards in Europe, PayPal in the U.S.).
3. Security Concerns: Handling sensitive payment data comes with risks of fraud and data breaches.
4. Global Reach: It’s challenging to accept payments in multiple currencies and manage cross-border transactions.

These issues can impact your conversion rate, customer satisfaction, and, ultimately, your revenue. But with Flutterwave Inline, you can solve these problems.

What is Flutterwave Inline?

Flutterwave Inline is a fully customizable payment experience that lets you accept payments on your e-commerce platform with minimal effort. It supports multiple payment methods and currencies, making it ideal for local and international customers. Here’s what you get with Flutterwave Inline:

• Easy Integration: You can quickly add Flutterwave Inline to your E-commerce platform and start accepting payments without a complicated setup process.
• Supports Different Payment Methods: Customers can pay using cards, bank transfers, mobile money, Apple Pay, Google Pay, and more, giving them plenty of options.
• Reach Customers Anywhere: Accept payments from customers all over the world, helping your business grow beyond borders.
• Secure Transactions: Built-in security tools like PCI-DSS compliance, tokenization, and fraud detection keep customer payments safe, giving everyone peace of mind.
• Customizable Experience: You can personalize the checkout page to match your brand’s look, creating a smooth experience for your customers.
• Faster Settlements: Get your money quickly with fast payment processing, helping you manage your business operations better.
• Analytics and Reporting: Access detailed reports to track payments, understand customer behavior, and make smart, data-driven decisions to grow your business.

How to Use Flutterwave Inline in your E-commerce App

To add Flutterwave Inline to your E-commerce app, you’ll do the following:

1. Add the Library: In the root of your project, include the Flutterwave Inline library with a script tag.

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

2. Call the FlutterwaveCheckout Function: In your checkout page, call the FlutterwaveCheckout() function with the details of the items in the cart. For example, if a customer wants to purchase a bone straight hair for 300,000 NGN, your request will look like this:

FlutterwaveCheckout({
    public_key: '<ADD YOUR PUBLIC ID HERE>',
    tx_ref: '<ADD YOUR TRANSACTION REFERENCE HERE>',
    amount: 300000,
    currency: 'NGN',
    payment_options: 'card, banktransfer, ussd',
    redirect_url: 'https://sample-redirect-url.com',
    meta: {
        consumer_id: 23,
        consumer_mac: '92a3-912ba-1192a',
    },
    customer: {
        email: '[email protected]',
        phone_number: '08102909304',
        name: 'Anita John',
    },
    customizations: {
        title: 'Trinity Luxury Hairs',
        description: 'Payment for bone straight hair',
        logo: 'https://www.logolynx.com/images/logolynx/22/2239ca38f5505fbfce7e55bbc0604386.jpeg',
    },
});

The required parameters include public_key, tx_ref, amount, currency, and customer, which are essential to processing payments correctly. Additionally, there are optional parameters to specify supported payment methods and to customize/personalize the checkout experience for your customers.

When the customer initiates a payment, they are redirected to the specified redirect_url, with the transaction reference, transaction ID, and status appended as query parameters. For example:

tx_ref=ref&transaction_id=30490&status=successful

3. Verify the Transaction on your Backend: The last step is to verify that the payment was successful before giving value to your customer. Use the transaction ID to make the request as shown below:

// Install with: npm i flutterwave-node-v3

const Flutterwave = require('flutterwave-node-v3');
const flw = new Flutterwave(process.env.FLW_PUBLIC_KEY, process.env.FLW_SECRET_KEY);
flw.Transaction.verify({ id: 30490 }) //REPLACE WITH YOUR TRANSACTION ID
    .then((response) => {
        if (
            response.data.status === "successful"
            && response.data.amount === expectedAmount
            && response.data.currency === expectedCurrency) {
            // Success! Confirm the customer's payment
        } else {
            // Inform the customer their payment was unsuccessful
        }
    })
    .catch(console.log);

You’ll get a response similar to this:

{
  "status": "success",
  "message": "Transaction fetched successfully",
  "data": {
    "id": 1163068,
    "tx_ref": "akhlm-pstmn-blkchrge-xx6",
    "flw_ref": "FLW-M03K-02c21a8095c7e064b8b9714db834080b",
    "device_fingerprint": "N/A",
    "amount": 300000,
    "currency": "NGN",
    "charged_amount": 300000,
    "app_fee": 1000,
    "merchant_fee": 0,
    "processor_response": "Approved",
    "auth_model": "noauth",
    "ip": "pstmn",
    "narration": "Payment for bone straight hair",
    "status": "successful",
    "payment_type": "card",
    "created_at": "2020-03-11T19:22:07.000Z",
    "account_id": 73362,
    "amount_settled": 299000,
    "card": {
      "first_6digits": "553188",
      "last_4digits": "2950",
      "issuer": " CREDIT",
      "country": "NIGERIA NG",
      "type": "MASTERCARD",
      "token": "flw-t1nf-f9b3bf384cd30d6fca42b6df9d27bd2f-m03k",
      "expiry": "09/22"
    },
    "customer": {
        "email": '[email protected]',
        "phone_number": '08102909304',
        "name": 'Anita John',
    },
  }
}

Next Step

To learn more about Flutterwave Inline and other edge cases you can handle with it, check out the documentation. Beyond Flutterwave Inline, you can also use our HTML Checkout or Flutterwave Standard to process payment on your E-commerce app.