diff --git a/README.md b/README.md index c0430c2..7e1507f 100644 --- a/README.md +++ b/README.md @@ -4,17 +4,13 @@ Official Datatrans light box library for showing our payment page in React applications. React is defined as a peer dependency and expected to be made available by your project. Other than that this library is completely dependency-free. - - ## How to install ```bash +# using npm npm i react-datatrans-light-box --save -``` -or - -```bash +# using yarn yarn add react-datatrans-light-box ``` @@ -27,7 +23,6 @@ The LightBox HOC wraps your target component in a `div` tag and adds a LightBox ### Example Usage of LightBoxHoc ```javascript - const config = { merchantId: '1100004624', refno: '11000asdfasdf4624', @@ -38,7 +33,6 @@ const config = { } class LightBoxHocApproachBase extends Component { - constructor(props) { super(props) @@ -50,13 +44,10 @@ class LightBoxHocApproachBase extends Component { } render() { - const {lightBox} = this.props return
-

Test LightBoxHoc Apprach

-
props.lightBox: 
 {JSON.stringify(lightBox, null, 2)}
@@ -67,10 +58,8 @@ class LightBoxHocApproachBase extends Component { -
} - } LightBoxHocApproachBase.propTypes = { @@ -78,7 +67,6 @@ LightBoxHocApproachBase.propTypes = { } const LightBoxHocApproach = LightBox.Hoc(LightBoxHocApproachBase) - ``` ### props.lightBox @@ -99,16 +87,13 @@ LightBoxHoc.propType = PropTypes.shape({ }) ``` - ## Example Usage of LightBox component You can also use a more direct approach and display the LightBox component whenever or whereever you like. ```javascript - import React, {PropTypes, Component} from 'react' import Lightbox from 'react-datatrans-light-box' - const config = { merchantId: '1100004624', refno: '11000asdfasdf4624', @@ -119,7 +104,6 @@ const config = { } class LightBoxApproach extends Component { - constructor(props) { super(props) this.state = { @@ -133,23 +117,21 @@ class LightBoxApproach extends Component { } render() { - return

Test LightBox Approach

- { this.state.showsLightBox + {this.state.showsLightBox ? 'LightBox is rendered and cannot be reused.' - : + : } - { this.state.showsLightBox && } + {this.state.showsLightBox && } - { this.state.error &&
{JSON.stringify(this.state.error)}
} + {this.state.error &&
{JSON.stringify(this.state.error)}
}
} } - ``` ## Props @@ -167,8 +149,6 @@ Name | Type | Description `currency` | String | The type of currency that will be used for the payment.| `sign` | String | Transaction security parameter. Find it in Datatrans' [Webadmin Tool](https://payment.datatrans.biz/). | - - ### Optional |Name | Type |Description | |----- |:------ |------------| @@ -178,6 +158,5 @@ Name | Type | Description |`onError` | Function | Called when there was an error loading the payment page.| |and many more... | | Refer to this [PDF](https://pilot.datatrans.biz/showcase/doc/Technical_Implementation_Guide.pdf) to get the full list of supported parameters.| - [npm-url]: https://npmjs.com/package/react-datatrans-light-box [npm-version-image]: https://img.shields.io/npm/v/react-datatrans-light-box.svg?style=flat-square diff --git a/example/lib/main.js b/example/lib/main.js index e6e0ae2..18dfe0e 100644 --- a/example/lib/main.js +++ b/example/lib/main.js @@ -1262,8 +1262,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol p = n(8), h = r(p), y = n(4), - b = ["production", "onCancelled", "onLoaded", "onError", "version"], - m = function m(e, t) { + m = ["production", "onCancelled", "onLoaded", "onError", "version"], + b = function b(e, t) { return t ? "https://payment.datatrans.biz/upp/jsp/upStart.jsp?" + (0, y.toUrlParams)(e) : "https://pilot.datatrans.biz/upp/jsp/upStart.jsp?" + (0, y.toUrlParams)(e); }, v = function v(e) { @@ -1271,7 +1271,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol }, g = function (e) { function t(e) { - o(this, t);var n = a(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this, e));n.onMessage = n.onMessage.bind(n), n.onCancelled = n.onCancelled.bind(n), (0, y.lockScrolling)();var r = (0, y.filterProps)(n.props, b);return n.url = m(r, n.props.production), n.origin = (0, y.parseUrl)(n.url).origin, n.state = { visible: !0 }, n; + o(this, t);var n = a(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this, e));n.onMessage = n.onMessage.bind(n), n.onCancelled = n.onCancelled.bind(n), (0, y.lockScrolling)();var r = (0, y.filterProps)(n.props, m);return n.url = b(r, n.props.production), n.origin = (0, y.getBaseUrl)(n.url), n.state = { visible: !0 }, n; }return i(t, e), u(t, [{ key: "onMessage", value: function value(e) { if (e.origin === this.origin) return "cancel" === e.data ? this.onCancelled() : "frameReady" === e.data ? this.props.onLoaded() : v(e) ? this.props.onError(e.data) : void 0; } }, { key: "onCancelled", value: function value() { @@ -1286,30 +1286,38 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol }(s.Component);t.default = g, g.propTypes = { merchantId: d.default.string.isRequired, refno: d.default.string.isRequired, amount: d.default.string.isRequired, currency: d.default.string.isRequired, sign: d.default.string.isRequired, production: d.default.bool, showsPaymentPage: d.default.bool.isRequired, onCancelled: d.default.func.isRequired, onLoaded: d.default.func.isRequired, onError: d.default.func.isRequired }, g.defaultProps = { onCancelled: function onCancelled() {}, onLoaded: function onLoaded() {}, onError: function onError() {}, production: !1, theme: "DT2015", version: "1.0.2", showsPaymentPage: !0 }; }, function (e, t, n) { "use strict"; - Object.defineProperty(t, "__esModule", { value: !0 }), t.releaseLock = t.lockScrolling = t.parseUrl = t.toUrlParams = t.set = t.filterProps = void 0;var r = Object.assign || function (e) { + function r(e) { + if (Array.isArray(e)) { + for (var t = 0, n = Array(e.length); t < e.length; t++) { + n[t] = e[t]; + }return n; + }return Array.from(e); + }Object.defineProperty(t, "__esModule", { value: !0 }), t.releaseLock = t.lockScrolling = t.getBaseUrl = t.toUrlParams = t.set = t.filterProps = void 0;var o = Object.assign || function (e) { for (var t = 1; t < arguments.length; t++) { var n = arguments[t];for (var r in n) { Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]); } }return e; }, - o = n(2), - a = function (e) { + a = n(2), + i = function (e) { return e && e.__esModule ? e : { default: e }; - }(o);t.filterProps = function (e, t) { - var n = r({}, e);return t.forEach(function (e) { + }(a);t.filterProps = function (e, t) { + var n = o({}, e);return t.forEach(function (e) { return delete n[e]; }), n; }, t.set = function (e, t, n) { return e[t] = n, e; }, t.toUrlParams = function (e) { - return Object.keys(e).map(function (t) { - return t + "=" + e[t]; - }).join("&"); - }, t.parseUrl = function (e) { - var t = document.createElement("a");return t.href = e, t; + return Object.keys(e).reduce(function (t, n) { + var o = e[n];return Array.isArray(o) ? [].concat(r(t), r(o.map(function (e) { + return n + "=" + encodeURIComponent(e); + }))) : [].concat(r(t), [n + "=" + encodeURIComponent(o)]); + }, []).join("&"); + }, t.getBaseUrl = function (e) { + var t = e.split("/");return t[0] + "//" + t[2]; }, t.lockScrolling = function () { - var e = document.createElement("style");e.innerHTML = a.default.scrollLock, e.id = "scroll-lock", document.getElementsByTagName("head")[0].appendChild(e); + var e = document.createElement("style");e.innerHTML = i.default.scrollLock, e.id = "scroll-lock", document.getElementsByTagName("head")[0].appendChild(e); }, t.releaseLock = function () { var e = document.getElementById("scroll-lock");e && (e.outerHTML = ""); }; @@ -1354,20 +1362,20 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol p = n(3), h = r(p), y = n(4), - b = function b() { + m = function m() { return new Error("payment page is not loaded yet."); }, - m = { shouldLoad: !1, visible: !1, loaded: !1, error: null, cancelled: !1 }, + b = { shouldLoad: !1, visible: !1, loaded: !1, error: null, cancelled: !1 }, v = function v(e) { return function (t) { function n(e) { - o(this, n);var t = a(this, (n.__proto__ || Object.getPrototypeOf(n)).call(this, e));return t.load = t.load.bind(t), t.show = t.show.bind(t), t.on = t.on.bind(t), t.onLoaded = t.onLoaded.bind(t), t.onCancelled = t.onCancelled.bind(t), t.onError = t.onError.bind(t), t.config = {}, t.state = u({}, m, { load: t.load, show: t.show, on: t.on }), t.listeners = { cancelled: [], error: [], loaded: [] }, t; + o(this, n);var t = a(this, (n.__proto__ || Object.getPrototypeOf(n)).call(this, e));return t.load = t.load.bind(t), t.show = t.show.bind(t), t.on = t.on.bind(t), t.onLoaded = t.onLoaded.bind(t), t.onCancelled = t.onCancelled.bind(t), t.onError = t.onError.bind(t), t.config = {}, t.state = u({}, b, { load: t.load, show: t.show, on: t.on }), t.listeners = { cancelled: [], error: [], loaded: [] }, t; }return i(n, t), l(n, [{ key: "onCancelled", value: function value() { this.listeners.cancelled.forEach(function (e) { return e(); - }), this.setState(u({}, m, { cancelled: !0 })); + }), this.setState(u({}, b, { cancelled: !0 })); } }, { key: "onError", value: function value(e) { - var t = this;this.setState(u({}, m, { error: e }), function () { + var t = this;this.setState(u({}, b, { error: e }), function () { return t.listeners.error.forEach(function (t) { return t(e); }); @@ -1383,7 +1391,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol } }, { key: "load", value: function value(e) { this.config = e, this.setState({ shouldLoad: !0 }); } }, { key: "show", value: function value() { - if (!this.state.loaded) throw b();this.setState({ visible: !0 }); + if (!this.state.loaded) throw m();this.setState({ visible: !0 }); } }, { key: "render", value: function value() { return c.default.createElement("div", null, this.state.shouldLoad && c.default.createElement(h.default, u({}, this.config, { onLoaded: this.onLoaded, showsPaymentPage: this.state.visible, onCancelled: this.onCancelled, onError: this.onError })), c.default.createElement(e, u({}, this.props, { lightBox: (0, y.filterProps)(this.state, ["shouldLoad"]) }))); } }]), n; @@ -1400,7 +1408,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol l = n(2), s = r(l), c = function c(e) { - return a.default.createElement("iframe", { src: e.url, style: s.default.iframe, id: "datatransPaymentFrame", name: "datatransPaymentFrame", frameBorder: 0, allowTransparency: !0 }); + return a.default.createElement("iframe", { src: e.url, style: s.default.iframe, id: "datatransPaymentFrame", name: "datatransPaymentFrame", frameBorder: 0 }); };c.propTypes = { url: u.default.string.isRequired }, t.default = c; }, function (e, t, n) { "use strict"; @@ -8044,7 +8052,8 @@ var config = { amount: '1000', currency: 'CHF', sign: 'adsadf', - production: false + production: false, + paymentmethod: ['ECA', 'VIS', 'AMX'] }; var App = function (_Component) { @@ -8059,7 +8068,6 @@ var App = function (_Component) { _createClass(App, [{ key: 'render', value: function render() { - return _react2.default.createElement( 'div', null, @@ -8097,7 +8105,6 @@ var LightBoxApproach = function (_Component2) { }, { key: 'render', value: function render() { - return _react2.default.createElement( 'div', null, diff --git a/example/src/App.js b/example/src/App.js index a80136b..62f3d44 100644 --- a/example/src/App.js +++ b/example/src/App.js @@ -8,25 +8,19 @@ const config = { currency: 'CHF', sign: 'adsadf', production: false, + paymentmethod: ['ECA', 'VIS', 'AMX'], } export default class App extends Component { - render() { - return
-
} - } - - class LightBoxApproach extends Component { - constructor(props) { super(props) this.state = { @@ -40,7 +34,6 @@ class LightBoxApproach extends Component { } render() { - return

Test LightBox Approach

@@ -70,15 +63,11 @@ class LightBoxHocApproachBase extends Component { }) } - render() { - const {lightBox} = this.props return
-

Test LightBoxHoc Apprach

-
props.lightBox: 
 {JSON.stringify(lightBox, null, 2)}
@@ -89,7 +78,6 @@ class LightBoxHocApproachBase extends Component { -
} diff --git a/example/yarn.lock b/example/yarn.lock index 8d209e7..543dd34 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -2400,7 +2400,7 @@ rc@^1.1.7: strip-json-comments "~2.0.1" react-datatrans-light-box@../: - version "1.0.4" + version "1.0.8" react-dom@^16.2.0: version "16.2.0" diff --git a/lib/main.js b/lib/main.js index c8c92e3..3c06380 100644 --- a/lib/main.js +++ b/lib/main.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LightBox=t(require("react")):e.LightBox=t(e.React)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=13)}([function(e,t,n){e.exports=n(11)()},function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=t.scrollLock="\n html {\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n html body {\n width: 100%;\n height: 100%;\n overflow: visible;\n position: fixed;\n }\n",o=t.pageFrame={zIndex:9999,position:"fixed",right:0,bottom:0,left:0,top:0,overflow:"hidden",WebkitTransform:"translate3d(0, 0, 0)",transform:"translate3d(0, 0, 0)",display:"none"},i=t.iframe={border:0,margin:0,padding:0,width:"100%",height:"100%"};t.default={scrollLock:r,pageFrame:o,iframe:i}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n { } export const toUrlParams = props => Object.keys(props) -.map(key => `${key}=${props[key]}`) -.join('&') + .reduce((prev, key) => { + const value = props[key] + + if (Array.isArray(value)) { + return [...prev, ...value.map(v => `${key}=${encodeURIComponent(v)}`)] + } + + return [...prev, `${key}=${encodeURIComponent(value)}`] + }, []) + .join('&') export const getBaseUrl = url => { const pathArray = url.split('/')