Apple Pay™️

📘

Getting Started

We recommend checking out the introductory section to understand the basics of direct charge first. This guide assumes you’ve read that.

Apple Pay offers a great experience for customers with iOS devices. With this payment method, you can integrate directly to the Apple checkout on your website (or store).

Prerequisites

Before starting your integration, you should:

1. Ensure that your Flutterwave account is live.
2. Inform your customers whether Apple Pay is available in their region. Here is a list of countries/regions where you can use Apple Pay.

Payment Flow

In the hosted integration, we simplify the process of setting up Apple Pay on your website. Follow the steps below:

1. Initiating the payment.
2. Redirecting the user securely. (Only redirect URLs with https TLS1.2 and above will be approved for use).
3. Complete the payment.

Step 1: Initiating the Payment

First, you'll need the customer's email. Combine that with the rest of the payment details to create the payload and send it to our charge endpoint. You'll need to specify amount, currency, fullname, and a unique tx_ref. You can also pass on more details, like the fullname and custom meta information. See the endpoint reference for all parameters that can be passed.

# Apple Pay
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": "[email protected]",
     "fullname": "Flutterwave Developers",
     "tx_ref": "BJUYU399fcd43_success_mock"
}'

Generating a payment link via standard would open a modal like this.

🚧

Apple Pay Support

Apple Pay only supports Safari web browser. Your users should not use the payment method on Chrome and other web browsers.

Step 2: Redirecting your Customers

After a successful charge, You'll get a response that looks like this:

{
   {
    "status": "success",
    "message": "Charge initiated",
    "data": {
        "id": 645498756,
        "tx_ref": "MC-TEST-1234523_success_mock",
        "flw_ref": "TKVH48681032738026",
        "device_fingerprint": "gdgdhdh738bhshsjs",
        "amount": 1,
        "charged_amount": 1.04,
        "app_fee": 0.04,
        "merchant_fee": 0,
        "processor_response": "Pending validation",
        "auth_model": "APPLEPAY",
        "currency": "GBP",
        "ip": "192.168.0.1",
        "narration": "Test payment",
        "status": "pending",
        "auth_url": "https://applepay.aq2-flutterwave.com?reference=TKVH48681032738026",
        "payment_type": "applepay",
        "fraud_status": "ok",
        "charge_type": "normal",
        "created_at": "2022-06-11T12:18:11.000Z",
        "account_id": 3442,
        "customer": {
            "id": 379560157,
            "phone_number": "09012345678",
            "name": "Flutterwave Developers",
            "email": "[email protected]",
            "created_at": "2022-06-11T12:18:11.000Z"
        },
        "meta": {
            "authorization": {
                "mode": "redirect",
                "redirect": "https://applepay.aq2-flutterwave.com?reference=TKVH48681032738026"
            }
        }
    }
   }
}

Let us take a closer look at the response:

• status is "successful", which means the charge was initiated successfully.
• data.status is "pending", meaning that the payment has been initiated but the payment has not yet authorized/approved by the User.
• meta.authorization contains the important details to complete the payment. The meta.authorization.redirect field has the redirect URL to complete the payment.

The redirect URL routes your users to the hosted page, where they click on the button to interact with the Apple Pay checkout. After making payments, we redirect the users back to your application.

Step 3: Completing the payment

After completing the payment, we'll send you a webhook response to your server. Here is an example webhook response:

{
	"event": "charge.completed",
	"data": {
		"id": 643032751,
		"tx_ref": "LSM090260670602_success_mock",
		"flw_ref": "OIFW66891029265658",
		"device_fingerprint": "63233400dfb5bfc496bd0c63c22f1e38",
		"amount": 1,
		"currency": "GBP",
		"charged_amount": 1,
		"app_fee": 0.04,
		"merchant_fee": 0,
		"processor_response": "APPROVED",
		"auth_model": "APPLEPAY",
		"ip": "89.240.119.228",
		"narration": "Aminat Enterprises",
		"status": "successful",
		"payment_type": "applepay",
		"created_at": "2022-06-07T16:41:28.000Z",
		"account_id": 707940,
		"customer": {
			"id": 377827143,
			"name": "Lara Ad",
			"phone_number": null,
			"email": "[email protected]",
			"created_at": "2022-06-07T16:41:28.000Z"
		}
	},
	"meta_data": {},
	"event.type": "APPLEPAY_TRANSACTION"
}

In your webhook implementation, upon receiving the hook, you must verify the payment before providing value to the customer. See our guide to transaction verification for details.

Testing Apple Pay

You can find test credentials and mock data for your integration tests in the testing helpers section.

Next Steps

Before you go live with your integration, be sure to check out our recommendations for integration for extra guidelines. If you ever find yourself stuck, don't hesitate to reach out to our dedicated support team for assistance.