Skip to main content

How to Embed the Prommt checkout on your website

This article explains how to add the Prommt checkout to your website using an iFrame, so customers can pay directly on your payment page.

S
Written by Support Team

For: IT teams and web administrators setting up or maintaining the Prommt checkout on a website.


Before you start

  • You need access to edit your website's HTML — either directly or through your CMS

  • You need your Prommt iFrame embed code — this is provided by Prommt during onboarding, or available from your Prommt Account Manager on request

  • Your Prommt account must be in Live Mode before real payments can be processed through the iFrame. See [Understanding your Card Gateway settings]

  • Test the iFrame in a staging environment before publishing to production where possible


What the iFrame checkout does

The Prommt iFrame embeds a live, interactive checkout directly into a page on your website. When a customer arrives at your payment page and a Prommt payment request is active, the checkout loads inside the iFrame — they complete payment without leaving your site.

When no active payment request is linked to the iFrame (for example, when a customer types the URL directly), the iFrame displays an "Expired Link" message. This is the expected behaviour — it means the iFrame is working correctly. It only loads a live checkout when triggered by an active Prommt payment request link.

Examples by sector:

  • Hospitality — A hotel's deposit payment page embeds the Prommt checkout iFrame. Guests receive a payment link by email; tapping it opens the checkout on the hotel's own domain.

  • Automotive — A dealership's "secure your vehicle" page embeds the iFrame. Buyers receive a deposit request and pay on the dealer's branded page.

  • Travel — A travel agency's client portal embeds the checkout on a dedicated payment page. Booking payments stay within the agency's own web environment.

  • Leisure — A leisure venue's membership renewal page embeds the iFrame. Members pay on the venue's website without being redirected elsewhere.


How to embed the iFrame

Step 1 — Get your embed code

Your Prommt iFrame embed code is a short snippet of HTML that looks like this:

html

<iframe   src="https://checkout.prommt.com/[your-account-id]"   width="100%"   height="700"   frameborder="0"   allow="payment"   title="Prommt Checkout"> </iframe>

The exact src URL is unique to your Prommt account. Do not modify the URL — contact your Prommt Account Manager if you need to confirm it.


Step 2 — Add the iFrame to your payment page

Paste the embed code into the HTML of the page where you want the checkout to appear. The iFrame should be placed in the main content area of the page — not inside a navigation element, modal, or another iFrame.

If you're using a CMS such as WordPress, Squarespace, or a similar platform, use an HTML block or Custom Code widget to paste the snippet directly. Do not use a rich text editor — it may strip or modify the code.


Step 3 — Set the page dimensions

The iFrame needs enough vertical space to display the full checkout without scrolling. The recommended minimum height is 700px. If your payment page is narrow, test across device sizes to confirm the checkout renders correctly on mobile.

If you see the checkout cut off or partially hidden, increase the height value in the embed code.


Step 4 — Test the iFrame

Before sending live payment requests, test the iFrame:

  1. Open your payment page in a browser

  2. Confirm the iFrame renders — you should see the "Expired Link" message if no active request is linked. This confirms the iFrame is loading correctly.

  3. Send yourself a test Prommt payment request

  4. Open the payment link — the checkout should load inside the iFrame on your payment page

  5. Complete a test payment


Step 5 — Publish and go live

Once testing is complete and your account is switched to Live Mode, your iFrame is ready to handle real payments. Send your first live payment request and confirm the checkout loads and processes correctly.


What success looks like

Your payment page shows the Prommt checkout embedded within your site. Customers who receive a Prommt payment request tap the link, land on your branded payment page, and see the checkout load inside the iFrame. They complete payment without leaving your website. The payment record appears in View Payments in your Prommt dashboard.

When no active request is linked — for example, if someone browses to the payment page directly — the iFrame displays the "Expired Link" message. This is correct behaviour.


Keeping the iFrame working

The iFrame code itself is stable — once embedded, it doesn't need regular updates. However, any change to the page where the iFrame lives can break it. Common causes include:

  • A website redesign that removes or overwrites the page content

  • A CMS update that strips custom HTML blocks

  • A developer editing the page template without knowing the iFrame code is there

If the iFrame stops working after a site change, your customers won't be able to reach the checkout. See [Troubleshooting: customer can't load the checkout] for steps to diagnose and restore it quickly.

We recommend adding a note to your website's documentation or page notes flagging that the payment page contains a Prommt iFrame that must not be removed or modified.


Troubleshooting

The iFrame is showing a blank space instead of the checkout or the "Expired Link" message. The iFrame code may have been removed or broken during a page edit. Check the page source to confirm the embed code is still present and intact. If it has been removed, re-add the original embed code. Contact Prommt Support via the chat button in your dashboard if you need the embed code re-issued.

The checkout loads but payments aren't processing. Check that your Prommt account is in Live Mode under Settings → Card Gateway. If the account is still in Test Mode, real payments cannot be processed. Also confirm your gateway is showing as connected on the same page.

The iFrame is too small and the checkout is cut off. Increase the height value in the embed code — try 750 or 800 pixels. Also check that the page container isn't restricting the iFrame width with a CSS max-width or overflow: hidden rule.

Customers are reporting the checkout isn't loading but I can see it fine. This is often a browser cache issue on the customer's end, not a problem with the iFrame itself. Ask the customer to hard-refresh the page: Ctrl + F5 on Windows, Command + Shift + R on Mac. If the issue affects multiple customers simultaneously, check whether the iFrame code is still in place. See [Troubleshooting: customer can't load the checkout].

The page shows "Expired Link" even when I've sent an active payment request. Confirm the payment request link goes to the correct URL — the one where the iFrame is embedded. If the link points to a different page, or the iFrame src URL has been modified, the request won't connect to the checkout. Contact Prommt Support with the payment request reference and the URL of your payment page.

Did this answer your question?