React Component Library

Example BS4+React checkout form

import pl from 'payload-react';

class Checkout extends React.component {
  componentDidMount() {
    this.refs.checkoutForm.pl_form.params.styles = { invalid: "is-invalid" }

    this.refs.checkoutForm.pl_form.on('processed', (data)=>{
      console.log('processed', data)
    })
  }
  render() {
    return <pl.form.payment ref="checkoutForm" className="container">
      <pl.input.amount type="hidden" value="10.00"/>
      <div className="row pt-2">
        <div className="form-group col-7 px-1">
          <label>Card Number</label>
          <pl.input.card className="form-control"/>
        </div>
      </div>
      <div className="row pt-2">
        <button className="btn btn-primary" type="submit">Pay Now</button>
      </div>
    </pl.form.payment>
  }
}

Use the payload-react component library when integrating Secure Input with React.

Installation

npm install payload-react

View on Github

Get started

Once you've installed the Payload.js React library as shown above, import the payload-react module to get started. Note: We recommend using the shorthand name of pl when importing.

import pl from 'payload-react';