Using Refs with Revops js

Revops-js can be integrated into a larger workflow using React Refs. This is particularly useful when there is additional information to collect and you need to submit multiple parts of the form at the same time or when you want to implement your own controls.

The first step is to define the ref in the parent component and pass it to the revops-js component.

class SignupForm extends Component {
  constructor(props) {
    super(props)

    // define the reference to the component
    this.saveRef = React.createRef()
  }
  render() {
  const { accountId, email } = this.props
  return (
    <div>
      <form>
        <label>Email
          <input type="email" name="email" value={email} />
        </label>
        <label>Password
          <input type="password" name="password" />
        </label>
        <PaymentMethod
          publicKey={publicKey}
          account={{ accountId, email }}
          defaultMethod="credit-card"
          // pass the reference to the revops component
          saveRef={this.saveRef}
        />
        </form>
      </div>
    )
  }
}

Next, we will call the revops onSubmit method using the ref by defining the submitSecure method in our component. This returns a Promise that can be used to handle the response when successful or catch network and validation errors.

Note: the catch method should be implemented to avoid any unhandled errors.

class SignupForm extends Component {
  constructor(props) {
    super(props)

    // define the reference to the component
    this.saveRef = React.createRef()
  }

  submitSecure = () => {
    // tell the revops form to submit itself
    if (!!this.saveRef === true) {
      // onSubmit will return a promise
      this.saveRef.current
        .onSubmit()
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          // both validation and network errors are return by `reject` in the promise
          console.log(err)
        });
    }
  }

  render() {
  const { accountId, email } = this.props
  return (
    <div>
      <form>
        {/* ... */}
        <PaymentMethod
          publicKey={publicKey}
          account={{ accountId, email }}
          defaultMethod="credit-card"
          saveRef={this.saveRef}
        />
        {/* Now we can call it when we submit the entire form */}
        <input type="submit" onClick={this.submitSecure} />
        </form>
      </div>
    )
  }
}

Now we can now control the submission process of the <PaymentMethod /> component from its parent component as one unified workflow.