react-datatrans-light-box

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

How to install

npm install react-datatrans-light-box

Example Usage of Lightbox component

You can also use a more direct approach and display the Lightbox component whenever or whereever you like.

import React, { Component } 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 class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      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>

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

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.

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 this PDF to get the full list of supported parameters.