Welcome!

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:

import React, { Component } from "react";
import NabVelocity from "react-nab-velocity-checkout";
import Button from "./Button";

class App extends Component {
  render() {
    return (
      <div>
        <NabVelocity   
          component={Button}       
          amount={12}
          terminalProfileId="234"
          invoiceNum='320329304'
          description="Awesome product"
          email="[email protected]"
          billingName="John Doe"
          billingAddress="742 Evergreen Terrace"
          billingCity="Miami"
          billingState="FL" //Abbreviation is important!
          text="Pay Your Awesome Product"
          billingPostalCode="12345"
        />
      </div>
    );
  }
}

export default App;