@fortumo/hdcb-lightbox
v1.1.0
Published
JavaScript library for creating Fortumo Hosted Direct Carrier Billing payment button(s) that open up the payment widget inside a lightbox.
Downloads
88
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 --savethen-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';