@gr4vy/secure-fields v1.19.0

Secure Fields

Add Secure Fields to your Node app.

Use @gr4vy/secure-fields-react in a React application or @gr4vy/secure-fields-cdn in non-Node web application.

Usage

Via the command line, install this package as follows.

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

Get started

To use Secure Fields, you need some placeholder elements to attach the secure fields on to. Each of these elements will be replaced by a secure field. These elements can be <input> but do not need to be.

<label for="cc-number">Card Number</label>
<input id="cc-number" />

<label for="cc-cvv">Security code</label>
<input id="cc-cvv" />

<label for="cc-expiry">Expiry date</label>
<input id="cc-expiry" />

<button id="cc-button">Submit</button>

To use Secure Fields, call the new SecureFields() method with a configuration object that includes the environment (sandbox or production), your gr4vyId and a sessionId obtained from calling the Checkout Sessions API. An optional paymentMethodId parameter can also be passed to use Secure Fields with a stored payment method.

Then, add the fields and event listeners needed to handle the form submission.

const { SecureFields } = require('@gr4vy/secure-fields')

// Alternatively
// import { SecureFields } from '@gr4vy/secure-fields'

const secureFields = new SecureFields({
  gr4vyId: '[GR4VY_ID]',
  environment: 'sandbox',
  sessionId: '[SESSION_ID]',
  // paymentMethodId: '[PAYMENT_METHOD_ID]', // uuid of a stored payment method (optional)
})

secureFields.addFont('Lato')

const styles = {
  color: 'black',
  fontSize: '18px',
  fontFamily: 'Lato',
  ':focus': {
    color: 'blue',
  },
}

const number = secureFields.addCardNumberField('#cc-number', { styles })
const expiry = secureFields.addExpiryDateField('#cc-expiry', { styles })
const cvv = secureFields.addSecurityCodeField('#cc-cvv', { styles })

secureFields.addEventListener(SecureFields.Events.CARD_VAULT_SUCCESS, () =>
  console.log('Card tokenized successfully')
)

secureFields.addEventListener(
  SecureFields.Events.CARD_VAULT_FAILURE,
  (data) => console.log('Card tokenization failed', data) // data.status, data.code, data.message
)

number.addEventListener('input', (data) => {
  console.warn('Input changed', data) // data.schema, data.codeLabel...
})

const button = document.querySelector('#cc-button')
button.addEventListener('click', () => {
  secureFields.submit()
})

Note: Replace [GR4VY_ID] with your Gr4vy ID and [SESSION_ID] with a valid checkout session id.

This will initialize Secure Fields and replace each of the inputs with a corresponding secure element. On submit, it will store the card data securely with Gr4vy, after which you can create a transaction or vault the card for later use.

For more information please refer to the Secure Fields get started guide.

Styles

The outer styling of every Secure Field is completely in your control by applying your own CSS to the following class names.

/* Applied to each field */
.secure-fields__input {
}
/* Applied to the card number field */
.secure-fields__input--number {
}
/* Applied to the expiry date field */
.secure-fields__input--expiry-date {
}
/* Applied to the security code field */
.secure-fields__input--security-code {
}
/* Applied to a focused field */
.secure-fields__input[data-secure-fields-focused] {
}
/* Applied to an invalid field */
.secure-fields__input[data-secure-fields-invalid] {
}
/* Applied to an autofilled field */
.secure-fields__input[data-secure-fields-autofilled] {
}

To set the CSS of the content of a field an object of CSS rules can be passed to the addCardNumberField, addExpiryDateField and addSecurityCodeField methods.

const styles = {
  // Default styles applied to field
  color: "#66666",
  fontSize: "1.3em",
  // ...etc

  // Applied when field has a value autofilled by browser/extension
  ':autofill': { ... },
  // Applied when field is hovered
  ':hover': { ... },
  // Applied when field is focused
  ':focus': { ... },
  // Applied when field is disabled
  ':disabled': { ... },
  // Applied when field is valid
  ':valid': { ... },
  // Applied when field is invalid
  ':invalid': { ... },
  // Applied to field placeholder
  '::placeholder': { ... },
}

Not all CSS properties can be set. The currently supported list is as follows.

backgroundColor
boxShadow
caretColor
color
colorScheme
cursor
font
fontFamily
fontFeatureSettings
fontKerning
fontSize
fontSizeAdjust
fontStretch
fontStyle
fontVariant
fontVariantAlternates
fontVariantCaps
fontVariantEastAsian
fontVariantLigatures
fontVariantNumeric
fontVariationSettings
fontWeight
letterSpacing
lineHeight
opacity
padding
textAlign
textShadow
textRendering
transition
MozOsxFontSmoothing
WebkitFontSmoothing

Events

Global events

The following events can be listened to by attaching an event handler to the SecureFields instance using the addEventListener method.

Field events

The following events can be listened to by attaching an event handler to a field (returned by the addCardNumberField, addExpiryDateField and addSecurityCodeField methods) using the addEventListener method.

Some of these provide additional useful data like the card BIN, validation status, and scheme. For example, the input event on a card number field might include { schema: 'visa', codeLabel: 'CVV', valid: true, ... }.

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 a placeholder component to your form so Secure Fields knows where to render the Click to Pay component.

Then, add a simple sign-in form to let users access their Click to Pay stored cards.

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

Finally, ensure card inputs are wrapped with a container element (e.g. <form />) with a specific id.

<div id="click-to-pay"></div>

<div id="click-to-pay-sign-in" style="display: none;">
  <label>Access your Click to Pay stored cards</label>
  <input type="text" id="phoneOrEmail" />
  <button id="signInButton">Continue</button>
</div>

<form id="card-form" style="display: none;">
  <label htmlFor="cc-number">Card number</label>
  <input type="text" id="cc-number" />

  <label htmlFor="cc-expiry-date">Expiry date</label>
  <input type="text" id="cc-expiry-date" />

  <label htmlFor="cc-security-code">Security code</label>
  <input type="text" id="cc-security-code" />
</form>

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

<script>
  var phoneOrEmail = document.querySelector('#phoneOrEmail')
  var signInButton = document.querySelector('#signInButton')
  signInButton.addEventListener('click', function () {
    clickToPay.signIn({ email: phoneOrEmail.value })
  })
</script>

Next, attach the secure field for Click to Pay to this element. This will require the email and/or phone number of the user you want to create a transaction for. It also requires an HTML query for the consent checkbox that controls if the card data for a new card is shared with Click to Pay or not.

const clickToPay = secureFields.addClickToPay('#click-to-pay', {
  dpaLocale: 'en_AU',
  cardBrands: ['mastercard', 'visa', 'american-express'],
  email: 'john@example.com',
  mobileNumber: {
    countryCode: '61',
    phoneNumber: '491570159',
  },
  consentCheckbox: '#click-to-pay-consent-checkbox',
  signIn: '#click-to-pay-sign-in',
  cardForm: '#card-form',
})
// clickToPay = { element: <div id="click-to-pay" />, signIn: ..., options: { dpaName: ... } }

The available Click to Pay options are the following:

Additional Global events

The following Click to Pay events can be listened to by attaching an event handler to the SecureFields instance using the addEventListener method.

API reference

Getters

Methods