Imagine you just completed building a mobile app for your business or client. The UI is smooth, the features work perfectly, and users are downloading your app at an incredible rate. But then you notice that 70% of users who add items to their cart never complete the purchase.
While you focused on perfecting the core features, your checkout might be missing the payment methods your users actually prefer. The solution to this problem is to make sure your checkout supports a variety of payment options, including digital wallet payments like Google Pay and Apple Pay.
In this guide, we'll walk you through integrating Apple Pay and Google Pay with Flutterwave, show you the code that makes it work, and talk about how adding digital wallet payment could be the difference between users who browse and users who buy.
What Are Digital Wallets?
A digital wallet is an app or service that stores your payment information (credit cards, debit cards, bank accounts) and lets you make payments without pulling out your actual cards. You can think of digital wallets like a physical wallet, but smarter. They don’t just store card numbers; they create secure, encrypted tokens that represent your payment methods.
When you tap "Pay with Apple Pay," you're not sending your actual card details. Instead, your device sends a tokenized card number (stored securely on your device) along with a unique, one-time cryptogram that's generated fresh for each transaction. Even if someone intercepts this data, they can't reuse it for another purchase. You can learn more about how Apple Pay does this in this guide.
Popular digital wallets include:
- Apple Pay: Built into every iPhone, iPad, and Apple Watch.
- Google Pay (formerly Google Wallet): Default on Android devices.
- Samsung Pay: Available on Samsung devices.
- PayPal: Cross-platform digital payments.
- Regional players: Alipay and WeChat Pay in China, Paytm in India.
In this guide, we’ll focus on Apple Pay and Google Pay integration, but first, let’s touch on why digital wallets matter more than you think, and then we’ll jump into some code.
Why Digital Wallets Matter More Than You Think
The standard checkout process is a major source of cart abandonment, and it looks like this for most users:
- User taps "Buy Now."
- User navigates to the checkout form.
- User struggles to type 16-digit card numbers on a small keyboard.
- User gets frustrated with multiple form fields (CVV, expiration, billing address).
- User abandons cart due to the cumbersome process.
How Digital Wallets Solve the Biggest Checkout Problems
The reasons users abandon carts have been extensively studied. The biggest checkout hurdles are mandatory sign-ups and clunky payment forms — forcing users to create an account is an instant buzzkill, causing a quarter of them to leave.
Let's look at some of the most common problems and reasons why users abandon checkouts:
| Friction Point | Abandonment Rate | How Apple/Google Pay Solves It |
|---|---|---|
| Mandatory Account Creation | 24–26% | Inherently a "guest checkout" experience; no new account needed. |
| Long / Complicated Checkout Process | 17–22% | Reduces a multi-step form to a single biometric authentication. |
| Security Concerns / Lack of Trust | 18–25% | Uses tokenization; actual card numbers are never shared with the merchant. |
| Not Enough Payment Methods | 13% | Adds the user's preferred, most convenient payment method. |
| Website Errors / Crashes | 13–17% | Reduces reliance on complex, custom-built form validation logic. |
| Extra Costs (Shipping, Taxes) | 48% | While digital wallets can't eliminate costs, they make the total cost clearer upfront and reduce checkout friction once users have decided to purchase. |
This is precisely the kind of checkout friction that Apple Pay and Google Pay eliminate, reducing checkout to literally two taps: Face ID and confirm.
The impact of this simple two-tap process is huge. It’s why mobile wallets are on track to process over $8 trillion in transactions by 2025 and why businesses that integrate Apple Pay see their conversion rates jump by up to 22.3% compared to old-school credit card forms.
Let’s dive into some code to guide you through integrating Apple Pay and Google Pay into your payment checkout.
Integrating Apple Pay/Google Pay with Flutterwave
Integrating Apple Pay/Google Pay through Flutterwave is straightforward and can be completed in just three steps. To get started, you need the following:
Prerequisites
Before writing any code, make sure the following setup is complete:
- Flutterwave Account: You should have a Flutterwave account.
- Webhook URL: You must have a webhook URL configured to receive final payment status updates from Flutterwave.
-
Enable Apple Pay/Google Pay in Dashboard: Navigate to your Flutterwave Dashboard, go to
Settings>Business Preferences>Payment methods, scroll down to the wallets section, and enable Apple Pay/Google Pay.
Note: We are using the v3 flow for our integration in this guide; you can refer to the
orchestrator flow guide for v4.
Our Payment Flow
Before we jump into the step-by-step implementation, let's visualize the entire payment process so you understand how all the pieces fit together. This overview will help you see where your code fits into the broader transaction flow and why each step is necessary.
The v3 flow streamlines the payment process into three main steps:
- Initiate Charge: Your server sends transaction details to the charges endpoint, specifying the wallet type (Apple Pay or Google Pay).
-
Redirect User: Flutterwave responds with an
auth_urlthat contains the redirect URL. Your client redirects the user to this URL where they'll see the payment button for their respective wallet.
After clicking the button, Flutterwave presents the native Apple Pay payment sheet.
3. Complete Payment (Verify transaction via Webhook): After the payment has been processed and is successful, Flutterwave processes it and sends a webhook to your server with the final transaction status. This webhook confirms the transaction's success or failure.
Step-By-Step Guide To Set Apple Pay And Google Pay With Flutterwave
Step 1: Initiating the Charge
The process begins with a server-side API call to Flutterwave's /v3/charges endpoint. You specify the payment type using the type query parameter.
Apple Pay Request:
curl --request POST \
--url 'https://api.flutterwave.com/v3/charges?type=applepay' \
--header 'Authorization: Bearer YOUR_SECRET_KEY' \
--header 'Content-Type: application/json' \
--data '{
"amount": 100,
"currency": "USD",
"email": "jane.doe@example.com",
"fullname": "Jane Doe",
"tx_ref": "AP_UNIQUE_TRANSACTION_REF_001"
}'
Google Pay Request:
curl --request POST \
--url 'https://api.flutterwave.com/v3/charges?type=googlepay' \
--header 'Authorization: Bearer YOUR_SECRET_KEY' \
--header 'Content-Type: application/json' \
--data '{
"amount": 100,
"currency": "USD",
"email": "jane.doe@example.com",
"fullname": "Jane Doe",
"tx_ref": "GP_UNIQUE_TRANSACTION_REF_001"
}'
Key Parameters:
-
amount: The total amount to charge -
currency: Three-letter ISO currency code -
email: Customer's email address (required) -
fullname: Customer's full name -
tx_ref: A unique transaction reference generated on your end
Step 2: Handling the Response and Redirecting
If your request is successful, Flutterwave will respond with a 200 OK status and a JSON body containing the payment details and redirect URL.
Sample Response:
{
"status": "success",
"message": "Charge initiated",
"data": {
"id": 645498756,
"tx_ref": "AP_UNIQUE_TRANSACTION_REF_001",
"flw_ref": "TKVH48681032738026",
"amount": 100,
"charged_amount": 104,
"app_fee": 4,
"currency": "USD",
"status": "pending",
"auth_url": "https://applepay.aq2-flutterwave.com?reference=TKVH48681032738026",
"payment_type": "applepay",
"created_at": "2022-06-11T12:18:11.000Z",
"customer": {
"id": 379560157,
"name": "Jane Doe",
"email": "jane.doe@example.com"
},
"meta": {
"authorization": {
"mode": "redirect",
"redirect": "https://applepay.aq2-flutterwave.com?reference=TKVH48681032738026"
}
}
}
}
Your server should extract the redirect URL from either data.auth_url or data.meta.authorization.redirect and send it back to the client:
const redirectUrl = responseFromServer.data.auth_url;
window.location.href = redirectUrl;
The user will then see the Apple Pay or Google Pay button on the hosted page. After clicking the button, they'll see the native payment sheet for their respective wallet.
Step 3: Verifying the Payment Status
This is the most critical part — your application must not rely on the redirect back to your site to confirm payment success. The only source of truth is the webhook from Flutterwave.
Sample Webhook Payload:
{
"event": "charge.completed",
"data": {
"id": 643032751,
"tx_ref": "AP_UNIQUE_TRANSACTION_REF_001",
"flw_ref": "OIFW66891029265658",
"amount": 100,
"charged_amount": 100,
"currency": "USD",
"status": "successful",
"payment_type": "applepay",
"processor_response": "APPROVED",
"created_at": "2022-06-07T16:41:28.000Z",
"customer": {
"id": 377827143,
"name": "Jane Doe",
"email": "jane.doe@example.com"
}
},
"event.type": "APPLEPAY_TRANSACTION"
}
Your webhook handler should:
- Verify the webhook signature (if configured)
- Check the
data.statusfield for"successful" - Verify the transaction using Flutterwave's verification endpoint
- Only then provide value to the customer
Example Node.js Webhook Handler:
app.post('/webhook', (req, res) => {
const { event, data } = req.body;
if (event === 'charge.completed' && data.status === 'successful') {
// Verify the transaction
verifyTransaction(data.flw_ref)
.then(verification => {
if (verification.status === 'successful') {
// Provide value to customer
fulfillOrder(data.tx_ref);
}
})
.catch(error => console.error('Verification failed:', error));
}
res.status(200).send('OK');
});
Resources
To help you on your integration journey, here are some official resources from Flutterwave docs:
- Apple Pay Integration Guide: Dive deeper into the specifics of integrating Apple Pay, including both the orchestrator and general flows.
- Google Pay Integration Guide: Detailed documentation for adding Google Pay to your checkout process.
Wrapping Up
Stop letting a clunky checkout dictate your revenue. By integrating Apple Pay and Google Pay, you can eliminate the biggest points of friction and convert more mobile browsers into buyers. Log into your Flutterwave dashboard to enable wallet payments today, or check out the official API documentation to get started.
Top comments (0)