Apr Widget – Avarda

The APR widget provides detailed information about a specific payment method in a concise bullet-point format. The primary purpose of the APR widget is to display the calculated Annual Percentage Rate (APR) for a given payment method. This information is presented in an easy-to-read bullet view, offering users a quick overview of key details.

In order to display the APR widget you need to implement following steps:

Add a placeholder element for displaying the APR widget on your page (usually in a payment method description)
Initialise the APR widget using our API
Load a tiny javascript bundle to your page

APR widget displaying Invoice terms

Placeholder element

<avarda-apr-widget
  price="250"
  lang="sv"
  payment-method="invoice"
  account-class="1160"
>
</avarda-apr-widget>

Property	Type	Description	Optional
price	`string`	Total price of the items in cart	No
lang	`string`	2 letter ISO language code (en, sv, fi, da, nb) – used for selecting language in the widget	No
payment-method	`string`	Defined payment method. Accepts values such as “invoice”, “loan”, “direct-invoice”, “b2b-invoice”, “large-amount-loan”	No
account-class	`string`	Optional string parameter, which further refines the payment method selection. If defined, the widget uses the associated payment method for a more specific configuration, otherwise, it defaults to the primary payment method specified by the ‘payment-method’ parameter.	Yes

Initialise APR widget

Base URLs

Use Avarda base URLs for Checkout 3.0 API.

Obtain partner access token for authentication needed for Payment widget API.

Send following request to initialize APR widget:

# Initialize Payment widget
GET {api_url}/api/paymentwidget/partner/init
Content-type: application/json
Authorization: Bearer {partner_access_token}

{
  "paymentId": "5f91c44a-5457-4eda-8eac-f6a60ff6e520",
  "widgetJwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJDaGVja291dCIsImp0aSI6IjljZGRhZWI4LWU1N2UtNGIwNC04ZDdjLTBjODc0YTA1MDY2MyIsIlB1cmNoYXNlSWQiOiJBVlQzZ24iLCJleHAiOjE1Nzg5MTE0OTh9.HMRidZgeOQtOQtXyHwanmfS0KwYXb73m5lkTeQ449co",
  "expiredUtc": "2020-01-01T09:02:03.2160375Z"
}

widgetJwt can be persisted and used until it expires. Reuse the token for each APR widget you would like to display.

Load Payment widget javascript bundle

Page that displays APR widget needs to contain following javascript bundle:

Stage:

https://payment-widget.stage.avarda.com/cdn/payment-widget.js

Production:

https://payment-widget.avarda.com/cdn/payment-widget.js

When placing the javascript bundle into your page add following attributes to the script element:

<script
  async
  crossorigin="anonymous"
  src="https://payment-widget.stage.avarda.com/cdn/payment-widget.js?ts=1691676899"
  data-payment-id="5f91c44a-5457-4eda-8eac-f6a60ff6e520"
  data-widget-jwt="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJDaGVja291dCIsImp0aSI6IjljZGRhZWI4LWU1N2UtNGIwNC04ZDdjLTBjODc0YTA1MDY2MyIsIlB1cmNoYXNlSWQiOiJBVlQzZ24iLCJleHAiOjE1Nzg5MTE0OTh9.HMRidZgeOQtOQtXyHwanmfS0KwYXb73m5lkTeQ449co"
></script>

Attribute	Value	Description
`async`	`boolean`	If the `async` attribute is set, the script is downloaded in parallel to parsing the page, and executed as soon as it is available.
`crossorigin`	`string`	`"annonymous"` Request uses CORS headers and credentials flag is set to `'same-origin'`. There is no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication, unless destination is the same origin.
`src`	`string`	Bundle url – add additional query parameter `?ts=1691676899`to prevent caching of the bundle. For the value of the parameter, you can use current time (`Date.now()`) or other randomised value
`data-payment-id`	`string`	`paymentId` from init widget response
`data-widget-jwt`	`string`	`widgetJwt` from init widget response
`data-custom-styles`	`string`	(optional) Allow passing in Checkout3 custom styles – make sure your custom styles are stringified JSON and it’s correctly escaped for use in HTML attribute.

Custom styles

In order to make the integration as easy as possible, the APR widget is able to use Checkout3 custom styles to match the styles of Checkout3 and partner’s shop. Make sure the provided custom styles are properly escaped and stringified JSON object of Checkout3 custom styles. More info about Checkout3 customisation.

Mapping of Checkout3 custom styles

Please look at the custom styles mapping instructions bellow:

APR Widget CSS customization mapping

Payment Widget API Reference