Merge pull request #12 from datatrans/stop-lightbox-on-unmount

clean up DOM on unmount (see #11)
datatrans · Nov 1, 2018 · d5e4674 · d5e4674
2 parents f5ec2a8 + 5ce6164
commit d5e4674
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@ const config = {
   currency: 'CHF',
   sign: '30916165706580013',
   production: false,
-  paymentmethod: ['ECA', 'VIS', 'PFC', 'TWI'],
+  paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'],
   themeConfiguration: {
     brandColor: '#aa9374'
   }
@@ -34,55 +34,53 @@ const config = {
 export default class App extends Component {
   constructor(props) {
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
-  }
-
-  start() {
-    this.setState({ showLightbox: true })
   }
 
   render() {
     return <div>
       <h1>Datatrans Lightbox Demo</h1>
       <div>
         {this.state.showLightbox
-          ? 'Lightbox was rendered and cannot be reused.'
+          ? <Lightbox
+              {...config}
+              onLoaded={this.onLoaded}
+              onOpened={this.onOpened}
+              onCancelled={this.onCancelled}
+              onError={this.onError}
+            />
           : <button onClick={this.start}>Start Lightbox</button>
         }
-
-        {this.state.showLightbox &&
-          <Lightbox
-            {...config}
-            onLoaded={this.onLoaded}
-            onOpened={this.onOpened}
-            onCancelled={this.onCancelled}
-            onError={this.onError} />
-          }
       </div>
+
     </div>
   }
 
-  onLoaded() {
+  start = () => {
+    this.setState({ showLightbox: true })
+  }
+
+  onLoaded = () => {
     console.log('Loaded')
   }
 
-  onOpened() {
+  onOpened = () => {
     console.log('Opened')
   }
 
-  onCancelled() {
+  onCancelled = () => {
     console.log('Cancelled')
+    this.setState({ showLightbox: false })
   }
 
-  onError(data) {
+  onError = (data) => {
     console.log('Error:', data)
+    this.setState({ showLightbox: false })
   }
 }
-
 ```
 
 ## Properties

diff --git a/example/src/App.js b/example/src/App.js
@@ -17,51 +17,50 @@ const config = {
 export default class App extends Component {
   constructor(props) {
     super(props)
+
     this.state = {
       showLightbox: false
     }
-
-    this.start = this.start.bind(this)
-  }
-
-  start() {
-    this.setState({ showLightbox: true })
   }
 
   render() {
     return <div>
       <h1>Datatrans Lightbox Demo</h1>
       <div>
         {this.state.showLightbox
-          ? 'Lightbox was rendered and cannot be reused.'
+          ? <Lightbox
+              {...config}
+              onLoaded={this.onLoaded}
+              onOpened={this.onOpened}
+              onCancelled={this.onCancelled}
+              onError={this.onError}
+            />
           : <button onClick={this.start}>Start Lightbox</button>
         }
-
-        {this.state.showLightbox &&
-          <Lightbox
-            {...config}
-            onLoaded={this.onLoaded}
-            onOpened={this.onOpened}
-            onCancelled={this.onCancelled}
-            onError={this.onError} />
-          }
       </div>
+
     </div>
   }
 
-  onLoaded() {
+  start = () => {
+    this.setState({ showLightbox: true })
+  }
+
+  onLoaded = () => {
     console.log('Loaded')
   }
 
-  onOpened() {
+  onOpened = () => {
     console.log('Opened')
   }
 
-  onCancelled() {
+  onCancelled = () => {
     console.log('Cancelled')
+    this.setState({ showLightbox: false })
   }
 
-  onError(data) {
+  onError = (data) => {
     console.log('Error:', data)
+    this.setState({ showLightbox: false })
   }
 }
diff --git a/lib/main.js b/lib/main.js
diff --git a/src/Lightbox.js b/src/Lightbox.js
@@ -18,15 +18,13 @@ const startPayment = (props) => {
     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)
 
-    if (!document.querySelectorAll('script[src="' + scriptSource + '"]')) {
+    if (document.querySelector('script[src="' + scriptSource + '"]')) {
       startPayment(this.props)
 
       return
@@ -41,6 +39,17 @@ export default class Lightbox extends Component {
     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)
+    }
+  }
+
   render() {
     return null
   }