Page Comparison

It is possible to create a site outside of CheckoutChamp that has login capability to a Membership Portal. Any user that logs in will remain logged in when navigating between the sites. The user may also checkout using their card on file.

...

1. Place some kind of Login option on the Shopping site. When the Login option is chosen, redirect the user to the CheckoutChamp membership login page. The proper redirect format is https://www.membership.com/login?redirectToMe=https://www.shoppingsite.com/home

   • “www.membership.com/login” is the CheckoutChamp login page URL

   • “https://www.shoppingsite.com/home” is the Shopping site page where the user is to be returned after successful login

2. Place the following script into the body of all pages in the Shopping site

   • Set the membershipdomain variable on line 2 to your Checkout domain. This should be the domain only, not a specific page.

   • Set the shoppingdomain variable on line 3 to your Shopping domain. This should be the domain only, not a specific page.

   • For Chrome, Firefox, and Edge browsers, line 22 displays the returned value from the login event. The line can be removed. It is listed here as an starting point to display login information on the Shopping site, such as a first and last name. This is optional.

   • Safari browsers need additional attention to properly store the SSO cookie [Chandra - I do not understand the steps in your document. Let us work on steps that are obvious to less experienced developers. Please provide an example.]

<script>
var membershipdomain = "https://www.membership.com";
var shoppingdomain = "https://www.shoppingsite.com";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("id", "ifmcrossoriginid");
ifrm.setAttribute("name", "ifmcrossorigin");
ifrm.setAttribute("src", membershipdomain + "/iframe.html?shoppingdomain=" + shoppingdomain);
ifrm.setAttribute("class", "btn-primary");
ifrm.style.width = "109px";
ifrm.style.height = "36px";
ifrm.style.border = "none";
if(!navigator.userAgent.includes("Chrome") && navigator.userAgent.includes("Safari") && document.referrer === membershipdomain){
  ifrm.style.display = "block";
  document.getElementById("modal_request_access").appendChild(ifrm);
} else {
  ifrm.style.display = "none";
  document.body.appendChild(ifrm);
}
window.addEventListener("message", (event) => {
  if (event.origin !== membershipdomain)
    return;
  // This event.data will have the first name and the last name.
  console.log(event.data);
}
, false);
function logoutMembership(){
  var iframe = document.getElementById('ifmcrossoriginid');
  var win;
  try { 
    win = iframe.contentWindow;}
  catch(e) { win = iframe.contentWindow;}
  win.postMessage("logout", membershipdomain);
}
</script>

...