Repository navigation
v2 Reference
Renders the Guesty tokenization form in the provided container element. The form is rendered in an iframe to ensure PCI compliance.
Returns a Promise that resolves after the iframe is loaded or is rejected if the iframe fails to load.
Options
containerId (required)
The ID of the container element within which the iframe will be rendered.
providerId (required)
The ID of the payment provider for which the form is rendered.
onStatusChange (optional)
A callback function to be called when the validity of the form changes. Boolean value will be passed as an argument
const onStatusChange = (isValid) => {
// process value
}styles (optional)
An object containing style variables to apply to the form.
| Variable | Description |
|---|---|
mobileBreakpoint |
Breakpoint for mobile view in pixels |
fontFamily |
Font family used throughout the form |
fontSizeMd |
Font size used for regular text on the form |
fontSizeLg |
Font size used for large text on the form |
fontWeightRegular |
Font weight for regular text |
fontWeightBold |
Font weight for bold text |
borderRadius |
Border radius of the form input |
inputHeight |
Height of the form input |
inputPadding |
Padding of the form input |
colorText |
Primary text color used throughout the form |
colorTextError |
Text color used for error messages |
colorPlaceholder |
Input placeholder color |
colorBorder |
Border color of the form input |
colorBorderError |
Border color of the form input when there is an error |
colorBorderHover |
Border color of the form input when hovered |
colorFormBackground |
Background color of the form |
colorBackground |
Background color of the form input |
colorBackgroundError |
Background color of the form input when there is an error |
colorBackgroundDisabled |
Background color of the form input when disabled |
lang (optional)
Display language of the form elements. The default is en-US. Supported languages:
| Lang | Description |
|---|---|
en-US |
English |
es-ES |
Spanish |
it-IT |
Italian |
pt-PT |
Portuguese |
initialValues (optional)
Provide initial customer information that will be displayed in the tokenization form. The form will render with empty fields if not provided.
| Field | Description |
|---|---|
firstName |
Cardholder's first name |
lastName |
Cardholder's last name |
street |
Cardholder's street address |
city |
Cardholder's city |
zipCode |
Cardholder's ZIP code |
country |
Cardholder's country (ISO 3166-1 alpha-2 code) |
state |
Cardholder's state (see values below) |
Codes for the names of the principal subdivisions (e.g., provinces or states)
Australia
| Code | Subdivision name |
|---|---|
| ACT | Australian Capital Territory |
| JBT | Jervis Bay Territory |
| NSW | New South Wales |
| NT | Northern Territory |
| QLD | Queensland |
| SA | South Australia |
| TAS | Tasmania |
| VIC | Victoria |
| WA | Western Australia |
Canada
| Code | Subdivision name |
|---|---|
| AB | Alberta |
| BC | British Columbia |
| MB | Manitoba |
| NB | New Brunswick |
| NF | Newfoundland and Labrador |
| NS | Nova Scotia |
| NT | Northwest Territories |
| NU | Nunavut |
| ON | Ontario |
| PE | Prince Edward Island |
| QC | Quebec |
| SK | Saskatchewan |
| YT | Yukon |
United States
| Code | Subdivision name |
|---|---|
| AL | Alabama |
| AK | Alaska |
| AS | American Samoa |
| AZ | Arizona |
| AA | Armed Forces Americas |
| AE | Armed Forces Other |
| AP | Armed Forces Pacific |
| AR | Arkansas |
| CA | California |
| CO | Colorado |
| CT | Connecticut |
| DE | Delaware |
| DC | District of Columbia |
| FM | Federated States of Micronesia |
| FL | Florida |
| GA | Georgia |
| GU | Guam |
| HI | Hawaii |
| ID | Idaho |
| IL | Illinois |
| IN | Indiana |
| IA | Iowa |
| KS | Kansas |
| KY | Kentucky |
| LA | Louisiana |
| MP | Northern Mariana Islands |
| ME | Maine |
| MD | Maryland |
| MH | Marshall Islands |
| MA | Massachusetts |
| MI | Michigan |
| MN | Minnesota |
| MS | Mississippi |
| MO | Missouri |
| MT | Montana |
| NE | Nebraska |
| NV | Nevada |
| NH | New Hampshire |
| NJ | New Jersey |
| NM | New Mexico |
| NY | New York |
| NC | North Carolina |
| ND | North Dakota |
| OH | Ohio |
| OK | Oklahoma |
| OR | Oregon |
| PW | Palau |
| PA | Pennsylvania |
| PR | Puerto Rico |
| RI | Rhode Island |
| SC | South Carolina |
| SD | South Dakota |
| TN | Tennessee |
| TX | Texas |
| UT | Utah |
| VT | Vermont |
| VI | Virgin Islands |
| VA | Virginia |
| WA | Washington |
| WV | West Virginia |
| WI | Wisconsin |
| WY | Wyoming |
showInitialValuesToggle (optional)
Show checkbox to toggle between initial values and empty fields. The default is false.
initialValuesToggleLabel (optional)
Label for the initial values toggle checkbox. The default is Same as guest.
sections (optional)
Change the order of the form sections. The default is ["cardholderName", "paymentDetails", "billingAddress"].
showSupportedCards (optional)
Display section with a list of supported card brands at the top of the form. The default is true.
showPciCompliantLink (optional)
Display a PCI compliance note at the bottom of the form. The default is true.
inputsConfig (optional)
Customize the form inputs.
{
[inputName]: {
label: string,
placeholder: string
}
}
Default values
{
firstName: {
label: 'First name',
placeholder: 'First name'
},
lastName: {
label: 'Last name',
placeholder: 'Last name'
},
cardHolderId: {
label: 'Card holder ID (Israeli citizens)',
placeholder: 'ID number'
},
cardNumber: {
label: 'Credit card number',
placeholder: '****-****-****-1234'
},
expirationDate: {
label: 'Expiration date',
placeholder: 'MM/YY'
},
csc: {
label: 'CVV', // based on credit card type,
placeholder: 'CVV' // based on credit card type
},
street: {
label: 'Street',
placeholder: 'Street'
},
city: {
label: 'City',
placeholder: 'City'
},
country: {
label: 'Country',
placeholder: 'Country'
},
state: {
label: 'State',
placeholder: 'State'
},
zipCode: {
label: 'Zip code',
placeholder: 'Zip code'
}
}
Triggers the validation of the form fields and displays error messages if any. Returns void.
Triggers the validation of the form fields and displays error messages if any. If there are no errors, submits the form and returns a Promise that resolves with the payment method or rejects with an error.
Payload
amount (required)
Amount of the future payment.
currency (required)
Currency code of the future payment (e.g. "USD", "GBP"...).
listingId (required)
The ID of the property being booked.
partnerId (optional)
The ID of the partner which creates the upsell
Option 1
quoteId (required)
The ID of the reservation quote created via Booking Engine API.
guest (required)
An object containing guest details.
-
guest.firstName(required) -
guest.lastName(required) -
guest.email(optional) -
guest.phone(optional)
Destroys the iframe and removes it from the DOM. Removes all event listeners.