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.
Beginning with v3.0.0, this component is using the Datatrans Payment JSON API.
If you're still using the legacy XML API, please refer to react-datatrans-light-box v2.0.2.
# 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@2import React, { useState } from 'react'
import Lightbox from 'react-datatrans-light-box'
export default (props) => {
const { transactionId } = props
const [lightbox, showLightbox] = useState(false)
const onLoaded = () => console.log('Loaded')
const onOpened = () => console.log('Opened')
const onCancelled = () => showLightbox(false)
const onError = (data) => {
console.log('Error:', data)
showLightbox(false)
}
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>
</div>
}The Lightbox component takes the following properties as input.
| Property | Mandatory | Type | Description |
|---|---|---|---|
transactionId |
Yes | String | Transaction ID returned by 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. |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent