Knowledge Center

Knowledge Center > Commerce > Hosted Commerce Pages > Hosted Checkout Pages > Create Checkout Pages on Your Website > Embed the Checkout Page iFrame

Embed the Checkout Page iFrame

Zuora Hosted Checkout Pages are no longer under active development. Customers should use Payment Pages 2.0 for their secure payment acceptance requirements.

Overview

This article describes how to create the iFrame URL and embed the iFrame into your webpage.

Putting 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 Checkout page URL is as follows:

SRC="domain/PublicHostedPage.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/PublicHostedPage.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 Checkout 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_checkout_iframe"
name="z_checkout_iframe"
width="100%"
src=”https://apisandbox.zuora.com/apps/PublicHostedPage.do?method=requestPage&
id=4028e69732d7eb100132ef2260fc50ed&tenantId=10514&
timestamp=1316846058955&token7av18bEz97Jrq9K6z0QPyvJpIqIxSmZc&signature=hWgy_5usRD1IbmCHg9eOVw==”>
</iframe>

You can resize the iFrame by adjusting the height and width pixel attributes. Furthermore, you can remove the frame border lines by setting the frameborder attribute to zero.  Here is an example of how you can use these attributes: 

<iframe 
frameborder="0" 
width="630"
height="880"
src=”https://apisandbox.zuora.com/apps/PublicHostedPage.do?method=requestPage&
id=4028e69732d7eb100132ef2260fc50ed&tenantId=10514&
timestamp=1316846058955&token7av18bEz97Jrq9K6z0QPyvJpIqIxSmZc&signature=hWgy_5usRD1IbmCHg9eOVw==”>
</iframe>

What's Next

  1.  
Last modified
10:34, 22 May 2017

Tags

Classifications

(not set)