Skip to main content

Embed and Submit the iFrame


Embed and Submit the iFrame

This article is for the Hosted Payment Method Pages (HPM) 1.0. Zuora has deprecated HPM1.0. There are no further plans for HPM 1.0 and Zuora will no longer provide support for any issues with HPM 1.0. Payment Pages 2.0 are now generally available, and are a replacement for HPM 1.0. To migrate from HPM 1.0 to Payment Pages 2.0, see this migration guide.


This article describes how to create the iFrame URL, how to embed and submit the iFrame into your webpage, and how to configure its submit button.

Put Together the iFrame URL

Use the parameters that you generated to construct the URL of the iFrame.

As seen from the example from the Preview Page, the parameters to construct the Hosted Payment Method pages URL is as follows:


For example, using the following values:

  • Id: 4028e697325f8e970132603326446b33
  • Tenant: 10514
  • Timestamp: 1316846058955
  • Token: 7av18bEz97Jrq9K6z0QPyvJpIqIxSmZc
  • API security key: PEq1yiahIyFO6XxpyuCWyLoG4ym_HAklH2-FfAisLuk=
  • Encoded signature: ODU2ODMyZmY5YmFjNDQzZDQ4NmU2MDg3ODNkNzhlNTc=

The resulting URL would be:

Embed the iFrame to Your Page

Use the following format to embed the Hosted Payment Method page iFrame to your page:


Using the example from Generate the Signature for the iFrame, the iFrame URL would be:


Add JavaScript to Submit the iFrame

Since the Submit button is on the merchant webpage, and not within the iFrame, you need to use postMessage.js to work through cross domain restrictions for submitting the iFrame that is on the Zuora server. Make sure postMessage.js is present in your checkout page:

<script src='postmessage.js'></script>
Note Note: This JavaScript is available on

Submit the Hosted Payment Method pages

The Submit button will submit the iFrame to Zuora to create a payment method by using the JavaScript mentioned earlier.  The code to create the Submit button should look similar to:


For example:


What's Next

Next, Provide a Callback Page.