react-datatrans-lightbox v1.0.5

React Datatrans Lightbox

Datatrans is a Swiss payment provider for a variety of payment methods and integration APIs. One of these APIs is the Lightbox Mode which opens the payment page in a nice overlay.

This module exports a provider that can be used to integrate the Datatrans Lightbox with your react application.

Provider

The plugins exports a Provider DatatransProvider that takes the endpoint to Datatrans as a property.

Context

On the context of your components you then get a property datatrans that contains a callback openPaymentLayer. Use this function to open the lightbox from within your code. The function returns a promise that is rejected if the user closes the overlay or an error occurs.

Options

openPaymentLayer takes an object as argument. All its fields will be sent as values to datatrans.

openPaymentLayer({
	amount: 2000,
	currency: 'CHF',
	sign: '1234567890',
	merchantId: '1234567',
})
.catch(error => window.console.err(error))

Usage

See folder /examples.

index.html

<div id="app"></div>

index.js

import { DatatransProvider } from 'react-datatrans-lightbox'
render(
	<DatatransProvider endpoint='https://pilot.datatrans.biz'>
		<LightboxOpener />
	</DatatransProvider>,
	window.document.getElementById('app')
)

LightboxOpener.js

const LightboxOpener = (props, { datatrans: { openPaymentLayer } }) => (
	<button
		onClick={
			() => {
				openPaymentLayer(data)
				.catch(e => window.console.error(e))
			}
		}
	>Open Lightbox</button>
)

LightboxOpener.contextTypes = {
	datatrans: React.PropTypes.shape({
		openPaymentLayer: React.PropTypes.func,
	}),
}

export default LightboxOpener