Embed and Submit the iFrame

Overview

Now that you can dynamically generate the security signature, the following section describes how to create the iFrame URL as well how to embed and submit the iFrame into your webpage and how to configure its submit button.

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 Z-Payments Page URL is as follows:

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

Using the sample data from the "generate the signature" section, an example URL looks like this:

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

Embed the iFrame to Your Page

To embed the iFrame to your page, include the following:

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

The Z-Payments Page iFrame URL is the URL that you generated in the previous section. For example: 

<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 lives on the merchant webpage (and not within the iFrame) you will need to utilize postMessage.js to work through cross domain restrictions for submitting the iFrame living on the Zuora server.  Therefore, you will need to make sure postMessage.js is present in your checkout page:

<script src='postmessage.js'></script>

Note: This JavaScript is available on https://apisandbox.zuora.com/apps/Hosted/postmessage.js

Submitting the Z-Payments Page

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.

Related