Frameless PunchOut v1

Below is a draft specification proposed by EqualLevel for solving two common problems with PunchOut that are typically solved by wrapping the PunchOut site in a frame. Currently this functionality is supported by the EqualLevel eProcurement system and a number of suppliers that have opted to provide a better PunchOut experience to their users.

Frameless PunchOut Specification v1

When punching out from an eProcurement system to a punchout site, a frame may be placed around the punchout site. The frame may contain a link to return to the eProcurement system so users can easily navigate away from the punchout site back to eProcurement system. The wrapper page may also contain JavaScript that sends background requests to the eProcurement system to keep the users session alive in the eProcurement system.

In some cases, the frame interferes with the functionality of the punchout site. Below is an alternative solution for these problems that uses extrinsics to pass information to the PunchOut site that it can use to render a small banner with a "return" link.

Sending the X-Frame-Options: DENY or X-Frame-Options: SAMEORGIN HTTP header will prevent the site from being loaded in a frame in modern browsers.

Extrinsics

eProcurement systems that implement this feature will include 3 extrinsic fields in the cXML PunchOutSetupRequest.

  • ReturnLinkUrl - the url that the return link should go to. This is optional, alternatively an empty shopping cart can be sent back via PunchOut.

  • ReturnLinkLabel - the label to use for the return link ("Return to Marketplace").

  • SessionPingUrl - a url that will keep the users session alive in the eProcurement system while the user is at the punchout store

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cXML SYSTEM "http://xml.cxml.org/schemas/cXML/1.2.021/cXML.dtd">
<cXML xml:lang="en-US" payloadID="1302207408.904244@example.com" timestamp="2014-04-07T16:16:48-04:00" version="1.2.021">
  <Header>
    ...
  </Header>
  <Request>
    <PunchOutSetupRequest operation="create">
      ...
      <Extrinsic name="ReturnLinkUrl">https://shop.example.com/mysite/</Extrinsic>
      <Extrinsic name="ReturnLinkLabel">Return to Marketplace</Extrinsic>
      <Extrinsic name="SessionPingUrl">https://shop.example.com/mysite/ping</Extrinsic>
      ...
    </PunchOutSetupRequest>
  </Request>
</cXML>

Example Implementation

Below is example HTML that could be used on a PunchOut site to create the return banner and session ping-back JavaScript.

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
		#return_banner {
			background-color: #feffbf;
			border-bottom: 1px solid #666;
			font-size: 13px;
			font-weight: 700;
			padding: 2px 4px;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999;
		}

		#return_banner a {
			color: #000;
		}

		#return_banner_spacer {
			height: 24px;
			width: 100%;
		}
  </style>
</head>
<body>
  <div id="return_banner">
      <a href="RETURN_LINK_URL_GOES_HERE">RETURN_LINK_LABEL_GOES_HERE</a>
  </div>
  <div id="return_banner_spacer">

  <!-- Punchout site content goes here -->

  <script type="text/javascript">
		window.setTimeout(function() {
			var url = "SESSION_PING_URL_GOES_HERE";
			document.body.innerHTML += '<iframe src="' + url + '" width="1" height="1" frameborder="0"></iframe>';
		}, 4000);
  </script>
</body>
</html>

Share