Apple Pay™️

We recommend reading our Direct Charge overview post first, to fully grasp the basics of the direct charge before you proceed.

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

Pre-requisites

Before staring 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 abstract the complexity involved in setting up Apple Pay on your website. As a developer, These are the important aspects of the payment flow.

  1. Initiating the payment.
  2. Redirecting the user securely. (Only redirect URLs with https TLS1.2 and above will be approved for use.)
  3. Completing 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](https://support.flutterwave.com/en/articles/3632719-accepted-currencies), fullname and a unique tx_ref. You can also pass more details, like the fullname and custom meta information. See the endpoint reference for all parameters that can be passed.

This payment method is not available in our backend libraries. Call the endpoint to create the checkout button in your application.

# 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": "developers@flutterwavego.com",
     "fullname": "Flutterwave Developers",
     "tx_ref": "BJUYU399fcd43_success_mock"
}'

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

Apple Pay only supports Safari web browser. Your users would 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": "developers@flutterwavego.com",
            "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": "omolara@flutterwavego.com",
      "created_at": "2022-06-07T16:41:28.000Z"
    }
  },
    "meta_data":{},
  "event.type": "APPLEPAY_TRANSACTION"
}

In your webhook implementation, on receipt of the hook, you must verify the payment and give value 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 Integration Guide for extra guidelines. If you ever find yourself stuck, don't hesitate to reach out to our dedicated support team for assistance.

Loading...