This is a react component that acts as a wrapper for the Nab Velocity Hosted Payment Form.
There is no need to add script tags in your index.html.
Props:
Name
Type
Required
Description
onProcessPayment
function
YES
Payment success callback
component
string / Component(function)
NO
Button component that triggers the form (default <button>)
amount
number
YES
Transaction ammount of money
text
string / element
NO
Button text
terminalProfileId
string
YES
Your Nab Velocity's POS system id
invoiceNum
string
NO
Inner POS System invoice number
description
string
NO
Payment descriptor
email
string
NO
Customer email
billingName
string
NO
Customer name
billingAddress
string
NO
Customer address
billingCity
string
NO
Customer city
billingState
string
NO
Customer state (abbreviation)
billingPostalCode
string
NO
Customer postal code
Example:
importReact,{Component}from"react";importNabVelocityfrom"react-nab-velocity-checkout";importButtonfrom"./Button";classAppextendsComponent{render(){return(<div><NabVelocitycomponent={Button}amount={12}terminalProfileId="234"invoiceNum='320329304'description="Awesome product"email="johndoe@mail.com"billingName="John Doe"billingAddress="742 Evergreen Terrace"billingCity="Miami"billingState="FL"//Abbreviation is important!text="Pay Your Awesome Product"billingPostalCode="12345"/></div>);}}exportdefaultApp;