[![NPM version][npm-version-image]][npm-url] !CI

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.

If you're still using the legacy XML API, please refer to react-datatrans-light-box v2.0.2.

How to install

``sh


Use with current JSON API

`js
import 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

| 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. |

[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