Knowledge Center

Knowledge Center > Commerce > Hosted Commerce Pages > Hosted Payment Method Pages 1.0 > Create Hosted Payment Pages on Your Website > Embed and Submit the iFrame

Embed and Submit the iFrame

Overview

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:

SRC="domain/PublicHostedPaymentMethodPage.do?method=requestPage&id=...&tenantId=...&timestamp=...&token=...&signature=...

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:

https://apisandbox.zuora.com/apps/PublicHostedPaymentMethodPage.do?method=requestPage&id=4028e69732d7eb100132ef2260fc50ed&tenantId=10514&timestamp=1316846058955&token7av18bEz97Jrq9K6z0QPyvJpIqIxSmZc&signature=ODU2ODMyZmY5YmFjNDQzZDQ4NmU2MDg3ODNkNzhlNTc

Embed the iFrame to Your Page

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

<iframe
id="id"
name="name"
width="100%"
src="…”>
</iframe>

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

<iframe
id="z_hppm_iframe"
name="z_hppm_iframe"
width="100%"
src=”https://apisandbox.zuora.com/apps/PublicHostedPaymentMethodPage.do?method=requestPage&
id=4028e69732d7eb100132ef2260fc50ed&tenantId=10514&
timestamp=1316846058955&token7av18bEz97Jrq9K6z0QPyvJpIqIxSmZc&signature=hWgy_5usRD1IbmCHg9eOVw==”>
</iframe>

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 https://apisandbox.zuora.com/apps/Hosted/postmessage.js

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:

submitHostedPage("iFrameId");

For example:

submitHostedPage("z_hppm_iframe");

What's Next

Next, Provide a Callback Page.

Last modified
10:42, 23 Oct 2015

Tags

Classifications

(not set)