yapstone-react-payments v0.0.1

Table of Contents

• Install
• Classes
• Elements
  • Bank Elements
  • Card Elements
  • Other Elements
• Methods
• Request
• Parameters
• API Credentials

Install:

yapstone-react-payments

• unzip yapstone-react-payments file received by email.
• cd into the folder cd yapstone-react-payments npm install npm run build npm link

react project

• inside your react project: npm link yapstone-react-payments npm start

Imports:

import { YapElements, YapTokenHelper } from "yapstone-react-payments";

Classes :

• YapElements
• YapTokenHelper

Elements:

Bank Elements

• accountNumber
• confirmAccountNumber
• routingCode

Card Elements

• cardNumber1
• expirationDate
• cvv
• cardPostalCode

Other Elements

• nameOnAccount
• street1
• street2
• street3
• city
• state
• addressPostalCode

Methods:

YapTokenHelper.validateRequest(yapRequest);

validateRequest

YapTokenHelper.getYapToken(yapRequest);

getYapToken

Request:

yapRequest = {
  environment: "QA",
  accessToken: "vKCMIAcbkyYGtSYqeekfhUiYAxoV",
  tokenType: "CARD",
  context: "PAYMENTS"
};

Parameters:

YapElements can be created by passing below parameters,

<YapElements
  create="cardNumber, expirationDate, cvv"
  style={cardStyle}
  layout="horizontal"
  displayLabel={true}
  labelNames={cardLabelNames}
  labelPosition="top"
  returnFields={true}
  placeHolder={placeHolders}
/>;

<YapElements
  create="routingCode, accountNumber, confirmAccountNumber"
  style={cardStyle}
  layout="vertical"
  displayLabel={true}
  labelNames={accountLabelNames}
  labelPosition="top"
  returnFields={true}
  placeHolder={placeHolders}
/>;

On Submit** - On button* click event, YapTokenHelper.validateRequest() needs to be called. This method will validate the request like,

Additional to above fields provided on click event, validateRequest will verify all the user events from the YapElements fields and perform the necessary validation based on the given context & tokenType.

For Ex: PAYMENTS context with BANK tokenType will perform the validation on bank account related fields like accountNumber, routingCode and address fields like street1, city, state, addressPostalCode.

API Credentials(Access Token):

Access Token needs to be passed in the yap request. Separate client_id & client_secret will be provided to generate the OAuth token and the OAuth token will have access only to tokenize(YapToken) the payment or payout data.

Generated YapToken can be used to make the payment or onboarding(payout) request to yapstone. OAuth token used for tokenization cannot be used to make the payment or onboarding request. Payment or Onboarding API request should be made with different OAuth Token which have access to those API calls.

validateRequest( )

1- YapTokenHelper.validateRequest(yapRequest) returns errors object with list of all error fields exposed by <YapElements>. 2- Both client side & server side errors are returned as part of validateRequest method call. 3- Results of validateRequest method can be used to display the error messages.

validateRequest = () => {
  let yapRequest = {
    environment: "QA",
    accessToken: AddressHelper.oAuthToken,
    tokenType: this.state.paymentType,
    context: "PAYMENTS"
  };
  let validationResult = YapTokenHelper.validateRequest(yapRequest);
  if (typeof validationResult.errors !== "undefined") {
    this.setState({
      ...this.state,
      ...validationResult.errors
    });
  }
};

getYapToken( )

getYapToken = async yapRequest => {
  let result = await YapTokenHelper.getYapToken(yapRequest);
  if (typeof result.error !== "undefined") {
    this.setState({
      accessTokenExpiredError: result.error
    });
  } else {
    this.setState({ token: result.token });
    < Your Server Call to initiate the payment or onboarding request with newly generated token >
  }
};

Sample Payment Call

callPayment = () => {
    const paymentRequest = {
        token: this.state.token,
        . . . .
        . . . .
    }
    - - - - - - - - - - - -

    < Your Server Call to initiate the payment request with newly generated token >

    - - - - - - - - - - - -
}

Sample Onboarding Call

callOnboarding = () => {
    const onboardingRequest = {
        token: this.state.token,
        . . . .
        . . . .
    }
    - - - - - - - - - - - -

    < Your Server Call to initiate the onboarding request with newly generated token >

    - - - - - - - - - - - -
}

Style Elements

For each field needs to be given as above. For each field, we need to provide label style, div style and input box style.

nameOnAccount: { font: 'inherit', border: 0, borderBottom: '1px solid gray', padding: '8px', width: '440px' },
labelStyle: { color: 'gray', width: '140px', display: 'block', float: 'left', clear: 'left', marginRight: '3px' },
divStyle: { margin: 'none', border: 'none', width: '25%', padding: '8px', display: 'inline-block' }},

const cardLabelNames = {
  creditCard: "Card Number",
  expirationDate: "Exp Date",
  cvv: "Security Code",
  cardPostalCode: "Your Zip Code"
};

Optional Place Holders can be given as JSON body with values being assigned to each element name of YapElement

const placeHolders = {
  creditCard: "",
  expirationDate: "MM / YY",
  cvv: "",
  cardPostalCode: "",
  nameOnAccount: "",
  street1: "",
  street2: "",
  city: "",
  addressPostalCode: ""
};

const jsonBody = {
  street1: "2121 N. California Blvd",
  street2: "Suite 400",
  state: "CA",
  addressPostalCode: "94523",
  city: "San Ramon"
};

Optional Label names can be given as JSON body with values being assigned to each element name of YapElement

validateRequest( )

YapElements can be rendered pre populated with values being passed as json request as fieldInput to YapElement.

let yapRequest = {
  environment: "QA",
  accessToken: "2znwGD8k3c4d8y0btlzRxbE4107v",
  tokenType: "CARD",
  context: "PAYMENTS"
};
let validateResult = YapTokenHelper.validateRequest(yapRequest);

YapTokenHelper.validateRequest( . . . ) will validate the acceptable values for environment, tokenType and context.

Validity x of given accessToken will get validated in getYapToken call which will return the error if token is expired or malformed.

Demo Data:

• Demo Card Number 4017779991111115
• To generate errors, provide invalid data like expiration date in past, invalid cvv or routing number, LUHN check failing card number