The next step to is to add Secure Fields to your checkout experience.

​
Install Secure Fields

There are a few ways to install Secure Fields, either as a React component, Node library, or straight off our CDN. 
npm install @gr4vy/secure-fields-react --save
# or: yarn add @gr4vy/secure-fields-react
When using the CDN the latest version of the library is always pulled straight from the server for every request.

​
Initializing secure fields

With Secure Fields installed it’s now possible to initialize the connection to your instance. Secure Fields expects the ID of your instance (gr4vyId), the environment, and a checkout session ID.
The instance ID is the unique identifier for your deployment of our system and is included in every API call. Together with the environment (sandbox or production) it is used to connect to the right APIs, as well as dashboard.
import '@gr4vy/secure-fields-react/lib/style.css'
import { SecureFields } from "@gr4vy/secure-fields-react";

const App = () => {
  return (
    <SecureFields
      // set up the environment
      gr4vyId="example"
      environment="sandbox"
      sessionId={sessionId} // created in step 2
      // enable debugging
      debug
      // attach event handlers
      onReady={(data) => console.warn("Secure Fields loaded", data)}
      onCardVaultSuccess={() =>
        console.warn("Card has been tokenized successfully!")
      }
      onCardVaultFailure={() => console.error("Failed to tokenize card data")}
    >
      {/* Form to be added next */}
      <Form />
    </SecureFields>
  );
};

​
Adding each of the individual fields

Next, you can add any of the 3 individual fields to your form. You can mix and match these with your own forms, and you can add your own labels. 
import {
  CardNumber,
  ExpiryDate,
  SecurityCode,
} from '@gr4vy/secure-fields-react'

const Form = () => {
  return (
    // You can add your own fields as well as secure fields
    <label htmlFor="cc-holder-name">Cardholder Name</label>
    <input
      id="cc-holder-name"
      placeholder="Name on the card"
    />

    // These are secure fields
    <label htmlFor="cc-number">Card Number</label>
    <CardNumber placeholder="Enter card number" />

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

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

    <button id='cc-button'>Store card data</button>
  )
}
Unless you are using our React SDK, every field Embed needs to be attached to an HTML element. In this case, we attached the fields to <input> fields. The fields can be attached to any element using a querySelector-compatible query.
You should now see each secure field loaded on your page. Please see our more extensive guides on how to add event listeners and your own styles to Secure Fields.

​
Vaulting the card data

Secure Fields handles the PCI-compliant submission of all the card data to our servers. Once your form is ready, use the submit functionality of Secure Fields to vault the data. A callback will notify you when the data has been submitted successfully. 
import { useSecureFields } from "@gr4vy/secure-fields-react";

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

  const onClick = () => {
    secureFields.submit();
  };
};

Checkout session expiryA checkout session is only valid for one hour. This means that the checkout session needs to be used to create a transaction or store the details as a payment method before that time.

​
Summary

In this step you:
  • Installed and initialized Secure Fields.
  • Rendered each of the individual fields in your own UI
  • Submitted the data to the vault and listened for events