POWERBOARD DEVELOPER HUB
PowerBoard Status PagePowerBoard Merchant Portal

Afterpay (WalletButton)

This document will guide you on how to correctly integrate Afterpay with PowerBoard.

Afterpay

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

afterpay 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:

  1. Login to the PowerBoard Merchant Dashboard.
  2. Click on the ‘My Company’ link and proceed to the ‘API and Security’ heading.
  3. 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

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 Endpointhttps://api.preproduction.powerboard.commbank.com.au/v1/charges/wallet
HTTP Method
POST
Headersx-user-secret-key- POWERBOARD_SECRET_KEY - This is your PowerBoard API Secret Key.
Content-Type - application/jsonContent - Type will always be application/json.
Request Parametersamount - 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

  1. Embed PowerBoard's Client-SDK in your page.
  2. Create a container for the PowerBoard widget.
  3. Set the PowerBoard Widget environment to 'preproduction_cba'.
  4. Configure cba.WalletButtons class:
    • style
    • country
  5. Handle the callbacks
    • onUnavailable
      • No wallet buttons available
  6. 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.