Fields Only
The idea of the Fields Only page is to insert an iFrame containing just the payment fields, so payment can be embedded directly into your checkout flow. An example implementation might look like the following:
Note: The red box above represents our iFrame. It is full width by default, but you can set your own size constraints.
URL
The URL is formatted as:
https://app.dimepayments.com/fo/<your-slug-here>/XX.XX
- Replace <your-slug-here> with the slug for your main Hosted Payment Page.
- XX.XX is the amount and should always be sent in "dollars.cents" format. This is required.
You can optionally pass additional fields to be stored with the transaction either in the URL or later via post messaging. These fields include:
- firstName
- lastName
- email
- phone
- memo
- customerUUID
Example:
https://app.dimepayments.com/fo/<slug>/1.11?firstName=john&lastName=doe&email=john@example.com
iFrame Communication
You can pass data to the iFrame via post messaging, and the iFrame will return payment response details to the parent page the same way.
To send data:
window.parent.postMessage({'paymentType': value}, '*');
Updating iFrame Example
To update payment details dynamically:
const iframe = document.querySelector("#iframe");if (iframe && amount > 0) {
iframe.contentWindow.postMessage(
{
amount: amount,
firstName: firstName,
lastName: lastName,
email: email,
phone: phone,
memo: "a description or value"
},
"*"
);
}
iFrame Response Example
When the user selects ACH or Credit Card, the iFrame notifies the parent window with the following payload:
{"paymentType": "cc"} // or "ach"
When a transaction is submitted and a response is received, the iFrame broadcasts it to the parent window:
window.parent.postMessage(JSON.stringify(response), '*');
Example Response (Approval):
{
"data": {
"amount": "1.00",
"transaction_type": "Credit Card",
"transactionNumber": "1234567890",
"description": "a memo concerning this transaction",
"status_code": "00",
"status_text": "APPROVAL",
"multi_use_token": "abcdefg123456790",
"billing_address": {
"first_name": "Jamie",
"last_name": "Doe",
"addr1": "1 Lakeshore Dr",
"addr2": "Suite 100",
"city": "Chicago",
"state": "IL",
"zip": "60601"
}
}
}
Example Response (Decline):
{
"data": {
"amount": "1.00",
"transaction_type": "Credit Card",
"transactionNumber": "1234567890",
"description": "a memo concerning this transaction",
"status_code": "05",
"status_text": "DECLINE",
"billing_address": {
"first_name": "Jamie",
"last_name": "Doe",
"addr1": "1 Lakeshore Dr",
"addr2": "Suite 100",
"city": "Chicago",
"state": "IL",
"zip": "60601"
}
}
}