react-nummus-pay v1.0.2
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. johndoe@gmail.com |
| 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