johnny-tools-frame v1.0.1

Johnny Tools Frame

cool stuf

Install:

npm install johnny-tools-frame

Add CDN to your html (public) file

<script src="https://cdn.checkout.com/js/framesv2.min.js"></script>

Here is na example of the usage:

import React from 'react'
import {
  Frames,
  CardNumber,
  ExpiryDate,
  Cvv,
  PayButton
} from 'johnny-tools-frame'

class Example extends React.Component {
  cardTokenized (event) {
    console.log(event)
  }

  onValidationChanged (event) {
    console.log(event)
  }

  onClickPay (e) {
    // submit Frames
    e.preventDefault()
    Frames.submitCard()
  }

  render () {
    return (
      <Frames
        config={{
          publicKey: 'pk_test_xxx', // your publick key
          debug: true
        }}
        onValidationChanged={this.onValidationChanged}
        cardTokenized={this.cardTokenized}
      >
        <CardNumber className='card-input' />
        <ExpiryDate className='card-input' />
        <Cvv className='card-input' />

        <PayButton className='pay-button' onClick={e => this.onClickPay(e)}>
          Pay Now
        </PayButton>
      </Frames>
    )
  }
}
export default Example