Step 3: Add secure fields
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.
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 Gr4vy ID is the unique identifier for your instance. Together with the environment (sandbox or production) it is used to connect to the right APIs.
The possible values for your ID are one of wpay, wpay1, wpay2, or wpay3. We will inform you
in which instance your account has been set up.
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.
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.
Checkout session expiry
A 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
Was this page helpful?