Skip to content

Commit 5ee6607

Browse files
n3ssi3pstadler
n3ssi3
and
pstadler
authored
DT-15736: react-datatrans-light-box v3 using latest JSON API (#18)
Co-authored-by: Patrick Stadler <patrick.stadler@datatrans.ch>
1 parent 9b13b84 commit 5ee6607

14 files changed

Lines changed: 10487 additions & 4207 deletions

File tree

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
lib/
22
example/
3+
dist/

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# Don't check auto-generated stuff into git
22
coverage
33
build
4+
dist
45
example/lib
56
node_modules
67
stats.json
@@ -36,3 +37,4 @@ npm-debug.log
3637

3738
#
3839
.sass-cache
40+
./cache

‎README.md‎

Lines changed: 47 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,76 @@
11
[![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)
22

3-
# react-datatrans-light-box
3+
# Datatrans React Light Box
44

55
Official Datatrans light box library for showing our payment page in React applications.
66
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.
77

8+
## Compatibility
9+
10+
Beginning with v3.0.0, this component is using the [Datatrans Payment JSON API](https://api-reference.datatrans.ch/#tag/v1transactions).
11+
12+
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).
13+
814
## How to install
915

10-
```bash
16+
```sh
17+
# Use with current JSON API
1118
npm install react-datatrans-light-box
19+
20+
# Use with legacy XML API (supported by react-datatrans-light-box <= 2.x)
21+
npm install react-datatrans-light-box@2
1222
```
1323

14-
## Example Usage of Lightbox component
15-
You can also use a more direct approach and display the Lightbox component whenever or whereever you like.
24+
## Example usage
1625

17-
```javascript
18-
import React, { Component } from 'react'
26+
```js
27+
import React, { useState } from 'react'
1928
import Lightbox from 'react-datatrans-light-box'
2029

21-
const config = {
22-
merchantId: '1100004624',
23-
refno: 'YOUR_REFERENCE_NUMBER',
24-
amount: '1000',
25-
currency: 'CHF',
26-
sign: '30916165706580013',
27-
production: false,
28-
paymentmethod: ['ECA', 'VIS', 'PFC', 'AMX', 'TWI'],
29-
themeConfiguration: {
30-
brandColor: '#aa9374'
31-
}
32-
}
30+
export default (props) => {
31+
const { transactionId } = props
3332

34-
export default class App extends Component {
35-
constructor(props) {
36-
super(props)
33+
const [lightbox, showLightbox] = useState(false)
3734

38-
this.state = {
39-
showLightbox: false
40-
}
35+
const onLoaded = () => console.log('Loaded')
36+
const onOpened = () => console.log('Opened')
37+
const onCancelled = () => showLightbox(false)
38+
const onError = (data) => {
39+
console.log('Error:', data)
40+
showLightbox(false)
4141
}
4242

43-
render() {
44-
return <div>
45-
<h1>Datatrans Lightbox Demo</h1>
46-
<div>
47-
{this.state.showLightbox
48-
? <Lightbox
49-
{...config}
50-
onLoaded={this.onLoaded}
51-
onOpened={this.onOpened}
52-
onCancelled={this.onCancelled}
53-
onError={this.onError}
54-
/>
55-
: <button onClick={this.start}>Start Lightbox</button>
56-
}
57-
</div>
58-
43+
return <div>
44+
<h1>Datatrans Lightbox Demo</h1>
45+
<div>
46+
{lightbox
47+
? <Lightbox
48+
transactionId={transactionId}
49+
production={true}
50+
onLoaded={this.onLoaded}
51+
onOpened={this.onOpened}
52+
onCancelled={this.onCancelled}
53+
onError={this.onError}
54+
/>
55+
: <button onClick={() => showLightbox(true)}>Start Lightbox</button>
56+
}
5957
</div>
60-
}
61-
62-
start = () => {
63-
this.setState({ showLightbox: true })
64-
}
65-
66-
onLoaded = () => {
67-
console.log('Loaded')
68-
}
69-
70-
onOpened = () => {
71-
console.log('Opened')
72-
}
73-
74-
onCancelled = () => {
75-
console.log('Cancelled')
76-
this.setState({ showLightbox: false })
77-
}
78-
79-
onError = (data) => {
80-
console.log('Error:', data)
81-
this.setState({ showLightbox: false })
82-
}
58+
</div>
8359
}
8460
```
8561

8662
## Properties
8763

8864
The Lightbox component takes the following properties as input.
8965

90-
### Mandatory
91-
92-
Name | Type | Description
93-
-----|------|-----|
94-
`merchantId` | String | Merchant identifier provided to you by Datatrans.
95-
`refno` | String | Any value by which you would like to reference the payment.|
96-
`amount` | String |The amount in cents you would like to charge your customer.|
97-
`currency` | String | The type of currency that will be used for the payment.|
98-
`sign` | String | Transaction security parameter. Find it in Datatrans' [Webadmin Tool](https://payment.datatrans.biz/). |
99-
100-
### Optional
101-
102-
|Name | Type |Description |
103-
|----- |:------ |------------|
104-
|`production` | Boolean | Indicates whether requests hit Datatrans' production or development environment. Defaults to *false*.|
105-
|`onLoaded` | Function | Called when payment page is loaded.|
106-
|`onOpened` | Function | Called when payment page is opened.|
107-
|`onCancelled` | Function | Called when user has cancelled payment.|
108-
|`onError` | Function | Called when there was an error loading the payment page.|
109-
|and many more... | | Refer to our [DOCS](https://docs.datatrans.ch/docs) to get the full list of supported parameters.|
66+
| Property | Mandatory | Type | Description |
67+
| -------- | --------- | ---- | ----------- |
68+
| `transactionId` | **Yes** | String | Transaction ID returned by [Initializing Transactions](https://docs.datatrans.ch/docs/redirect-lightbox#section-initializing-transactions). |
69+
| `production` | No | Boolean | Indicates whether requests hit Datatrans' production or sandbox environment. Defaults to `false` (sandbox). |
70+
| `onLoaded` | No | Function | Called when payment page is loaded. |
71+
| `onOpened` | No | Function | Called when payment page is opened. |
72+
| `onCancelled` | No | Function | Called when user has cancelled payment. |
73+
| `onError` | No | Function | Called when there was an error loading the payment page. |
11074

11175
[npm-url]: https://npmjs.com/package/react-datatrans-light-box
11276
[npm-version-image]: https://img.shields.io/npm/v/react-datatrans-light-box.svg?style=flat-square

‎example/App.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import React, { useState, useEffect } from 'react'
2+
import Lightbox from '../src'
3+
4+
export default () => {
5+
const [lightbox, showLightbox] = useState(false)
6+
const [loading, setLoading] = useState(false)
7+
const [transactionId, setTransactionId] = useState('')
8+
const [basicAuth, setBasicAuth] = useState('')
9+
const [merchantId, setMerchantId] = useState('')
10+
const [password, setPassword] = useState('')
11+
const [amount, setAmount] = useState(1000)
12+
13+
const onClick = () => {
14+
setLoading(true)
15+
showLightbox(true)
16+
}
17+
const onLoaded = () => setLoading(false)
18+
const onOpened = () => console.log('Opened')
19+
const onCancelled = () => showLightbox(false)
20+
const onError = (data) => {
21+
console.log('Error:', data)
22+
setLoading(false)
23+
showLightbox(false)
24+
}
25+
26+
useEffect(() => {
27+
if (merchantId && password) {
28+
setBasicAuth(window.btoa(`${merchantId}:${password}`))
29+
}
30+
}, [merchantId, password]);
31+
32+
return <div>
33+
<h1 style={{ fontFamily: 'Helvetica, sans-serif', fontWeight: 300 }}>Datatrans Lightbox Demo</h1>
34+
<div>
35+
<h2>Step 1:</h2>
36+
<p>Fill in your authentication data to complete the code example below:<br/>
37+
<small><a href="https://api-reference.datatrans.ch/#section/Authentication">Documentation: Authentication</a></small>
38+
</p>
39+
40+
<label htmlFor='merchantId'>
41+
Datatrans MerchantId
42+
<input id='merchantId' type='text' value={merchantId} onChange={(e) => setMerchantId(e.target.value)} />
43+
</label>
44+
<label htmlFor='password'>
45+
Password
46+
<input id='password' type='password' value={password} onChange={(e) => setPassword(e.target.value)} />
47+
</label>
48+
49+
<label htmlFor='amount'>
50+
Amount in the currency's smallest unit<br/>(e.g. 1000 = 10CHF)
51+
<input id='amount' type='text' value={amount} onChange={(e) => setAmount(e.target.value)} />
52+
</label>
53+
<h2>Step 2:</h2>
54+
<p>Run this example on your server:<br/>
55+
<small><a href="https://api-reference.datatrans.ch/#tag/v1transactions">Documentation: Initialize a transaction</a></small></p>
56+
<code style={{ userSelect: 'all' }}>
57+
<pre style={{ maxWidth: '700px' }}>
58+
curl 'https://api.sandbox.datatrans.com/v1/transactions' \<br/>
59+
--header 'Authorization: Basic {basicAuth}' \<br/>
60+
--header 'Content-Type: application/json' \<br/>
61+
--data-raw '{JSON.stringify({
62+
currency: 'CHF',
63+
refno: 'react-light-box',
64+
amount: parseInt(amount, 10),
65+
}, null, ' ')}'
66+
</pre>
67+
</code>
68+
<h2>Step 3:</h2>
69+
<p>Copy the transactionId from the call above:<br/>Please note that a transactionId is only valid for 30 minutes.</p>
70+
<label htmlFor='transactionId'>
71+
Transaction ID
72+
<input id='transactionId' type='text' value={transactionId} onChange={(e) => setTransactionId(e.target.value)} />
73+
</label>
74+
{loading
75+
? <span className='loader' />
76+
: <button onClick={onClick} disabled={!transactionId}>Start Lightbox</button>
77+
}
78+
</div>
79+
{lightbox && <Lightbox
80+
transactionId={transactionId}
81+
production={false}
82+
onLoaded={onLoaded}
83+
onOpened={onOpened}
84+
onCancelled={onCancelled}
85+
onError={onError}
86+
/>
87+
}
88+
</div>
89+
}

‎example/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
2+
<html>
3+
<body style="margin: 0;">
4+
<nav
5+
style="
6+
text-align: center;
7+
background: #213d62;
8+
padding: 10px;
9+
min-height: 20px;
10+
margin-bottom: 40px;
11+
"></nav>
12+
<div id="app" style="padding: 0 40px;"></div>
13+
<script src="./index.js"></script>
14+
<style>
15+
h1 {
16+
padding: 0 0 10px;
17+
font: bold 24px/26px Arial, Helvetica, sans-serif;
18+
color: #213d62;
19+
}
20+
h2 {
21+
padding: 0 0 8px;
22+
font: bold 18px/22px Arial, Helvetica, sans-serif;
23+
color: #213d62;
24+
}
25+
p {
26+
font: 14px/16px Arial, Helvetica, sans-serif;
27+
}
28+
pre {
29+
background-color: #f3f3f3;
30+
padding: 10px;
31+
margin-bottom: 10px;
32+
}
33+
label {
34+
display: block;
35+
width: 500px;
36+
min-height: 25px;
37+
}
38+
input {
39+
float: right;
40+
}
41+
button {
42+
color: #fff;
43+
background-color: #0ecc77;
44+
border: 1px solid transparent;
45+
border-radius: 3px;
46+
padding: 10px 15px;
47+
}
48+
.loader:before {
49+
content: "";
50+
position: absolute;
51+
border: 3px solid #f3f3f3; /* Light grey */
52+
border-top: 3px solid #213d62; /* Blue */
53+
border-radius: 50%;
54+
width: 16px;
55+
height: 16px;
56+
animation: spin 2s linear infinite;
57+
}
58+
59+
@keyframes spin {
60+
0% { transform: rotate(0deg); }
61+
100% { transform: rotate(360deg); }
62+
}
63+
</style>
64+
</body>
65+
</html>

example/src/index.js renamed to example/index.js

File renamed without changes.

‎example/src/App.js‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

0 commit comments

Comments
 (0)