@gr4vy/secure-fields-react v1.19.0

Secure Fields for React

Add Secure Fields in your React app.

Use @gr4vy/secure-fields in a non-React application.

Usage

Via the command line, install this package as follows.

npm install @gr4vy/secure-fields-react --save-prod
# yarn add @gr4vy/secure-fields-react

Get started

To use Secure Fields, import the SecureFields Provider component and wrap your app with it, making sure you pass the necessary configuration props and any event handlers.

require('@gr4vy/secure-fields-react/lib/style.css') // default styles
// import '@gr4vy/secure-fields-react/lib/style.css'

const { SecureFields } = require(`@gr4vy/secure-fields-react`)
// import { SecureFields } from (`@gr4vy/secure-fields-react)

<SecureFields
  gr4vyId='[GR4VY_ID]'
  environment='sandbox'
  sessionId='[SESSION_ID]'
  // paymentMethodId='[PAYMENT_METHOD_ID]' // uuid of a stored payment method (optional)
  debug
  font="Lato"
  onReady={(data) => console.log('Secure Fields loaded', data)}
  onCardVaultSuccess={() => console.log('Card tokenization successful')}
  onCardVaultFailure={(data) => console.error('Card tokenization failed', data)}
>
  <Form />
</SecureFields>

Note: Replace [GR4VY_ID] and [SESSION_ID] with the ID of your instance and the Session ID obtained from calling the Checkout Sessions API.

Creating a form

Within the SecureFields provider you can now create your own card form using each of the Secure Field components.

Additionally, a useSecureFields hook is available to get the configured Secure Fields instance which can be used to submit() the card form, and check if debug is enabled or not.

const {
  CardNumber,
  ExpiryDate,
  SecurityCode,
} = require('@gr4vy/secure-fields-react')

// Alternatively:
// import {
//   CardNumber,
//   ExpiryDate,
//   SecurityCode
// } from ('@gr4vy/secure-fields-react')

const Form = () => {
  const { secureFields } = useSecureFields()

  const handleSubmit = () => {
    secureFields.submit()
  }

  return (
    <>
      <label htmlFor="cc-number">Card number</label>
      <CardNumber />

      <label htmlFor="cc-expiry-date">Expiry date</label>
      <ExpiryDate />

      <label htmlFor="cc-security-code">Security code</label>
      <SecurityCode />

      <button onClick={handleSubmit}>Submit</button>
    </>
  )
}

Field Components

The available secure fields components are CardNumber, ExpiryDate and SecurityCode. You can pass the following props to customize each of them.

Click to Pay

Click to Pay is the better way to pay online – featuring advanced payment technology built on secure remote commerce industry standards.

Prerequisites

Follow the instructions for Click to Pay Merchant Setup.

Adding Click to Pay

Once Secure Fields is configured, you can start adding Click to Pay to your checkout.

Firstly, add the ClickToPay component to your form so Secure Fields can render Click to Pay. Make sure to pass the required options to it as props.

Then, add a sign-in form to let users access their Click to Pay stored cards and wrap it with the ClickToPaySignIn component.

Additionally, add a checkbox to allow a customer not already enrolled to determine if they want to share their card data with Click to Pay.

Finally, ensure card inputs are wrapped with the CardForm component.

import { ClickToPay, ClickToPaySignIn, CardForm } from '@gr4vy/secure-fields-react'

...

const { secureFields } = useSecureFields()

<ClickToPay
  dpaLocale="en_AU"
  cardBrands={['mastercard', 'visa', 'american-express']}
  email="john@example.com"
  mobileNumber={{
    countryCode: '61',
    phoneNumber: '491570159',
  }}
  consentCheckbox="#click-to-pay-consent-checkbox"
/>

<ClickToPaySignIn
  onVisibilityChange={(visible: boolean) => {
    console.log('Sign in UI visibility changed. Visible', visible)
  }}
>
  <label>Access your Click to Pay stored cards</label>
  <input type="text" className="click-to-pay-email-phone" ref={phoneOrEmailRef} />
  <button
    className="px-4 py-2 text-white bg-blue-500 rounded-md hover:bg-blue-600"
    onClick={() => secureFields?.clickToPay?.signIn({ email: phoneOrEmailRef?.current?.value })}
  >Continue</button>
</ClickToPaySignIn>

<CardForm>
  <label htmlFor="cc-number">Card number</label>
  <CardNumber styles={styles} />

  <label htmlFor="cc-expiry-date">Expiry date</label>
  <ExpiryDate styles={styles} />

  <label htmlFor="cc-security-code">Security code</label>
  <SecurityCode styles={styles} />
</CardForm>

<div>
  <input type="checkbox" id="click-to-pay-consent-checkbox" />
  <label htmlFor="click-to-pay-consent-checkbox">Store my card with Click to Pay</label>
</div>

The ClickToPay component accepts the following props:

Click to Pay Global events

The following props can be used on the SecureFields component to listen to specific Click to Pay events.