react-datatrans-light-box - npm Package Compare versions

Comparing version 2.0.2 to 3.0.2

lib/main.js

@@ -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=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.querySelector('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:"componentWillUnmount",value:function(){window.Datatrans&&window.setTimeout(function(){try{window.Datatrans.close()}catch(e){}},1)}},{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)}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.Lightbox=e(require("react")):t.Lightbox=e(t.React)}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=8)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(1),o=function(t){return t&&t.__esModule?t:{default:t}}(r);e.default=o.default},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(7),o=n(5),u=function(t){return t&&t.__esModule?t:{default:t}}(o),a=function(t){return t?"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"},c=function(t){window.Datatrans.startPayment({transactionId:t.transactionId,loaded:t.onLoaded,opened:t.onOpened,closed:t.onCancelled,error:t.onError})},i=function(){if(window.Datatrans)try{window.Datatrans.close()}catch(t){}},s=function(t){return(0,r.useEffect)(function(){var e=t.production,n=a(e);if(document.querySelector('script[src="'+n+'"]'))return c(t),i;var r=document.createElement("script");return r.src=n,r.onload=function(){c(t)},document.body.appendChild(r),i},[]),null};e.default=s,s.propTypes={transactionId:u.default.string.isRequired,production:u.default.bool,onLoaded:u.default.func,onOpened:u.default.func,onCancelled:u.default.func,onError:u.default.func},s.defaultProps={onLoaded:function(){},onOpened:function(){},onCancelled:function(){},onError:function(){},production:!1}},function(t,e,n){"use strict";function r(t){return function(){return t}}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(t){return t},t.exports=o},function(t,e,n){"use strict";function r(t,e,n,r,u,a,c,i){if(o(e),!t){var s;if(void 0===e)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,a,c,i],d=0;s=new Error(e.replace(/%s/g,function(){return f[d++]})),s.name="Invariant Violation"}throw s.framesToPop=1,s}}var o=function(t){};t.exports=r},function(t,e,n){"use strict";var r=n(2),o=n(3),u=n(6);t.exports=function(){function t(t,e,n,r,a,c){c!==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 e(){return t}t.isRequired=t;var n={array:t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return n.checkPropTypes=r,n.PropTypes=n,n}},function(t,e,n){t.exports=n(4)()},function(t,e,n){"use strict";t.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,n){e.exports=t},function(t,e,n){t.exports=n(0)}])});

package.json

 {
   "name": "react-datatrans-light-box",
-  "version": "2.0.2",
+  "version": "3.0.2",
   "description": "Datatrans Lightbox component for React apps",
@@ -24,11 +24,10 @@ "main": "lib/main.js",
     "lint": "eslint .",
-    "example:build": "cd example; NODE_ENV=production webpack --color --progress",
-    "example:watch": "cd example; NODE_ENV=development webpack --color --progress --watch"
+    "example:start": "parcel serve example/index.html"
   },
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0-0"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "babel": "^6.5.2",
-    "babel-cli": "^6.22.2",
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.24.0",
@@ -55,7 +54,8 @@ "babel-eslint": "^7.2.1",
     "html-webpack-plugin": "^3.2.0",
+    "parcel": "^1.12.4",
     "prop-types": "^15.6.0",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "webpack": "^2.3.2"
   }
 }

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
+# Datatrans React Light Box
 
@@ -8,77 +8,53 @@ Official Datatrans light box library for showing our payment page in React applications.
 
+## Compatibility
+
+Beginning with v3.0.0, this component is using the [Datatrans Payment JSON API](https://api-reference.datatrans.ch/#tag/v1transactions).
+
+If you're still using the legacy XML API, please refer to [react-datatrans-light-box v2.0.2](https://github.com/datatrans/react-datatrans-light-box/tree/2.0.2).
+
 ## How to install
 
-```bash
+```sh
+# Use with current JSON API
 npm install react-datatrans-light-box
+
+# Use with legacy XML API (supported by react-datatrans-light-box <= 2.x)
+npm install react-datatrans-light-box@2
 ```
 
-## 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
 
-```javascript
-import React, { Component } from 'react'
+```js
+import React, { useState } from 'react'
 import Lightbox from 'react-datatrans-light-box'
 
-const config = {
-  merchantId: '1100004624',
-  refno: 'YOUR_REFERENCE_NUMBER',
-  amount: '1000',
-  currency: 'CHF',
-  sign: '30916165706580013',
-  production: false,
-  paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'],
-  themeConfiguration: {
-    brandColor: '#aa9374'
-  }
-}
+export default (props) => {
+  const { transactionId } = props
 
-export default class App extends Component {
-  constructor(props) {
-    super(props)
+  const [lightbox, showLightbox] = useState(false)
 
-    this.state = {
-      showLightbox: false
-    }
+  const onLoaded = () => console.log('Loaded')
+  const onOpened = () => console.log('Opened')
+  const onCancelled = () => showLightbox(false)
+  const onError = (data) => {
+    console.log('Error:', data)
+    showLightbox(false)
   }
 
-  render() {
-    return <div>
-      <h1>Datatrans Lightbox Demo</h1>
-      <div>
-        {this.state.showLightbox
-          ? <Lightbox
-              {...config}
-              onLoaded={this.onLoaded}
-              onOpened={this.onOpened}
-              onCancelled={this.onCancelled}
-              onError={this.onError}
-            />
-          : <button onClick={this.start}>Start Lightbox</button>
-        }
-      </div>
-
+  return <div>
+    <h1>Datatrans Lightbox Demo</h1>
+    <div>
+      {lightbox
+        ? <Lightbox
+            transactionId={transactionId}
+            production={true}
+            onLoaded={this.onLoaded}
+            onOpened={this.onOpened}
+            onCancelled={this.onCancelled}
+            onError={this.onError}
+          />
+        : <button onClick={() => showLightbox(true)}>Start Lightbox</button>
+      }
     </div>
-  }
-
-  start = () => {
-    this.setState({ showLightbox: true })
-  }
-
-  onLoaded = () => {
-    console.log('Loaded')
-  }
-
-  onOpened = () => {
-    console.log('Opened')
-  }
-
-  onCancelled = () => {
-    console.log('Cancelled')
-    this.setState({ showLightbox: false })
-  }
-
-  onError = (data) => {
-    console.log('Error:', data)
-    this.setState({ showLightbox: false })
-  }
+  </div>
 }
@@ -91,24 +67,12 @@ ```
 
-### Mandatory
+| Property | Mandatory | Type | Description |
+| -------- | --------- | ---- | ----------- |
+| `transactionId` | **Yes** | String | Transaction ID returned by [Initializing Transactions](https://docs.datatrans.ch/docs/redirect-lightbox#section-initializing-transactions). |
+| `production` | No | Boolean | Indicates whether requests hit Datatrans' production or sandbox environment. Defaults to `false` (sandbox). |
+| `onLoaded` | No | Function | Called when payment page is loaded. |
+| `onOpened` | No | Function | Called when payment page is opened. |
+| `onCancelled` | No | Function | Called when user has cancelled payment. |
+| `onError` | No | Function | Called when there was an error loading the payment page. |
 
-Name | Type | Description
------|------|-----|
-`merchantId` | String | Merchant identifier provided to you by Datatrans.
-`refno` | String | Any value by which you would like to reference the payment.|
-`amount` | String |The amount in cents you would like to charge your customer.|
-`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 |
-|----- |:------ |------------|
-|`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.|
-|`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

src/Lightbox.js

@@ -1,9 +0,4 @@
-import { Component } from 'react'
+import { useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { filterProps, convertArrays } from './utils'
 
-const PARAMS_BLACKLIST = [
-  'production', 'onLoaded', 'onOpened', 'onCancelled', 'onError', 'version'
-]
-
 const getUrl = (production) => production
@@ -14,4 +9,4 @@ ? 'https://pay.datatrans.com/upp/payment/js/datatrans-2.0.0.min.js'
 const startPayment = (props) => {
-  const config = {
-    params: convertArrays(filterProps(props, PARAMS_BLACKLIST)),
+  window.Datatrans.startPayment({
+    transactionId: props.transactionId,
     loaded: props.onLoaded,
@@ -21,13 +16,22 @@ opened: props.onOpened,
     error: props.onError
+  })
+}
+
+const cleanupLightbox = () => {
+  if (window.Datatrans) {
+    try {
+      window.Datatrans.close()
+    } catch (err) {} // eslint-disable-line no-empty
   }
-  window.Datatrans.startPayment(config)
 }
-export default class Lightbox extends Component {
-  componentDidMount() {
-    const scriptSource = getUrl(this.props.production)
 
+const Lightbox = (props) => {
+  useEffect(() => {
+    const { production } = props
+    const scriptSource = getUrl(production)
+
     if (document.querySelector('script[src="' + scriptSource + '"]')) {
-      startPayment(this.props)
+      startPayment(props)
 
-      return
+      return cleanupLightbox
     }
@@ -38,30 +42,17 @@
     script.onload = () => {
-      startPayment(this.props)
+      startPayment(props)
     }
 
     document.body.appendChild(script)
-  }
 
-  componentWillUnmount() {
-    // make sure to always clean things up
-    if (window.Datatrans) {
-      window.setTimeout(() => {
-        try {
-          window.Datatrans.close()
-        } catch (err) {} // eslint-disable-line no-empty
-      }, 1)
-    }
-  }
+    return cleanupLightbox
+  }, [])
 
-  render() {
-    return null
-  }
+  return null
 }
 
+export default Lightbox
+
 Lightbox.propTypes = {
-  merchantId: PropTypes.string.isRequired,
-  refno: PropTypes.string.isRequired,
-  amount: PropTypes.string.isRequired,
-  currency: PropTypes.string.isRequired,
-  sign: PropTypes.string.isRequired,
+  transactionId: PropTypes.string.isRequired,
 
@@ -68,0 +59,0 @@ production: PropTypes.bool,

No alert changes

Improved metrics

Total package byte prevSize

20457403

increased by103576.28%

Number of package files

39

increased by129.41%

Lines of code

1206

increased by424.35%

Worsened metrics

Dev dependency count

28

increased by3.7%

Number of lines in readme file

77

decreased by-31.86%

No dependency changes