Afterpay
This document will guide you on how to correctly integrate Afterpay via PowerBoard.
This document will guide you on how to correctly integrate Afterpay with 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.
You will also need to ensure that the Afterpay service on your PowerBoard Merchant Dashboard is set to 'Version 2'
Third-Party Requirements
- Afterpay merchant account connected (sandbox mode) via PowerBoard Dashboard.
- Afterpay test customer account
Your integration will utilise the following components:
- PowerBoard Client-SDK ('Widget')
- PowerBoard REST API
Integration 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 | x-user-secret-key- POWERBOARD_SECRET_KEY - This is your PowerBoard API Secret Key. Content-Type - application/jsonContent - Type will always be application/json. |
| Request Parameters | amount - string - Total amount for your Afterpay transaction. description - string - Description of item/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.phone - string - Customer phone number. customer.email - string - Customer email address. customer.payment_source.address_line1 - string - Customer Address, line 1. customer.payment_source.address_line2 - string - Customer Address, line 2. customer.payment_source.city - string - Customer City. customer.payment_source.state - string - Customer State. customer.payment_source.postcode - string - Customer Postcode. customer.payment_source.country - string - Customer Country. meta.store_id - string - Afterpay StoreID meta.store_name - string - Afterpay Store Name meta.success_url - string - Redirect URL for successful transaction meta.error_url - string - Redirect URL for error transaction shipping.amount - string - Total shipping amount for Afterpay transaction shipping.currency - string - Always set to 'AUD'. ; shipping.address_line1 - string - Shipping address line shipping.address_city - string - Shipping City shipping.address_state - string - Shipping state shipping.address_country - string - Shipping Country shipping.address_postcode - string - Shipping Postcode shipping.contact.first_name - string - Shipping Contact First Name shipping.contact.last_name - string - Shipping Contact Last Name shipping.contact.phone - string - Shipping Contact Phone Number items.amount - string - Amount for individual item items.name - string - Name of individual item items.type - string - Type of item items.quantity - string - Quantity of item ordered items.item_uri - string - Resource identifier for item items.image_uri - string - Resource identifier for item image |
{
"amount": 2,
"reference": "reference",
"description": "description",
"currency": "AUD",
"customer": {
"email": "[email protected]",
"first_name": "Test",
"last_name": "User",
"phone": "+61411111111",
"payment_source": {
"gateway_id": "64111f229cc5a562ef7aef01",
"address_line1": "11 Harbour Street",
"address_city": "Sydney",
"address_state": "NSW",
"address_country": "AU",
"address_postcode": "2000"
}
},
"meta": {
"store_id": "1234",
"store_name": "your site name",
"success_url": "https://yoursite.com.au/success",
"error_url": "https://yoursite.com.au/success"
},
"shipping": {
"amount": 1,
"currency": "AUD",
"address_line1": "11 Harbour Street",
"address_city": "Sydney",
"address_state": "NSW",
"address_country": "AU",
"address_postcode": "2000",
"contact": {
"first_name": "Test",
"last_name": "User",
"phone": "+61411111111"
}
},
"items": [
{
"amount": 1,
"name": "itemname",
"type": "itemtype",
"quantity": 1,
"item_uri": "https://asd.com",
"image_uri": "https://asd2.com"
}
]
}
{
"type": "charge",
"data": {
"token": "YOUR_POWERBOARD_WALLET_TOKEN",
"charge": {
"_id": "64f5253a29e68158b5caf4fb",
"amount": 2,
"currency": "AUD",
"reference": "reference",
"company_id": "62959eb394af9655cd2ded4b",
"description": "description",
"type": "financial",
"status": "wallet_initialized",
"capture": true,
"authorization": false,
"one_off": true,
"amount_surcharge": null,
"amount_original": null,
"created_at": "2023-09-04T00:30:50.752Z",
"updated_at": "2023-09-04T00:30:50.752Z",
"shipping": {
"amount": 1,
"currency": "AUD",
"address_line1": "11 Harbour Street",
"address_city": "Sydney",
"address_postcode": "2000",
"address_state": "NSW",
"address_country": "AU",
"contact": {
"first_name": "Test",
"last_name": "User",
"phone": "+61411111111"
}
},
"schedule": {
"stopped": false
},
"archived": false,
"meta": {
"store_id": "1234",
"store_name": "QA Team",
"success_url": "https://commbank.com.au",
"error_url": "https://google.com"
},
"customer": {
"last_name": "User",
"first_name": "Test",
"email": "[email protected]",
"phone": "+61411111111",
"payment_source": {
"type": "wallet",
"wallet_type": "afterpay",
"gateway_id": "64111f229cc5a562ef7aef01",
"gateway_name": "Afterpay V2",
"gateway_type": "Afterpay",
"address_line1": "11 Harbour Street",
"address_city": "Sydney",
"address_country": "AU",
"address_state": "NSW",
"address_postcode": "2000"
}
},
"transactions": [],
"items": [
{
"name": "itemname",
"amount": 1,
"quantity": 1,
"item_uri": "https://asd.com",
"image_uri": "https://asd2.com",
"type": "itemtype"
}
]
}
}
}
Once you have submitted your API charge request, PowerBoard will respond accordingly with a 201 Created. The response should be stored against your database or relevant payments ecosystem and the token should be used to initialize the Afterpay widget in the next step
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:
- style
- country
- Handle the callbacks
- onUnavailable
- No wallet buttons available
- onUnavailable
- Initialise the Widget with .load method.
<script src="https://widget.preproduction.powerboard.commbank.com.au/sdk/latest/widget.umd.min.js"></script>
<div id="widget"></div>
<script>
let button = new cba.WalletButtons(
"#widget",
"YOUR_POWERBOARD_WALLET_TOKEN",
{
country: "AU",
style: {
afterpay: {
button_type: "white",
}
}
}
);
button.setEnv('preproduction_cba');
button.onUnavailable(() => console.log("No wallet buttons available"));
button.load();
</script>
Upon successful Afterpay transaction user will be redirected to your **success_url **and failed or errored transaction will be redirected to your error_url. Both scenarios should be handled correctly in the merchant site.
Once complete, you will be able to view the charge in the merchant dashboard.
