DT-15736: react-datatrans-light-box v3 using latest JSON API (#18)

Co-authored-by: Patrick Stadler <[email protected]>

.eslintignore

@@ -1,2 +1,3 @@
 lib/
 example/
+dist/

.gitignore

@@ -1,6 +1,7 @@
 # Don't check auto-generated stuff into git
 coverage
 build
+dist
 example/lib
 node_modules
 stats.json
@@ -36,3 +37,4 @@ npm-debug.log
 
 #
 .sass-cache
+./cache

README.md

@@ -1,112 +1,76 @@
 [![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
 
 Official Datatrans light box library for showing our payment page in React applications.
 React is defined as a peer dependency and expected to be made available by your project. Other than that this library is completely dependency-free.
 
+## 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>
 }
 ```
 
 ## Properties
 
 The Lightbox component takes the following properties as input.
 
-### Mandatory
-
-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 our [DOCS](https://docs.datatrans.ch/docs) to get the full list of supported parameters.|
+| 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. |
 
 [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

example/App.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react'
+import Lightbox from '../src'
+
+export default () => {
+  const [lightbox, showLightbox] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [transactionId, setTransactionId] = useState('')
+  const [basicAuth, setBasicAuth] = useState('')
+  const [merchantId, setMerchantId] = useState('')
+  const [password, setPassword] = useState('')
+  const [amount, setAmount] = useState(1000)
+
+  const onClick = () => {
+    setLoading(true)
+    showLightbox(true)
+  }
+  const onLoaded = () => setLoading(false)
+  const onOpened = () => console.log('Opened')
+  const onCancelled = () => showLightbox(false)
+  const onError = (data) => {
+    console.log('Error:', data)
+    setLoading(false)
+    showLightbox(false)
+  }
+
+  useEffect(() => {
+    if (merchantId && password) {
+      setBasicAuth(window.btoa(`${merchantId}:${password}`))
+    }
+  }, [merchantId, password]);
+
+  return <div>
+    <h1 style={{ fontFamily: 'Helvetica, sans-serif', fontWeight: 300 }}>Datatrans Lightbox Demo</h1>
+      <div>
+        <h2>Step 1:</h2>
+        <p>Fill in your authentication data to complete the code example below:<br/>
+          <small><a href="https://api-reference.datatrans.ch/#section/Authentication">Documentation: Authentication</a></small>
+        </p>
+
+        <label htmlFor='merchantId'>
+          Datatrans MerchantId
+          <input id='merchantId' type='text' value={merchantId} onChange={(e) => setMerchantId(e.target.value)} />
+        </label>
+        <label htmlFor='password'>
+          Password
+          <input id='password' type='password' value={password} onChange={(e) => setPassword(e.target.value)} />
+        </label>
+
+        <label htmlFor='amount'>
+          Amount in the currency's smallest unit<br/>(e.g. 1000 = 10CHF)
+          <input id='amount' type='text' value={amount} onChange={(e) => setAmount(e.target.value)} />
+        </label>
+        <h2>Step 2:</h2>
+        <p>Run this example on your server:<br/>
+          <small><a href="https://api-reference.datatrans.ch/#tag/v1transactions">Documentation: Initialize a transaction</a></small></p>
+        <code style={{ userSelect: 'all' }}>
+          <pre style={{ maxWidth: '700px' }}>
+          curl 'https://api.sandbox.datatrans.com/v1/transactions' \<br/>
+            --header 'Authorization: Basic {basicAuth}' \<br/>
+            --header 'Content-Type: application/json' \<br/>
+            --data-raw '{JSON.stringify({
+                currency: 'CHF',
+                refno: 'react-light-box',
+                amount: parseInt(amount, 10),
+              }, null, ' ')}'
+          </pre>
+        </code>
+        <h2>Step 3:</h2>
+        <p>Copy the transactionId from the call above:<br/>Please note that a transactionId is only valid for 30 minutes.</p>
+        <label htmlFor='transactionId'>
+          Transaction ID
+          <input id='transactionId' type='text' value={transactionId} onChange={(e) => setTransactionId(e.target.value)} />
+        </label>
+        {loading
+          ? <span className='loader' />
+          : <button onClick={onClick} disabled={!transactionId}>Start Lightbox</button>
+        }
+      </div>
+      {lightbox && <Lightbox
+          transactionId={transactionId}
+          production={false}
+          onLoaded={onLoaded}
+          onOpened={onOpened}
+          onCancelled={onCancelled}
+          onError={onError}
+        />
+      }
+  </div>
+}

example/index.html

@@ -0,0 +1,65 @@
+
+<html>
+  <body style="margin: 0;">
+    <nav
+      style="
+        text-align: center;
+        background: #213d62;
+        padding: 10px;
+        min-height: 20px;
+        margin-bottom: 40px;
+      "></nav>
+    <div id="app" style="padding: 0 40px;"></div>
+    <script src="./index.js"></script>
+    <style>
+      h1 {
+        padding: 0 0 10px;
+        font: bold 24px/26px Arial, Helvetica, sans-serif;
+        color: #213d62;
+      }
+      h2 {
+        padding: 0 0 8px;
+        font: bold 18px/22px Arial, Helvetica, sans-serif;
+        color: #213d62;
+      }
+      p {
+        font: 14px/16px Arial, Helvetica, sans-serif;
+      }
+      pre {
+        background-color: #f3f3f3;
+        padding: 10px;
+        margin-bottom: 10px;
+      }
+      label {
+        display: block;
+        width: 500px;
+        min-height: 25px;
+      }
+      input {
+        float: right;
+      }
+      button {
+        color: #fff;
+        background-color: #0ecc77;
+        border: 1px solid transparent;
+        border-radius: 3px;
+        padding: 10px 15px;
+      }
+      .loader:before {
+        content: "";
+        position: absolute;
+        border: 3px solid #f3f3f3; /* Light grey */
+        border-top: 3px solid #213d62; /* Blue */
+        border-radius: 50%;
+        width: 16px;
+        height: 16px;
+        animation: spin 2s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
+  </body>
+</html>