@thanku/postpaid-widget

0.4.0 • Public • Published

ThankU logo

Say ThankU and Do Goodwww.thanku.social • Plant trees, clean the ocean, and protect animals


ThankU Postpaid Widget (Web Component)

Create ThankUs on the fly and show your customers that you care about the environment.

ThankU Postpaid Widget Screenshot

See a DEMO here: https://thanku.github.io/postpaid-widget/

We make use of the latest browser features (Web Components, module scripts, fetch, CSS variables, etc.) which are well supported in current versions of Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Edge. If you need to target older browser versions or Microsoft Internet Explorer, you need to provide appropriate polyfills.

Installation

Self hosted

Add the following to an HTML document:

<script type="module" src="path/to/postpaid-widget.js"></script>

CDN

Add the following to an HTML document:

<script type="module" src="https://unpkg.com/@thanku/postpaid-widget"></script>

Run npm i @thanku/postpaid-widget.

Usage

This widget is intended for ThankU for Business partners. Before using this widget you need to create your own ThankU wallet. And we need to setup the required configuration for you. So if you are interested in using the ThankU Postpaid Widget, do not hesitate to get in touch with us via: business@thanku.social.


Create a <thanku-postpaid-widget> element with default content for users of browsers that don't support Web Components and add the required attributes mentioned below.

<thanku-postpaid-widget
  slug="freshfarm-shop"
  cause="PlantTrees"
  impact="1"
  message="Dear Mrs. Johnson, thank you for shopping with us! We really appreciate you as a customer. Best regards, your Feshfarm Shop team"
  pid="SOME_UNIQUE_ID"
  sig="THE_SIGNATURE_CREATED_WITH_YOUR_SECRET"
  lang="en"
  oid="A-MA-5"
>
  <!-- [start] fallback content if web components are not supported -->
  <p>
    Dear Mrs. Johnson, thank you for shopping with us! We really appreciate you
    as a customer. Best regards, your Feshfarm Shop team
  </p>
  <!-- [end] -->
</thanku-postpaid-widget>

To get the full ThankU look and feel, also include the following font inside <head>:

<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />

Attributes

name required default description
slug ✔️ - Your ThankU wallet name
cause ✔️ - The good cause you want to support (possible values: PlantTrees, CleanOcean, ProtectWildlife)
impact ✔️ - The impact value (a positive integer). Depending on the selected cause this value represents either number of trees, kg plastic or sqm habitat.
message ✔️ - The ThankU message you want to show
pid ✔️ - The postpaid id (an unique id like e.g. your order id)
sig ✔️ - The signature, a HMAC-SHA256 hash (hex encoded) generated with your secret token (sig needs to be generated server-side to keep your token secret)
oid ✔️ - The ThankU order id (e.g. A-21-2)
lang en The language used for the widget and for the generated ThankU (possible values: en, de)
simulate - If defined no data will be stored on our side, so no ThankU will be created. Great for testing!

NOTE: It's NOT possible to update attributes programatically, because the signature sig needs to be generated server-side anyway to keep your token secret.

Styling

The style of the <thanku-postpaid-widget> element can be changed by setting the following custom properties / CSS variables:

  • --bg-image - The background image of the widget (e.g. an image or gradient or none)
  • --bg-color - The background color of the widget
  • --bg-color-button - The background color of the button
  • --bg-color-button-hover - The background hover color of the button
  • --bg-color-impact - The background color of the impact bubble
  • --bg-color-message - The background color of the message box
  • --color-text-base - The base color of the text
  • --color-text-headline - The color of the headline text
  • --color-text-impact - The color of the impact bubble text
  • --color-text-button - The color of the button text
  • --color-text-message - The color of the message text
  • --shadow-color-message - The shadow color of the message box
  • --font-family - The font family of the text (defaults to "Exo", sans-serif)
  • --font-size-base - The base font size (small screens, mobile)
  • --font-size-sm - The base font size for screens >= 640px (responsive)
  • --font-size-md - The base font size for screens >= 768px (responsive)
  • --font-size-lg - The base font size for screens >= 1024px (responsive)

The CSS variables can be set e.g. inline via the style attribute like this:

<thanku-postpaid-widget
  slug="freshfarm-shop"
  ...
  style="--bg-color: #202c55;
         --bg-image: none;
         --color-text-base: white;
         --color-text-headline: #78c0c4;
         --font-family: 'Roboto Mono', monospace"
>
</thanku-postpaid-widget>

License

MIT License

Package Sidebar

Install

npm i @thanku/postpaid-widget

Weekly Downloads

21

Version

0.4.0

License

MIT

Unpacked Size

17.7 kB

Total Files

4

Last publish

Collaborators

  • layflags