Customizing iframe form elements
Background |
---|
Before starting this tutorial, make sure you understand the following topics from the Quick start section:
|
By default, each ecommerce and retail iframe displays a standard set of fields for the form.
Ecommerce iframe
For the ecommerce iframe, you can show or hide all these elements:
Element | Parameters for
| Default value | Description |
---|---|---|---|
Submit button |
|
| Set to |
Billing fields |
|
| Set to |
Security code field |
|
| Set to |
Country selection menu |
| All | Leave this parameter out of the request in order to show all available countries, based on the merchant ID (MID). |
Form validation for security code |
|
| Set to |
You can customize the elements that display by following these steps:
-
Send a
POST
request to the Create one-time-use token endpoint.-
Include the
uiOptions
object and one or more of the parameters from the table above in the body of the request.For example, to display a submit button, limit the countries to the United States and Canada, and to hide the phone and second address line fields, the request looks similar to the following:
curl -X POST https://api.nexiopaysandbox.com/pay/v3/token \ -H 'Content-Type: application/json' \ -H 'Accept: application/json' \ -H 'Authorization: Basic [Base64_encoded_login]' \ -d '{ "uiOptions": { "displaySubmitButton": true, "limitCountriesTo": ["CA","US"], "hideBilling": { "hideAddressTwo": true, "hidePhone": true } } }'
The response includes a
token
parameter. Encoded within this value is the settings for the form. Save thistoken
for use in the next step.{ "expiration": "2022-09-18T15:43:05.664Z", "fraudUrl": "https://api.nexiopaysandbox.com/pay/v3/fingerprint?token=830d36f6-a5e3-4455-9600-3a55b63e2fc2", "token": "830d36f6-a5e3-4455-9600-3a55b63e2fc2" }
-
-
Request the iframe to display on the page using the
token
from the response in step 1.You may display a customized form for the iframe for any of the following types of pages:
- Save payment information page for card - using Save card token with iframe
- Save payment information page for echeck - using Save echeck token with iframe
- Checkout page for card - using Run card transaction with iframe
- Checkout page for echeck - using Run echeck transaction with iframe
For example, the following request uses the
token
to return the HTML for an iframe for a checkout page for a card, with the settings as specified in step 1.curl -X GET https://api.nexiopaysandbox.com/pay/v3?token=830d36f6-a5e3-4455-9600-3a55b63e2fc2'
Retail iframe
For the retail iframe, you can show or hide all these elements:
Element | Parameters for
| Default value | Description |
---|---|---|---|
Processing Account |
| None | Preselects the Processing Account dropdown field to the specified merchant ID (MID) and hides the field from the user. |
Auth Only |
|
| Hides or displays the Auth Only checkbox. |
Customer Info section |
|
| Hides or displays the Customer Information section of the iframe. This section contains the following fields: First Name, Last Name, Phone, Email, Customer Reference Number, Date of Birth, National Identification Number |
Billing Info section |
|
| Hides or displays all billing fields in the Billing Information section. This section contains the following fields: Country, Address 1, Address 2, City, State / Province, Postal Code, Phone |
Shipping Info section |
|
| Hides or displays all shipping fields in the Shipping Information section. This section contains the following fields: Same as billing information from the [, Country, Address 1, Address 2, City, State / Province, Postal Code, Phone |
Order Info section |
|
| Hides or displays the Order Information section of the iframe. This section contains the following fields: Invoice, Order Number, Description, Descriptor |
Country selection menu |
| All | Leave this parameter out of the request in order to show all available countries, based on the merchant ID (MID). |
Customer, Billing, and Shipping fields |
| Varies | Specifies which fields to display in the retail iframe's form, and whether they are required or optional for the end user filling out the form. If you include this For each field included, you configure the value as one of the following: For example, the following displays a form with only a required firstName field and an optional lastName field:\
This object can have one or more of the following fields specified: For additional information about a field, see the Customizing the retail iframe topic. |
In order to customize the retail iframe, follow the steps in Customizing the retail iframe.
Updated 16 days ago