> ## Documentation Index
> Fetch the complete documentation index at: https://flutterwaveinc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# E-commerce

> Build a future-proof E-commerce payment system.

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.

```javascript theme={null}
<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:

```javascript theme={null}
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: 'anitaj@gmail.com',
		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:

```json theme={null}
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:

```javascript theme={null}
// 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:

```json theme={null}
{
	"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": "anitaj@gmail.com",
			"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](/payments-embed/inline). Beyond Flutterwave Inline, you can also use our [HTML Checkout](/payments-embed/html-checkout) or [Flutterwave Standard](/payment-api/flutterwave-standard) to process payment on your E-commerce app.