Created with Sketch.
Created with Sketch.
Checkout 3.0

Payment Widget

Payment widget allows you to promote credit payments in your shop by displaying either possibility to buy the item using invoice or loan and telling the customer how much it would cost monthly.

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

  1. Add placeholder element for displaying Payment widget on your page (usually on item detail page)
  2. Initialise Payment widget using our API
  3. Load tiny javascript bundle to your page

Placeholder element

Add following placeholder custom element to your page:

<avarda-payment-widget price="120.99" lang="sv"></avarda-payment-widget>
PropertyTypeDescription
pricestringPrice of the product displayed on the page
langstring2 letter ISO language code (en, sv, fi, da, nb) – used for selecting language in the widget

Initialise Payment widget

Base URLs

Use Avarda base URLs for Checkout 3.0 Backend API.

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

Send following request to initialise Payment widget:

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

Return value:

{
    "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 Payment widget you would like to display.

Load Payment widget javascript bundle

Page that displays Payment 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="annonymous"
	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, Part payment widget is able to use Checkout3 custom styles to match the styles of Checkout3, Part payment widget 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.