@fortumo/hdcb-lightbox

JavaScript library for creating Fortumo Hosted Direct Carrier Billing payment button(s) that open up the payment widget inside a lightbox.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @fortumo/hdcb-lightbox in KB

Readme

About

Fortumo Hosted DCB: https://fortumo.com/products/dcb/

Developer documentation: https://merchants.fortumo.com/integration-and-testing/hosted-dcb/

Usage

$ npm install @fortumo/hdcb-lightbox --save

then-in-your.js

// Import as
// CJS modules require
const HdcbLightbox = require('@fortumo/hdcb-lightbox');
// OR
// ES2015 modules import
import HdcbLightbox from '@fortumo/hdcb-lightbox';
...
const config_options = {...};
HdcbLightbox.addPaymentButton('myCustomId', config_options);

OR

include-it-in-your.html

<!doctype html>
<html lang=en>

<head>
  <meta charset=utf-8>
  <title>My Website</title>
  <script src="https://unpkg.com/@fortumo/hdcb-lightbox/dist/HdcbLightbox.min.js"></script>
</head>

<body>
  <div id="myCustomId"></div>
  ...
  <script>
    var my_config_opts = {
      merchant_id: 'your-merchant-id',
      token: 'your-jwt-token-as-part-of-the-hdcb-widget-url',
      ...
    }
    HdcbLightbox.addPaymentButton('myCustomId', my_config_opts);
  </script>
</body>

</html>

Configuration options and default values

Note: All customized values must be set per payment button.

Your merchant ID from Fortumo:

merchant_id: '';

Your integration parameters JWT token:

token: '';

<iframe title="{value here}"> for better accessibility:

iframe_title: 'Fortumo Hosted DCB';

Fortumo HDCB widget's domain. Also can be set to Fortumo test environment's domain:

domain: 'https://dcb.fortumo.com';

Stylesheet used by this library for payment button and lightbox:

stylesheet_url: 'https://unpkg.com/@fortumo/hdcb-lightbox@{LIBRARY-VERSION}/dist/HdcbLightbox.min.css';

Payment button's alt parameter value:

button_alt: 'Mobile Payments by Fortumo"';

Payment button's image location:

button_img_src: 'https://assets.fortumo.com/fmp/fortumopay_150x50_red.png';

Element ID of the payment button that is created. Not used for styling. Should be set for each button if there exists more than one:

button_el_id: 'hdcb-payment-button';

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.