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