Documentation Index
Fetch the complete documentation index at: https://integration.wpay.com.au/llms.txt
Use this file to discover all available pages before exploring further.
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 the 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 the deployment of the 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.The possible values for your ID are one of wpay, wpay1, wpay2, or wpay3. You are informed
in which instance your account has been set up.
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, add any of the 3 individual fields to the form. Mix and
match these with custom forms, and add custom labels.
import {
CardNumber,
ExpiryDate,
SecurityCode,
} from '@gr4vy/secure-fields-react'
const Form = () => {
return (
// Custom fields can be added as well as secure fields
<label htmlFor="cc-holder-name">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>
)
}
When not using the React SDK, every field Embed needs to be attached to an HTML element.
In this case, the fields were attached to <input> fields. The fields can be attached to
any element using a querySelector-compatible query.
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
/>
Vaulting the card data
Secure Fields handles the PCI-compliant submission of all the card data to
the servers. Once the form is ready, use the submit feature of
Secure Fields to vault the data. A callback notifies 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 a custom UI
- Submitted the data to the vault and listened for events
