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
Payment Widget invoice example on product pagePayment Widget extra info modalPayment Widget loan example on product page

Placeholder element

Add following placeholder custom element to your page:

<avarda-payment-widget
  price="120.99"
  lang="sv"
  payment-method="loan"
  account-class="1160"
>
</avarda-payment-widget>
PropertyTypeDescriptionOptional
pricestringPrice of the product displayed on the pageNo
langstring2 letter ISO language code (en, sv, fi, da, nb) – used for selecting language in the widgetNo
payment-methodstringOptional string parameter, which defines payment method selection.
Supports string values such as “direct-invoice” or “loan”.
Yes
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.Yes

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="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**"anonymous"**
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.

Mapping of Checkout3 custom styles

Please look at the custom styles mapping instructions below:

Payment Widget CSS customization mapping