react-datatrans-light-box
Advanced tools
Comparing version 1.0.9 to 2.0.0
| import React, { Component } from 'react' | ||
| import LightBox from 'react-datatrans-light-box' | ||
| import Lightbox from '../../src' | ||
| const config = { | ||
| merchantId: '1100004624', | ||
| refno: '11000asdfasdf4624', | ||
| refno: 'YOUR_REFERENCE_NUMBER', | ||
| amount: '1000', | ||
| currency: 'CHF', | ||
| sign: 'adsadf', | ||
| sign: '30916165706580013', | ||
| production: false, | ||
| paymentmethod: ['ECA', 'VIS', 'AMX'], | ||
| paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'], | ||
| themeConfiguration: { | ||
@@ -18,16 +18,8 @@ brandColor: '#aa9374' | ||
| export default class App extends Component { | ||
| render() { | ||
| return <div> | ||
| <LightBoxApproach /> | ||
| <LightBoxHocApproach /> | ||
| </div> | ||
| } | ||
| } | ||
| class LightBoxApproach extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| showsLightBox: false, | ||
| showLightbox: false | ||
| } | ||
| this.start = this.start.bind(this) | ||
@@ -37,3 +29,3 @@ } | ||
| start() { | ||
| this.setState({showsLightBox: true}) | ||
| this.setState({ showLightbox: true }) | ||
| } | ||
@@ -43,54 +35,36 @@ | ||
| return <div> | ||
| <h1> Test LightBox Approach </h1> | ||
| <h1>Datatrans Lightbox Demo</h1> | ||
| <div> | ||
| { this.state.showsLightBox | ||
| ? 'LightBox is rendered and cannot be reused.' | ||
| : <button onClick={this.start}> start lightbox </button> | ||
| {this.state.showLightbox | ||
| ? 'Lightbox was rendered and cannot be reused.' | ||
| : <button onClick={this.start}>Start Lightbox</button> | ||
| } | ||
| { this.state.showsLightBox && <LightBox {...config} /> } | ||
| { this.state.error && <div>{JSON.stringify(this.state.error)}</div> } | ||
| {this.state.showLightbox && | ||
| <Lightbox | ||
| {...config} | ||
| onLoaded={this.onLoaded} | ||
| onOpened={this.onOpened} | ||
| onCancelled={this.onCancelled} | ||
| onError={this.onError} /> | ||
| } | ||
| </div> | ||
| </div> | ||
| } | ||
| } | ||
| onLoaded() { | ||
| console.log('Loaded') | ||
| } | ||
| class LightBoxHocApproachBase extends Component { | ||
| onOpened() { | ||
| console.log('Opened') | ||
| } | ||
| constructor(props) { | ||
| super(props) | ||
| props.lightBox.on('cancelled', () => this.setState({cancelled: true})) | ||
| props.lightBox.on('error', (error) => this.setState({error})) | ||
| props.lightBox.on('loaded', () => { | ||
| this.setState({loaded: true}) | ||
| }) | ||
| onCancelled() { | ||
| console.log('Cancelled') | ||
| } | ||
| render() { | ||
| const {lightBox} = this.props | ||
| return <div> | ||
| <h1> Test LightBoxHoc Apprach </h1> | ||
| <div> props.lightBox: </div> | ||
| <pre> {JSON.stringify(lightBox, null, 2)} </pre> | ||
| {lightBox.loaded && <button onClick={lightBox.show}> | ||
| show payment page | ||
| </button>} | ||
| <button onClick={() => lightBox.load(config)}> | ||
| load lightbox with HOC | ||
| </button> | ||
| </div> | ||
| onError(data) { | ||
| console.log('Error:', data) | ||
| } | ||
| } | ||
| LightBoxHocApproachBase.propTypes = { | ||
| lightBox: LightBox.Hoc.propType, | ||
| } | ||
| const LightBoxHocApproach = LightBox.Hoc(LightBoxHocApproachBase) |
@@ -13,3 +13,2 @@ const path = require('path') | ||
| ] | ||
| }, | ||
@@ -27,3 +26,2 @@ entry: { | ||
| ], | ||
| output: { | ||
@@ -30,0 +28,0 @@ path: path.resolve(__dirname, 'lib'), |
@@ -1,1 +0,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<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=n(1),c=r(s),f=n(0),d=r(f),p=n(8),h=r(p),y=n(4),m=["production","onCancelled","onLoaded","onError","version"],b=function(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(e){return"undefined"!==l(e.data)&&"error"===e.data.type},g=function(e){function t(e){o(this,t);var n=i(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 a(t,e),u(t,[{key:"onMessage",value:function(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(){this.setState({visible:!1}),(0,y.releaseLock)(),this.props.onCancelled()}},{key:"componentDidMount",value:function(){(window.addEventListener||window.attachEvent)("message",this.onMessage)}},{key:"componentWillUnmount",value:function(){(window.removeEventListener||window.detachEvent)("message",this.onMessage),(0,y.releaseLock)()}},{key:"render",value:function(){return this.state.visible?c.default.createElement(h.default,{url:this.url,showsPaymentPage:this.props.showsPaymentPage}):c.default.createElement("div",null," do not render me ")}}]),t}(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(){},onLoaded:function(){},onError:function(){},production:!1,theme:"DT2015",version:"1.0.2",showsPaymentPage:!0}},function(e,t,n){"use strict";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="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=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},a=n(2),u=function(e){return e&&e.__esModule?e:{default:e}}(a);t.filterProps=function(e,t){var n=i({},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).reduce(function(t,n){var i=e[n];return Array.isArray(i)?[].concat(r(t),r(i.map(function(e){return n+"="+encodeURIComponent(e)}))):null!==i&&"object"===(void 0===i?"undefined":o(i))?[].concat(r(t),[n+"="+encodeURIComponent(JSON.stringify(i))]):[].concat(r(t),[n+"="+encodeURIComponent(i)])},[]).join("&")},t.getBaseUrl=function(e){var t=e.split("/");return t[0]+"//"+t[2]},t.lockScrolling=function(){var e=document.createElement("style");e.innerHTML=u.default.scrollLock,e.id="scroll-lock",document.getElementsByTagName("head")[0].appendChild(e)},t.releaseLock=function(){var e=document.getElementById("scroll-lock");e&&(e.outerHTML="")}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.withLightBox=t.LightBoxHoc=void 0;var o=n(3),i=r(o),a=n(6),u=r(a);i.default.Hoc=u.default,t.LightBoxHoc=u.default,t.withLightBox=u.default,t.default=i.default},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=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},l=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=n(1),c=r(s),f=n(0),d=r(f),p=n(3),h=r(p),y=n(4),m=function(){return new Error("payment page is not loaded yet.")},b={shouldLoad:!1,visible:!1,loaded:!1,error:null,cancelled:!1},v=function(e){return function(t){function n(e){o(this,n);var t=i(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 a(n,t),l(n,[{key:"onCancelled",value:function(){this.listeners.cancelled.forEach(function(e){return e()}),this.setState(u({},b,{cancelled:!0}))}},{key:"onError",value:function(e){var t=this;this.setState(u({},b,{error:e}),function(){return t.listeners.error.forEach(function(t){return t(e)})})}},{key:"onLoaded",value:function(){var e=this;this.setState({loaded:!0},function(){return e.listeners.loaded.forEach(function(e){return e()})})}},{key:"on",value:function(e,t){var n=this.listeners[e];n&&n.push(t)}},{key:"load",value:function(e){this.config=e,this.setState({shouldLoad:!0})}},{key:"show",value:function(){if(!this.state.loaded)throw m();this.setState({visible:!0})}},{key:"render",value:function(){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}(s.Component)};v.propType=d.default.shape({visible:d.default.bool.isRequired,loaded:d.default.bool.isRequired,cancelled:d.default.bool.isRequired,error:d.default.any,load:d.default.func.isRequired,show:d.default.func.isRequired,on:d.default.func.isRequired}),t.default=v},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(1),i=r(o),a=n(0),u=r(a),l=n(2),s=r(l),c=function(e){return i.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";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!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},i=n(1),a=r(i),u=n(0),l=r(u),s=n(7),c=r(s),f=n(2),d=r(f),p=function(e){var t=e.showsPaymentPage?o({},d.default.pageFrame,{display:"block"}):d.default.pageFrame;return a.default.createElement("div",{style:t},a.default.createElement(c.default,{url:e.url}))};p.propTypes={url:l.default.string.isRequired,showsPaymentPage:l.default.bool.isRequired},t.default=p},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,i,a,u,l){if(o(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,i,a,u,l],f=0;s=new Error(t.replace(/%s/g,function(){return c[f++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(9),o=n(10),i=n(12);e.exports=function(){function e(e,t,n,r,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){e.exports=n(5)}])}); | ||
| !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=9)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=function(e){return e&&e.__esModule?e:{default:e}}(r);t.default=o.default},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 u(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 i=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),a=n(8),c=n(6),s=function(e){return e&&e.__esModule?e:{default:e}}(c),f=n(2),p=["production","onLoaded","onOpened","onCancelled","onError","version"],l=function(e){return e?"https://pay.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js":"https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js"},d=function(e){var t={params:(0,f.convertArrays)((0,f.filterProps)(e,p)),loaded:e.onLoaded,opened:e.onOpened,closed:e.onCancelled,error:e.onError};window.Datatrans.startPayment(t)},y=function(e){function t(){return r(this,t),o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),i(t,[{key:"componentDidMount",value:function(){var e=this,t=l(this.props.production);if(!document.querySelectorAll('script[src="'+t+'"]'))return void d(this.props);var n=document.createElement("script");n.src=t,n.onload=function(){d(e.props)},document.body.appendChild(n)}},{key:"render",value:function(){return null}}]),t}(a.Component);t.default=y,y.propTypes={merchantId:s.default.string.isRequired,refno:s.default.string.isRequired,amount:s.default.string.isRequired,currency:s.default.string.isRequired,sign:s.default.string.isRequired,production:s.default.bool,onLoaded:s.default.func,onOpened:s.default.func,onCancelled:s.default.func,onError:s.default.func},y.defaultProps={onLoaded:function(){},onOpened:function(){},onCancelled:function(){},onError:function(){},production:!1}},function(e,t,n){"use strict";function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(t,"__esModule",{value:!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};t.filterProps=function(e,t){var n=o({},e);return t.forEach(function(e){return delete n[e]}),n},t.convertArrays=function(e){return Object.keys(e).reduce(function(t,n){var u=e[n];return Array.isArray(u)?o({},t,r({},n,u.join(","))):o({},t,r({},n,u))},{})}},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,n){"use strict";function r(e,t,n,r,u,i,a,c){if(o(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[n,r,u,i,a,c],p=0;s=new Error(t.replace(/%s/g,function(){return f[p++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(3),o=n(4),u=n(7);e.exports=function(){function e(e,t,n,r,i,a){a!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(t,n){t.exports=e},function(e,t,n){e.exports=n(0)}])}); |
| { | ||
| "name": "react-datatrans-light-box", | ||
| "version": "1.0.9", | ||
| "description": "Datatrans light box component for react apps", | ||
| "version": "2.0.0", | ||
| "description": "Datatrans Lightbox component for React apps", | ||
| "main": "lib/main.js", | ||
@@ -16,3 +16,3 @@ "keywords": [ | ||
| "homepage": "https://www.datatrans.ch", | ||
| "email": "kolja.kirchner@datatrans.ch", | ||
| "email": "support@datatrans.ch", | ||
| "author": "Datatrans AG", | ||
@@ -24,3 +24,5 @@ "license": "MIT", | ||
| "watch": "NODE_ENV=production webpack --color --progress --watch", | ||
| "lint": "eslint ." | ||
| "lint": "eslint .", | ||
| "example:build": "cd example; NODE_ENV=production webpack --color --progress", | ||
| "example:watch": "cd example; NODE_ENV=development webpack --color --progress --watch" | ||
| }, | ||
@@ -53,5 +55,8 @@ "peerDependencies": { | ||
| "eslint-plugin-react": "^6.8.0", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "prop-types": "^15.6.0", | ||
| "react": "^16.5.2", | ||
| "react-dom": "^16.5.2", | ||
| "webpack": "^2.3.2" | ||
| } | ||
| } |
146
README.md
| [![NPM version][npm-version-image]][npm-url] [](https://circleci.com/gh/datatrans/react-datatrans-light-box) | ||
| # react-datatrans-light-box | ||
| Official Datatrans light box library for showing our payment page in React applications. | ||
@@ -10,87 +11,10 @@ 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. | ||
| ```bash | ||
| # using npm | ||
| npm i react-datatrans-light-box --save | ||
| # using yarn | ||
| yarn add react-datatrans-light-box | ||
| npm install react-datatrans-light-box | ||
| ``` | ||
| ## LightBoxHoc - Higher-Order Component | ||
| The HOC is our recommended way of using this library and showing our payment page. It provides you with easier control over loading and showing the payment page. | ||
| In case you are unfamiliar with the concept of HOCs we recommend to read this guide: | ||
| [https://facebook.github.io/react/docs/higher-order-components.html](https://facebook.github.io/react/docs/higher-order-components.html) | ||
| The LightBox HOC wraps your target component in a `div` tag and adds a LightBox component as a child. | ||
| ## Example Usage of Lightbox component | ||
| You can also use a more direct approach and display the Lightbox component whenever or whereever you like. | ||
| ### Example Usage of LightBoxHoc | ||
| ```javascript | ||
| const config = { | ||
| merchantId: '1100004624', | ||
| refno: '11000asdfasdf4624', | ||
| amount: '1000', | ||
| currency: 'CHF', | ||
| sign: 'adsadf', | ||
| production: false, | ||
| } | ||
| class LightBoxHocApproachBase extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| props.lightBox.on('cancelled', () => this.setState({cancelled: true})) | ||
| props.lightBox.on('error', (error) => this.setState({error})) | ||
| props.lightBox.on('loaded', () => { | ||
| this.setState({loaded: true}) | ||
| }) | ||
| } | ||
| render() { | ||
| const {lightBox} = this.props | ||
| return <div> | ||
| <h1> Test LightBoxHoc Apprach </h1> | ||
| <div> props.lightBox: </div> | ||
| <pre> {JSON.stringify(lightBox, null, 2)} </pre> | ||
| {lightBox.loaded && <button onClick={lightBox.show}> | ||
| show payment page | ||
| </button>} | ||
| <button onClick={() => lightBox.load(config)}> | ||
| load lightbox with HOC | ||
| </button> | ||
| </div> | ||
| } | ||
| } | ||
| LightBoxHocApproachBase.propTypes = { | ||
| lightBox: LightBox.Hoc.propType, | ||
| } | ||
| const LightBoxHocApproach = LightBox.Hoc(LightBoxHocApproachBase) | ||
| ``` | ||
| ### props.lightBox | ||
| The following props are available on `props.lightBox` of your target component: | ||
| ```javascript | ||
| LightBoxHoc.propType = PropTypes.shape({ | ||
| //LightBox state | ||
| visible: PropTypes.bool.isRequired, | ||
| loaded: PropTypes.bool.isRequired, | ||
| cancelled: PropTypes.bool.isRequired, | ||
| error: PropTypes.any, | ||
| //Methods | ||
| load: PropTypes.func.isRequired, | ||
| show: PropTypes.func.isRequired, | ||
| on: PropTypes.func.isRequired, | ||
| }) | ||
| ``` | ||
| ## 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 React, { Component } from 'react' | ||
| import Lightbox from 'react-datatrans-light-box' | ||
@@ -100,15 +24,20 @@ | ||
| merchantId: '1100004624', | ||
| refno: '11000asdfasdf4624', | ||
| refno: 'YOUR_REFERENCE_NUMBER', | ||
| amount: '1000', | ||
| currency: 'CHF', | ||
| sign: 'adsadf', | ||
| sign: '30916165706580013', | ||
| production: false, | ||
| paymentmethod: ['ECA', 'VIS', 'PFC', 'TWI'], | ||
| themeConfiguration: { | ||
| brandColor: '#aa9374' | ||
| } | ||
| } | ||
| class LightBoxApproach extends Component { | ||
| export default class App extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| this.state = { | ||
| showsLightBox: false, | ||
| showLightbox: false | ||
| } | ||
| this.start = this.start.bind(this) | ||
@@ -118,3 +47,3 @@ } | ||
| start() { | ||
| this.setState({showsLightBox: true}) | ||
| this.setState({ showLightbox: true }) | ||
| } | ||
@@ -124,24 +53,45 @@ | ||
| return <div> | ||
| <h1> Test LightBox Approach </h1> | ||
| <h1>Datatrans Lightbox Demo</h1> | ||
| <div> | ||
| {this.state.showsLightBox | ||
| ? 'LightBox is rendered and cannot be reused.' | ||
| : <button onClick={this.start}>start lightbox</button> | ||
| {this.state.showLightbox | ||
| ? 'Lightbox was rendered and cannot be reused.' | ||
| : <button onClick={this.start}>Start Lightbox</button> | ||
| } | ||
| {this.state.showsLightBox && <LightBox {...config} />} | ||
| {this.state.error && <div>{JSON.stringify(this.state.error)}</div>} | ||
| {this.state.showLightbox && | ||
| <Lightbox | ||
| {...config} | ||
| onLoaded={this.onLoaded} | ||
| onOpened={this.onOpened} | ||
| onCancelled={this.onCancelled} | ||
| onError={this.onError} /> | ||
| } | ||
| </div> | ||
| </div> | ||
| } | ||
| onLoaded() { | ||
| console.log('Loaded') | ||
| } | ||
| onOpened() { | ||
| console.log('Opened') | ||
| } | ||
| onCancelled() { | ||
| console.log('Cancelled') | ||
| } | ||
| onError(data) { | ||
| console.log('Error:', data) | ||
| } | ||
| } | ||
| ``` | ||
| ## Props | ||
| ## Properties | ||
| The LightBox component takes the following props as input. | ||
| The Lightbox component takes the following properties as input. | ||
| ### Mandatory | ||
| Please note that these props also need to be passed to `props.lightBox.load()` when using the HOC. | ||
@@ -157,7 +107,9 @@ Name | Type | Description | ||
| ### Optional | ||
| |Name | Type |Description | | ||
| |----- |:------ |------------| | ||
| |`production` | Boolean | Indicates whether requests hit Datatrans' production or development environment. Defaults to *false*.| | ||
| |`onLoaded` | Function | Called when payment page is loaded.| | ||
| |`onOpened` | Function | Called when payment page is opened.| | ||
| |`onCancelled` | Function | Called when user has cancelled payment.| | ||
| |`onLoaded` | Function | Called when payment page is loaded.| | ||
| |`onError` | Function | Called when there was an error loading the payment page.| | ||
@@ -164,0 +116,0 @@ |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.| |
@@ -1,7 +0,3 @@ | ||
| import LightBox from './LightBox' | ||
| import LightBoxHoc from './LightBoxHoc' | ||
| import Lightbox from './Lightbox' | ||
| LightBox.Hoc = LightBoxHoc | ||
| export {LightBoxHoc, LightBoxHoc as withLightBox} | ||
| export default LightBox | ||
| export default Lightbox |
@@ -1,76 +0,50 @@ | ||
| import React, {Component} from 'react' | ||
| import { Component } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import PaymentPageFrame from './PaymentPageFrame' | ||
| import { | ||
| filterProps, toUrlParams, getBaseUrl, | ||
| lockScrolling, | ||
| releaseLock | ||
| } from './utils' | ||
| import { filterProps, convertArrays } from './utils' | ||
| const rejectProps = [ | ||
| 'production', 'onCancelled', 'onLoaded', 'onError', 'version' | ||
| const PARAMS_BLACKLIST = [ | ||
| 'production', 'onLoaded', 'onOpened', 'onCancelled', 'onError', 'version' | ||
| ] | ||
| const buildUrl = (props, production) => production | ||
| ? 'https://payment.datatrans.biz/upp/jsp/upStart.jsp?' + toUrlParams(props) | ||
| : 'https://pilot.datatrans.biz/upp/jsp/upStart.jsp?' + toUrlParams(props) | ||
| const getUrl = (production) => production | ||
| ? 'https://pay.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js' | ||
| : 'https://pay.sandbox.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js' | ||
| const hasError = ev => typeof ev.data !== typeof undefined && ev.data.type === 'error' | ||
| const startPayment = (props) => { | ||
| const config = { | ||
| params: convertArrays(filterProps(props, PARAMS_BLACKLIST)), | ||
| loaded: props.onLoaded, | ||
| opened: props.onOpened, | ||
| closed: props.onCancelled, | ||
| error: props.onError | ||
| } | ||
| console.log(config) | ||
| window.Datatrans.startPayment(config) | ||
| } | ||
| export default class Lightbox extends Component { | ||
| componentDidMount() { | ||
| const scriptSource = getUrl(this.props.production) | ||
| export default class LightBox extends Component { | ||
| if (!document.querySelectorAll('script[src="' + scriptSource + '"]')) { | ||
| startPayment(this.props) | ||
| return | ||
| } | ||
| constructor(props) { | ||
| super(props) | ||
| const script = document.createElement('script') | ||
| script.src = scriptSource | ||
| script.onload = () => { | ||
| startPayment(this.props) | ||
| } | ||
| this.onMessage = this.onMessage.bind(this) | ||
| this.onCancelled = this.onCancelled.bind(this) | ||
| lockScrolling() | ||
| const urlParams = filterProps(this.props, rejectProps) | ||
| this.url = buildUrl(urlParams, this.props.production) | ||
| this.origin = getBaseUrl(this.url) | ||
| this.state = { visible: true} | ||
| document.body.appendChild(script) | ||
| } | ||
| onMessage(ev) { | ||
| if(ev.origin !== this.origin) return | ||
| if(ev.data === 'cancel') return this.onCancelled() | ||
| if(ev.data === 'frameReady') return this.props.onLoaded() | ||
| if(hasError(ev)) return this.props.onError(ev.data) | ||
| } | ||
| onCancelled() { | ||
| this.setState({visible: false}) | ||
| releaseLock() | ||
| this.props.onCancelled() | ||
| } | ||
| componentDidMount() { | ||
| const addListener = window.addEventListener || window.attachEvent | ||
| addListener('message', this.onMessage) | ||
| } | ||
| componentWillUnmount() { | ||
| const removeListener = window.removeEventListener || window.detachEvent | ||
| removeListener('message', this.onMessage) | ||
| releaseLock() | ||
| } | ||
| render() { | ||
| if(!this.state.visible) return <div> do not render me </div> | ||
| return <PaymentPageFrame | ||
| url={this.url} | ||
| showsPaymentPage={this.props.showsPaymentPage} | ||
| /> | ||
| return null | ||
| } | ||
| } | ||
| LightBox.propTypes = { | ||
| Lightbox.propTypes = { | ||
| merchantId: PropTypes.string.isRequired, | ||
@@ -83,18 +57,15 @@ refno: PropTypes.string.isRequired, | ||
| production: PropTypes.bool, | ||
| showsPaymentPage: PropTypes.bool.isRequired, | ||
| onCancelled: PropTypes.func.isRequired, | ||
| onLoaded: PropTypes.func.isRequired, | ||
| onError: PropTypes.func.isRequired, | ||
| onLoaded: PropTypes.func, | ||
| onOpened: PropTypes.func, | ||
| onCancelled: PropTypes.func, | ||
| onError: PropTypes.func | ||
| } | ||
| LightBox.defaultProps = { | ||
| Lightbox.defaultProps = { | ||
| onLoaded() {}, | ||
| onOpened() {}, | ||
| onCancelled() {}, | ||
| onLoaded() {}, | ||
| onError() {}, | ||
| production: false, | ||
| theme: 'DT2015', | ||
| version: '1.0.2', | ||
| showsPaymentPage: true, | ||
| production: false | ||
| } |
@@ -1,19 +0,9 @@ | ||
| import styles from './styles' | ||
| export const filterProps = (props, reject) => { | ||
| const newProps = {...props} | ||
| const newProps = { ...props } | ||
| reject.forEach(key => delete newProps[key]) | ||
| return newProps | ||
| // return Object | ||
| // .keys(props) | ||
| // .reduce((acc, key) => reject.includes(key) ? acc : set(acc, key, props[key]), {}) | ||
| } | ||
| export const set = (target, key, value) => { | ||
| target[key] = value | ||
| return target | ||
| } | ||
| export const toUrlParams = props => Object.keys(props) | ||
| export const convertArrays = props => Object.keys(props) | ||
| .reduce((prev, key) => { | ||
@@ -23,31 +13,6 @@ const value = props[key] | ||
| if (Array.isArray(value)) { | ||
| return [...prev, ...value.map(v => `${key}=${encodeURIComponent(v)}`)] | ||
| return { ...prev, [key]: value.join(',') } | ||
| } | ||
| if (value !== null && typeof value === 'object') { | ||
| return [...prev, `${key}=${encodeURIComponent(JSON.stringify(value))}`] | ||
| } | ||
| return [...prev, `${key}=${encodeURIComponent(value)}`] | ||
| }, []) | ||
| .join('&') | ||
| export const getBaseUrl = url => { | ||
| const pathArray = url.split('/') | ||
| const protocol = pathArray[0] | ||
| const host = pathArray[2] | ||
| return protocol + '//' + host | ||
| } | ||
| export const lockScrolling = () => { | ||
| var element = document.createElement('style') | ||
| element.innerHTML = styles.scrollLock | ||
| element.id = 'scroll-lock' | ||
| document.getElementsByTagName('head')[0].appendChild(element) | ||
| } | ||
| export const releaseLock = () => { | ||
| const element = document.getElementById('scroll-lock') | ||
| if(element) element.outerHTML = '' | ||
| } | ||
| return { ...prev, [key]: value } | ||
| }, {}) |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-98.04%
19370
- Dev dependency count
- increased by12.5%
27
- Number of package files
- decreased by-37.04%
17
- Lines of code
- decreased by-97.59%
222
- Number of lines in readme file
- decreased by-29.45%
115
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes