Created with Sketch.
Created with Sketch.
Checkout 3.0

APR Widget

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:

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

Placeholder element

<avarda-apr-widget 
	price="250" 
	lang="sv" 
	payment-method="invoice" 
	account-class="1160">
</avarda-apr-widget>
PropertyTypeDescriptionOptional
pricestringTotal price of the items in cartNo
langstring2 letter ISO language code (en, sv, fi, da, nb) – used for selecting language in the widgetNo
payment-methodstringDefined payment methodNo
account-classstringOptional 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 APR 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>
AttributeValueDescription
asyncbooleanIf the async attribute is set, the script is downloaded in parallel to parsing the page, and executed as soon as it is available.
crossoriginstring"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.
srcstringBundle 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-idstringpaymentId from init widget response
data-widget-jwtstringwidgetJwt from init widget response
data-custom-stylesstring(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: