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] [![Build Status](https://circleci.com/gh/datatrans/react-datatrans-light-box.png?circle-token=:circle-token)](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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
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
0
19370
27
17
222
115
1