POWERBOARD DEVELOPER HUB
PowerBoard Status PagePowerBoard Merchant Portal

PayPal

This document will guide you on how to correctly integrate PayPal including PayPal 'Pay in 4' via PowerBoard.

PayPal

This document will guide you on how to correctly integrate integrate PayPal including PayPal & 'Pay in 4' via PowerBoard.

paypal 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.
  4. 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.
  5. The gateway_id - which you can obtain from your Merchant Portal > Services > Connected Services.

🚧

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 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)
  • 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: