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

# 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

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

Properties

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