👍
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 need to have a PayPal account setup as a connected service in PowerBoard Merchant Portal. Click here to go to how to add a service.

The gateway_id - which you can obtain from your Merchant Portal > Services > Connected Services.

🚧
Third-Party Requirements

PayPal connected (sandbox mode) via PowerBoard Dashboard.

PayPal developer account

Sandbox 'personal' PayPal 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 PayPal 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 PayPal service.

PowerBoard will return a '201 Created' response with the following fields:

{
    "customer": {
        "payment_source": {
            "gateway_id": "63cf464542194166721498ec" //your paypal service gateway id in PowerBoard
        }
    },
    "amount": "1.00",
    "currency": "AUD",
    "reference": "online sales"
}

{
    "status": 201,
    "error": null,
    "resource": {
        "type": "charge",
        "data": {
            "token": "YOUR_WALLET_TOKEN",
            "charge": {
                "_id": "63eaf72830e784778fe10728",
                "amount": 214,
                "currency": "AUD",
                "company_id": "63cf32a154a870183bf2398a",
                "type": "financial",
                "status": "wallet_initialized",
                "capture": true,
                "authorization": false,
                "one_off": true,
                "amount_surcharge": null,
                "amount_original": null,
                "created_at": "2023-02-14T02:51:20.826Z",
                "updated_at": "2023-02-14T02:51:20.826Z",
                "schedule": {
                    "stopped": false
                },
                "archived": false,
                "meta": {},
                "customer": {
                    "last_name": "Transaction",
                    "first_name": "Test",
                    "email": "[email protected]",
                    "payment_source": {
                        "type": "wallet",
                        "wallet_type": "paypal",
                        "gateway_id": "63cf464542194166721498ec",
                        "gateway_name": "PayPal",
                        "gateway_type": "Paypal"
                    }
                },
                "transactions": [],
                "shipping": {},
                "items": []
            }
        }
    }
}

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
  - Always set to: AU
- request_shipping (true/false)
  - Allows for shipping address listed on payer's PayPal account to be included in the PowerBoard transaction.
- pay_later (true / false)
  - Feature toggle for PayPal 'Pay in 4'
Style parameters listed in [PayPal's JavaScript SDK](PayPal's JavaScript SDK reference) reference, valid configurable style parameters:
- layout
  - color
  - shape
  - tagline
  - label
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 the .load method.

<div id="widget-paypal"></div>

<script src="https://widget.preproduction.powerboard.commbank.com.au/sdk/latest/widget.umd.min.js"></script>

<script>
   let button = new cba.WalletButtons("#widget-paypal", "YOUR WALLET TOKEN",
        {
            amount_label: "Payment Amount",
            country: "AU",
            request_shipping: true,
            pay_later: true,
            style: {
                layout: 'vertical',
                color: 'gold',
                shape: 'pill',
                tagline: false,
                label: '',
            },
        })
     button.setEnv('preproduction_cba');
     button.onUnavailable(() => console.log("No wallet buttons available"));
     button.onPaymentSuccessful((data) => console.log("Payment Successful", data));
     button.onPaymentError((data) => console.log("The payment was not successful", data));
     button.onPaymentInReview((data) => console.log("The payment is on fraud review", data));
     button.load();

</script>

After the payment is completed (successfully) the onPaymentSuccessful(data) call-back will trigger. If the payment was not successful, the onPaymentError(data) call-back will trigger.

onPaymentSuccessful(data) example

{
    "status": 200,
    "error": null,
    "resource": {
        "type": "charge",
        "data": {
            "id": "63eb242930e784778fe10794",
            "amount": 100,
            "currency": "AUD",
            "status": "complete"
        }
    }
}

Additionally, you will see the charge appear in the PowerBoard Merchant Dashboard.

PowerBoard charge logs

PayPal 'Pay in 4' Standalone

If a merchant wishes to only have PayPal Pay in 4 as their PayPal integration method, this is possible using the 'standalone' flag.
When initialising the PowerBoard widget in Step 2 you will need to include 'standalone: true' in the wallet button class.

See below example:

<div id="widget-paypal">
 
<script src="https://widget.preproduction.powerboard.commbank.com.au/sdk/latest/widget.umd.js"></script>
 
<script>
let button = new cba.WalletButtons("#widget-paypal", "YOUR_WALLET_TOKEN",
    {
        amount_label: "Payment Amount",
        country: "AU",
        request_shipping: true,
        standalone: true,
        pay_later: true,
        style: {
            layout: 'horizontal',
            color: 'gold',
            shape: 'pill',
            tagline: true,
            label: 'pay',
        },
    }
    button.setEnv('preproduction_cba');
    button.onUnavailable(() => console.log("No wallet buttons available"));
    button.onPaymentSuccessful((data) console.log("Payment Successful"));     
    button.onPaymentError((data) => console.log("The payment was not successful"));
    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
    button.load();
}
</script>

The below screenshot depicts how the Pay in 4 standalone button is rendered:

Below is what is displayed when the 'Learn more' link is selected:

PayPal

PayPal

👍
Before you begin

🚧
Third-Party Requirements

Integration Steps

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

Step 2) Create and initialise the PowerBoard Widget

onPaymentSuccessful(data) example

PayPal 'Pay in 4' Standalone

PayPal

👍Before you begin

🚧Third-Party Requirements

Integration Steps

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

Step 2) Create and initialise the PowerBoard Widget

onPaymentSuccessful(data) example

PayPal 'Pay in 4' Standalone

👍
Before you begin

🚧
Third-Party Requirements