React Dibsy.js

React Dibsy.js is an embedded wrapper around Dibsy Components, allowing you to add checkout fields directly into your React Checkout.

Prerequisites

Install react-dibsy.js from the npm public registry.

npm i @dibsy-components/react-dibsy.js

Example

import React, { useState } from 'react'
import {
  DibsyClient,
  CardNumber,
  ExpiryDate,
  VerificationCode
} from '@dibsy-components/react-dibsy.js'

import ErrorsWrraper from './components/errors-wrraper'

// Take a look on the index.css to see how you can style the outer elements like .dibsy-component.is-valid

// Optional. If not provided, we will set en_US as a default value
const options = {
  locale: ''
}

// Custom style for components
var componentsOptions = {
  styles: {
    fontSize: '16px',
    color: '#3d3838',
    '&.is-invalid': {
      color: 'red'
    }
  }
  // You can add a custom placeholder
  // PlaceHolder: "custom placeholder" ,
}

const App = () => {
  //Set up the initial state of components..
  //You must respect the naming of each component in the card state
  const [cardState, setCardState] = useState({
    //cardHolder: {},
    cardNumber: {},
    expiryDate: {},
    verificationCode: {}
  })

  const [canSubmit, setCanSubmit] = useState(true)

  // get the state of each component from dibsy client via a callback.
  function getFieldState(data) {
    setCardState({
      ...data
    })
  }

  // submit the card data to get the result
  function submitPayment(e, onSubmit) {
    e.preventDefault()
    setCanSubmit(false)
    //if card data is valid, the result will be a card token... you can submit it to your backend api
    onSubmit().then((result) => {
      var token = result?.token
      var error = result?.error
      if (error) {
        alert(error?.message)
      } else {
        console.log(token)
      }
      setCanSubmit(true)
    })
  }

  return (
    <div className='outer-container'>
      <div className='inner-container'>
        <DibsyClient
          publicKey={'pk_test_pl078KnEzhAQwSSzTn51Bv__internal'}
          options={options}
          onEvent={getFieldState}
        >
          {({ onSubmit }) => (
            <div className='form'>
              <h1>Pay with Credit Card</h1>
              <div className='form-fields'>
                <div className='row'>
                  <div className='form-group form-group--card-number'>
                    <CardNumber
                      eventListener={'change'}
                      options={componentsOptions}
                    />
                    <ErrorsWrraper state={cardState.cardNumber} />
                  </div>
                </div>

                <div className='row'>
                  <div className='form-group form-group--expiry-date'>
                    <ExpiryDate
                      eventListener={'change'}
                      options={componentsOptions}
                    />
                    <ErrorsWrraper state={cardState.expiryDate} />
                  </div>

                  <div className='form-group form-group--verification-code'>
                    <VerificationCode
                      eventListener={'change'}
                      options={componentsOptions}
                    />
                    <ErrorsWrraper state={cardState.verificationCode} />
                  </div>
                </div>
              </div>

              <button
                id='submit-button'
                className='submit-button'
                type='submit'
                onClick={(e) => submitPayment(e, onSubmit)}
                disabled={!canSubmit}
              >
                {canSubmit ? 'submit' : 'sumbitting...'}
              </button>
            </div>
          )}
        </DibsyClient>
      </div>
    </div>
  )
}

export default App

License

MIT ©