Apple Pay
This document will guide you on how to correctly integrate Apple Pay via PowerBoard.
This document will guide you on how to correctly integrate Apple Pay via PowerBoard.
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 |
|
||||||||||||||||||||||||
| Request Parameters |
|
{
"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.tokenvalue 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.
- onUnavailable
- 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
- address_country
- address_city
- address_state
- address_postcode
You may use this data to recalculate the amount and new shipping options, see more info here.