Using Callbacks to Integrate Revops js

Revops-js provides callbacks that can be used to implement custom validation or error handling. They are particularly useful when you need to keep branding consistent or need to integrate revops-js with an existing application.

onComplete

This callback is triggered when the revops-js component successfully submits its information and returns the Account Object that has been created. This is the ideal time to capture and extend the data model for your specific needs.

Note: If creating an Instrument & Account, they both will be included in the return payload as shown below.

{
  "id": ":acct_id",
  "uri": "/v1/accounts/:acct_id",
  "account_id": "your-acct-id1575590775662",
  "billing_contact": {
    "address": "",
    "address2": "",
    "bank_account_holder_name": "",
    "bank_account_holder_type": "",
    "bank_account_number": "",
    "bank_country": "",
    "bank_name": "",
    "bank_routing_number": "",
    "city": "",
    "country": "",
    "email": "",
    "first_name": "",
    "id": "7855a3c8-1076-480f-b78a-77f657fef82c",
    "last_name": "",
    "middle_name": "",
    "payment_method": "",
    "phone": "",
    "postal_code": "",
    "province": "",
    "salesforce_contact_id": "",
    "title": ""
  },
  "blocked": false,
  "date_created": "2019-12-06T00:06:15+00:00",
  "date_updated": "2019-12-06T00:18:33.269377+00:00",
  "email": "example@email.com",
  "in_contract": false,
  "name": "",
  "parent_account_id": "",
  "payable": true,
  "primary_instrument_id": ":inst_id",
  "plan_id": "",
  "status": "active",
  "stripe_customer_id": "cus_AAAkCnQDEP2VfQ",
  "verified": false,
  "instrument": {
    "id": ":inst_id",
    "uri": "/v1/accounts/:acct_id/instruments/:inst_id",
    "account_number": "645388146789",  // tokenized
    "bank_name": "",
    "card_cvv": "264",  // tokenized
    "card_expdate": {
      "month": "05081d0",  // tokenized
      "year": "4311"  // tokenized
    },
    "card_number": "2454454410121111",  // tokenized
    "card_token": "",
    "country": "US",
    "currency": "usd",
    "date_created": "2019-12-06T00:06:15+00:00",
    "date_updated": "2019-12-06T00:18:33.111371+00:00",
    "holder_name": "tok_live_token",  // tokenized
    "is_business": false,
    "is_individual": false,
    "last4": "",
    "method": "credit-card",
    "postal_code": "10576", // tokenized
    "provider": "stripe",
    "provider_fingerprint": "ABCTP1Q3w3vPMPxy",
    "provider_id": "pm_abcUWiLPLN7dVpu1S4CdwpJm",
    "provider_token": "",
    "routing_number": "917800000", // tokenized
    "status": "verified"
  }
}

onValidationError

This callback returns the form's state when a validation error is detected. Validation errors are handled locally and are not submitted to the server. This is useful in larger workflows where the next step is dependent on the success of the previous one.

Validation Error Properties

Property	Description
isDirty	Checks if you put any changes to the field
isFocused	Shows if the field in focus right now
errorMessages	An array of error messages for a specific field
isValid	Shows field validity
name	Shows field name
isEmpty	Determines whether the field is empty
elementId	DOM element with validation error

Example Validation Error

{
  "billing_preferences.cardNumber": {
    "isDirty": false,
    "isFocused": false,
    "errorMessages": [
      "is required"
    ],
    "isValid": false,
    "name": "billing_preferences.cardNumber",
    "elementId": "card-number"
  },
  /*...*/
}

onError

The onError callback is called when the form submission process is unsuccessful. This typically indicates a configuration issue or a problem with a network request as validation is handled locally and will not reach the server.

Example Error

{
  "http_status": 401,
  "message": "Unauthorized",
  "code": "invalid_auth"
}

Code	Meaning
invalid_auth	This indicates a problem with authentication.
invalid_param	One or more of the required parameters are missing.
invalid_param_dup	This happens when a duplicate email address is detected.
plaid_timeout	The Plaid authentication has timed out.
unknown	This is is for all unhandled errors on the backend.

Additional HTTP Statuses

Status	Meaning
200s	OK Everything worked as expected.
400	RevOps API bad request.
401	RevOps API access denied. Update your publicKey.
404	The requested resource doesn't exist.
500s	Server errors, contact RevOps for assistance.

Callback Example

import React, { Component } from 'react'

import {
  PaymentMethod,
} from 'revops-js'

import "revops-js/themes/defaultStyles.css"

class App extends Component {

  // this callback is called when an error occurs in revops-js
  onError = ({error}) => {
    let errorMessage =  'Please contact support'
    if (error.http_status < 500) {
      errorMessage = error.message
    }
    this.setState({error: true, errorMessage})
  }

  // If you'd like to save the data on your own platform in a PII-safe way, use the response object.
  onComplete = (accountObject) => {
    console.log(accountObject)
  }

  render() {
    const { email } = this.props
    return (
      <div className="ui container">
        <PaymentMethod
          publicKey="pk_sandbox"
          methods={['card', 'ach', 'plaid']}
          account={{
            accountId: "100000-3",
            email,
          }}
          onComplete={this.onComplete}
          onError={this.onError}
          onValidationError={(validationErrors) => {
            this.setState({ validationErrors })
          }}
        />
        {this.state.success === true &&
          <p className="confirmation-msg"> Details Saved! </p>
        }
        {this.state.formDirty === true &&
          <p className="validation-msg"> Form Not Complete </p>
        }
        {this.state.error === true &&
          <p className="error-msg"> {this.state.errorMsg} </p>
        }
      </div>
    )
  }
}