React PayNummus Token Component

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-pay is at https://bitbucket.org/houseofdavison/react-nummus-pay

An example of integration can be seen at vShop or see this in ReactJS

Status

Version 1.0.1 Pre Production ** Please note that this is a low-level sub-component of react-nummus-checkout

Installation

Get started by installing with npm

npm install react-nummus-pay

Code

import React from 'react'    
import PayNummus from 'react-nummus-pay';

// Fixed format strict USAGE:

<PayNummus
	publicKey=""
	email=""
	amount=""
	currency=""
	name=""
	address=""
	zip=""
	cardNumber=""
	cvc=""
	expiry="mm/yy"
	onSuccess={...OnToken handler}
	onFail={...OnDecline handler}
/>

Parameters

| publicKey | your Client Public KEY |

| email | your client's email address, e.g. [email protected] |

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

| currency | Code e.g. GBP, USD |

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

Callbacks

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

paymentReceived (token) {
	...
}

paymentDeclined (reason) {
	...
}

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

<PayNummus
	...
	onSuccess={this.paymentReceived}
	onFail={this.paymentDeclined}
/>

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

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

in your Constructor, e.g.

class NummusCheckout extends React.Component {

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

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

Chances are that you will NOT require this low-level component when you can use its big sister see

react-nummus-checkout

This is also on NPM as

npm install react-nummus-checkout