@riverty/riverty-elements v1.0.4

Riverty Elements

Standalone, embeddable custom elements for use in any site.

Helping consumers understand their payment and financing options can give them the confidence needed to purchase. With Riverty Elements, merchants have an easy way of providing up-to-date information about shopping with Riverty.

Demo showcase

What is a Riverty Element?

A Riverty Element is a custom element that can be included in any web page, regardless of what other web technologies are in use.

Integration and use

Using Riverty Elements consists of two parts: adding the required script, and using the elements themselves.

Requirements

• You must have a Merchant ID issued by Riverty.
• Riverty Elements must be enabled for this Merchant ID.

Riverty Elements launches with initial support for English and German display language.

Add the Riverty Elements JavaScript library

Include the script from Riverty CDN. Add these two lines two your HTML (for instance, at the end of the head element).

<script type="module" src="https://cdn.bnpl.riverty.io/elements/v1/build/riverty-elements.esm.js" async="true"></script>
<script nomodule src="https://cdn.bnpl.riverty.io/elements/v1/build/riverty-elements.js" async="true"></script>

Why two lines? It's a performance optimization called Differential Serving. Only older browsers will load the second script file - modern browsers use the first one, which is smaller and faster.

Note: we are planning to support advanced integration with Riverty Elements published as NPM package.

Use as NPM package

Install the packages:

npm install @riverty/riverty-elements

Then, use the elements in your project as

import '@riverty/riverty-elements';

Or link the script from node_modules folder

<script
  type="module"
  src="./node_modules/@riverty/riverty-elements/dist/riverty-elements/riverty-elements.esm.js"
  async="true"
></script>

Use the appropriate Riverty Element wherever it adds user value

A typical scenario is using riverty-info in pages/sections that explain how payments work, and riverty-offer on product pages.

riverty-info

Add the riverty-info tag with merchant (Merchant ID) and language (display language) specified. For example, like this:

<p>
  Pay after delivery with
  <riverty-info merchant="0000" language="en">Riverty</riverty-info>
</p>

That's it. The riverty-info will take become a link that, when clicked, opens a modal information box in your specified language. It also functions as a normal link that users can open in a new tab/window. Modal information box can be configured to close when users click outside the box element.

You customize how the riverty-info link looks using normal CSS. It is rendered as a normal a element and can be styled accordingly. If you want it to look differently from other links, you can apply any CSS you wish. For example:

riverty-info a {
  color: green;
}

Advanced users can also customize info element modal window. This works also:

<riverty-info merchant="0000" language="en">
  <div slot='modal-body-inner'>
    <h1 class="example">Riverty</h1>
  </div>
</riverty-info>

riverty-invoice

Add the riverty-invoice tag with language (display language), and theme green, light, dark, checkout attributes specified. For example, like this:

<riverty-invoice language="en" theme="green"></riverty-invoice>

A Riverty invoice element will be rendered showing information about Riverty invoice

riverty-offer

Add the riverty-offer tag with merchant (Merchant ID), language (display language), and amount (Euro amount) attributes specified. For example, like this:

<riverty-offer merchant="0000" language="en" amount="240"></riverty-offer>

The user will be automatically be shown an installment plan based on the merchant and amount.

riverty-privacy-policy

Add the riverty-privacy-policy tag with visible, text (link text) attributes specified. For example, like this:

<riverty-privacy-policy visible="true" text="privacy policy"></riverty-privacy-policy>

The user will be automatically be shown a link to open up privacy policy text.

riverty-split

Add the riverty-split tag with merchant (Merchant ID), language (display language), theme green, light, dark, checkout, amount (Euro amount), split-in-parts and show-offer (boolean) attributes specified. For example, like this:

<riverty-split merchant="0000" language="en" theme="green" amount="240" split-in-parts="3" show-offer="true"></riverty-split>

The user will be automatically be shown a split installment plan based on the merchant and amount.

riverty-tc

Add the riverty-tc tag with client-id (Client ID), language (display language), amount (Euro amount), payment-method and country attributes specified. For example, like this:

<riverty-tc clientId="0000" language="en" paymentmethod="invoice" amount="240" country="Germany"></riverty-tc>

The user will be automatically be shown termas and conditions text based on input attributes.

Design goals

• Robust in any environment.
  • → Render user interface within shadow DOMs. Contents are encapsulated and don't mess with containing page.
  • → Implement as custom element. Automatic lifecycle management (initialization, updating, destroy).
• Easy integration.
  • → Implement as custom element. Script loading order doesn't matter. As easy as adding an HTML tag. Automatic HTML + JS API.
• Performant.
  • → Optimized JavaScript bundle: currently 3 KB gzip.
• Fully responsive.

Developing

In this repository

• etc/: configuration files, namely for the build tools.
• src/: all source code goes here.
  • assets: all assets used in riverty-elements.
  • components: custom elements making up the bulk of the functionality.
  • global: a global "using" file.
  • helpers: helper functions for the elements.
  • types: custom object types.
  • ui: the widget user interface. In other words, the content document of the widget, and all its resources.

Build and run

Use the following npm scripts.

• build: create build optimized for production.
• start: create a development build that updates on any changes, and start a local development server.
• test: run stenciljs tests for components and helper classes.

Limitations / TODO:

• Improve elements usability for blind and visually impaired people.