POWERBOARD DEVELOPER HUB
PowerBoard Status PagePowerBoard Merchant Portal

Apple Pay

This document will guide you on how to correctly integrate Apple Pay via PowerBoard.

Apple Pay

This document will guide you on how to correctly integrate Apple Pay via PowerBoard.

applepay icon

📘

Before you begin

When sending requests to PowerBoard’s API, you must provide either a Public Key and/or Secret Key depending on your use case.

API keys are generated via PowerBoard’s Merchant Dashboard, in three easy steps:

  • Login to the PowerBoard Merchant Dashboard.
  • Click on the ‘My Company’ link and proceed to the ‘API and Security’ heading.
  • On screen, you’ll see both Public and Secret Key required to send requests to PowerBoard’s API.

🚧

Third Party Requirements

Apple Pay connected (sandbox mode) via PowerBoard Dashboard.

  • Apple Pay Developer Account
  • Apple Pay Merchant ID
  • Apple Pay Merchant ID Certificate
  • Apple Pay Merchant ID Private Key
  • Apple Pay Payment Processing Certificate
  • Apple Pay Payment Processing Private Key
  • Apple Pay sandbox wallet with test cards

Your integration will utilise the following components:

  • PowerBoard Client-SDK ('Widget')
  • PowerBoard REST API

Integrations Steps

Step 1) Create a PowerBoard 'Wallet' Token (API)

API Endpoint https://api.preproduction.powerboard.commbank.com.au/v1/charges/wallet
HTTP Method POST
Headers

Key

Value

Description
x-user-secret-key POWERBOARD_SECRET_KEY This is your PowerBoard API Secret Key.
Content-Type application/json Content-Type will always be application/json
Request Parameters
Field Type

Description
amount string Total amount for your Apple Pay transaction.
currency string Always set to 'AUD'. 
reference string

Reference for the transaction. 

This reference may assist to identify the transaction in your back-end systems. 

For example, a purchase order number or invoice number.
customer.first_name string

Customer First Name
customer.last_name string

Customer Last Name
customer.email string

Customer email address
customer.payment_source.gateway_id string Unique Gateway ID for your PowerBoard Commweb + Apple Pay service.  
{
    "customer": {
        "payment_source": {
            "gateway_id": "61c1c7192dc2f86ba9fe6ed6"
        }
    },
    "meta": {
        "store_id": "123",
        "store_name": "Store 123"
    },
    "amount": 10,
    "reference": "reference123",
    "description": "description123",
    "currency": "AUD"
}

{
    "status": 201,
    "error": null,
    "resource": {
        "type": "charge",
        "data": {
            "token": "YOUR_WALLET_TOKEN",
            "charge": {
                "_id": "63fd93c3d8e7552c56047752",
                "amount": 1,
                "currency": "AUD",
                "reference": "2023-02-28T05:40:18.905Z",
                "company_id": "63cf32a154a870183bf2398a",
                "description": "2023-02-28T05:40:18.905Z",
                "type": "financial",
                "status": "wallet_initialized",
                "capture": true,
                "authorization": false,
                "one_off": true,
                "amount_surcharge": null,
                "amount_original": null,
                "created_at": "2023-02-28T05:40:19.545Z",
                "updated_at": "2023-02-28T05:40:19.545Z",
                "schedule": {
                    "stopped": false
                },
                "archived": false,
                "meta": {},
                "customer": {
                    "payment_source": {
                        "type": "wallet",
                        "wallet_type": null,
                        "gateway_id": "YOUR_GATEWAY_ID",
                        "gateway_name": "CommWeb",
                        "gateway_type": "MasterCard"
                    }
                },
                "transactions": [],
                "shipping": {},
                "items": []
            }
        }
    }
}

❗️

Get the resource.data.token value from the response body.

Step 2) Create and initialise the PowerBoard Widget

  • Embed PowerBoard's Client-SDK in your page.
  • Create a container for the PowerBoard widget.
  • Set the PowerBoard Widget environment to 'preproduction_cba'.
  • Configure cba.WalletButtons class:
    • amount_label
    • country
  • Callbacks
    • onUnavailable
      • No wallet buttons available.
    • onPaymentSuccessful
      • Payment was successful.
    • onPaymentError
      • The payment was not successful.
    • onPaymentInReview
      • The payment is in fraud review by the wallet service.
  • Initialise the Widget with .load method.
<div id="widget-apple-Pay">   
<script src="https://widget.preproduction.powerboard.commbank.com.au/sdk/latest/widget.umd.min.js"></script>   
<script>
let button = new cba.WalletButtons("#widget-apple-Pay", "YOUR_WALLET_TOKEN",
    {
        amount_label: "Payment Amount",
        country: "AU",
        wallet: ["apple"]
            },
    )
    button.setEnv('preproduction_cba');
    button.onUnavailable(() => console.log("No wallet buttons available"));   
    button.onPaymentSuccessful((data) => console.log('Payment Data', data));         
    button.onPaymentError((data) => console.log("The payment was not successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
    button.load();
}
</script>

After the payment is completed (successfully) the onPaymentSuccessful call-back will trigger.

If the payment was not successful, the onPaymentError call-back will trigger.

{
    "event": "paymentSuccessful",
    "data": {
        "id": "640691b748533262f6508ef7",
        "amount": 1,
        "currency": "AUD",
        "status": "complete"
    }
}

Shipping information update scenario

After a shipping information update, call onUpdate(data) to return the updated shipping information.

Merchants should handle this callback, recalculate shipping costs and submit a POST charges/:id (request) with the new total amount and shipping amount.

If new options are needed based on updated shipping, you must return new amount and shipping_options data accordingly.

Before the end-user authorises the transaction, you will receive redacted address information such as

  1. address_country
  2. address_city
  3. address_state
  4. address_postcode

You may use this data to recalculate the amount and new shipping options, see more info here.

Apple Pay Test Cards

👍

Apple Pay Test Cards