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 can also collect other kind of information along with the card data. We currently support an additional postal code field.
import { Field } from '@gr4vy/secure-fields-react'
<label htmlFor="postal-code">Postal code</label>
<Field
type="postalCode"
placeholder="Enter postal code"
pattern="[A-Z][0-9]\s[0-9][A-Z]{2}" // optional, defaults to 5 characters minimum
/>
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