React-nummus-checkout NPM

React Nummus Checkout

Nummuspay is a Payment Service Provider https://nummuspay.com/ and the reason you should deploy them as a PSP is quite simply because they are a very good ALT to Stripe and friendly.

Henry Davison - Lead DEV @vshop.vadoo.co.uk

react-nummus-checkout is at https://bitbucket.org/houseofdavison/react-nummus-checkout

An example of integration can be seen at vShop or see this in a React demo vShop

Status

Version 1.0.x Production

Installation

Get started by installing with npm

npm install react-nummus-checkout

Code

import React from 'react'    
import NummusCheckout from 'react-nummus-checkout';

// Basic Usage

<NummusCheckout
	publicKey=""
	email=""
	amount=""
	onSuccess={...OnPaymentReceived handler}
	onClose={...OnCloseCheckout handler}
/>

// Options 

<NummusCheckout
	...
	currency=""
	name=""
	address=""
	zip=""
	cardNumber=""
	CVC=""
	expiry="mm/yy"
	sandbox
/>

Parameters

| publicKey | your Client Public KEY |

| email | your client's email address, e.g. johndoe@gmail.com |

| amount | to pay as an integer or decimal, e.g. '123.99' |

Options

| currency | Codes: GBP, USD, EUR, JPY, RUB, INR, CNY |

| name | first-last e.g. 'John Doe' |

| address | Billing Address, e.g. '1 London Lane' |

| zip | e.g. 'N1 5AB' in London |

| cardNumber | full 16-digit number, no spaces |

| CVC | CVC or CVV number normally 3-digits |

| expiry | format MM/YY as a string, eg. '05/25' |

| sandbox | if supplied shows Test Debit/Credit card numbers |

Callbacks

Within your React Component - where you invoke NummusCheckout - you will have two Callback functions e.g.

paymentReceived (token) {
	...
}

paymentCancelled () {
	...
}

So in your <NummusCheckout .../> you would have:

<NummusCheckout
	...
	onSuccess={this.paymentReceived}
	onClose={this.paymentCancelled}
/>

If these callbacks require prop or state variables you will probably want to say:

this.paymentReceived = this.paymentReceived.bind(this);
this.paymentCancelled = this.paymentCancelled.bind(this);

in your Constructor, e.g.

class NummusGateway extends React.Component {

constructor(props, defaultProps) {
	super(props, defaultProps);

			this.paymentReceived = this.paymentReceived.bind(this);
			this.paymentDeclined = this.paymentDeclined.bind(this);
...

Interface

The below is an example

npm.io

Current Requirements:

The CCS file for NummusCheckout ...called modal.css
Please feel free to override any settings
Zurb Foundation CSS; current UI which will be made generic
jQuery for Foundation which you may already have ! - if not see below for Web Pack
authorising.gif in your /dist/images folder

1-2-3 / In your app.jsx:

require('style-loader!css-loader!foundation-sites/dist/css/foundation.min.css');
require('style-loader!css-loader!react-nummus-checkout/dist/modal.css');

4 / and in your webpack.config.js

i.e. to load up any 3rd-party JS Sorry this is just a Web Pack Example...

module.exports = {
....

entry: [

	....
    'script-loader!jquery/dist/jquery.min.js',
    'script-loader!foundation-sites/dist/js/foundation.min.js',
	....
    './app/app.jsx'

],

externals: {
	....
	jquery: 'jQuery'

},

plugins: [
	....
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
    })

5 / in your node_modules/react-nummus-checkout/dist folder you will see a file called authorising.gif as shown below

npm.io

Please copy this file into your React /dist folder under a folder called images, so it will become

{your-app}/dist/images/authorising.gif

npm.io

You may also like to use money-bag.gif in the /dist folder in your paymentReceived (token) callback as the back-end processing can take a short while so as not to leave the customer wondering ?