Skip to main content

Widget Data

Some widgets require user-specific data not accessible publicly. To properly load the data, you'll need to fetch it using the Merchant API and forward it to the Accrue Pay main script.

These endpoints are privileged. Please make sure you authenticate the request with your secret.

Server rendered​

If you render your HTML server-side, make a GET HTTP request for the data your used widgets requires. Please refer to the Widgets API Reference for all available endpoints.

For example, if you are using Wallet widgets or Inline flow, you'll need to make a request using /api/v1/widgets/wallet/:walletId.

The response will be in the following format:

Accrue Pay Widget Data Example
{
  "data": {
    "id": "wwd_123e4567-e89b-12d3-a456-426614174000",
    "type": "WalletWidgetData",
    "attributes": {
      "payload": "YmFzZTY0IGVuY29kZWQgZGF0YQ=="
    }
  }
}

Now, the only step left is to forward the value of data.attributes.payload to the main script:

Accrue Pay Script With Widget Data
<html>
  <head>
    <script
      data-script="accrue-pay"
      defer
      src="https://pay[-sandbox].accruesavings.com/main.js"
      data-client-id="{your-client-id}"
      data-wallet-widget="{data.attributes.payload}"
    ></script>
  </head>
</html>

Client fetched​

If you prefer to configure Accrue Pay client-side, you'll need to implement a new endpoint in your own API, that will leverage Accrue's Merchant API in the background. E.g. you could decide to implement the following endpoint GET:/api/accrue-wallet-widget.

In your back-end logic make sure to make a GET HTTP request for the data your used widgets requires. Please refer to the Widgets API Reference for all available endpoints.

For example, if you are using Wallet widgets or Inline flow, you'll need to make a request using /api/v1/widgets/wallet/:walletId.

The response will be in the following format:

Accrue Pay Widget Data Example
{
  "data": {
    "id": "wwd_123e4567-e89b-12d3-a456-426614174000",
    "type": "WalletWidgetData",
    "attributes": {
      "payload": "YmFzZTY0IGVuY29kZWQgZGF0YQ=="
    }
  }
}

Return the value of data.attributes.payload as part of your API endpoint response.

Once your API successfully returns a response to your client, call the following function to set the widget data:

Accrue Pay Set Widget Data Example
window.accruePay.setWalletWidgetData("{payload}");