Embed customer portal within a store using an iFrame

You can embed the Recharge customer portal within a BigCommerce store, allowing customers to remain on the same URL while managing their subscriptions. Embedding the portal creates a seamless user experience, versus redirecting the customer to Recharge, where the customer portal is hosted.

1. Add iFrame to store

First create the iFrame HTML element containing the Customer Portal and add it to the store.

Example iFrame element

<iframe id="rcPortal" src="#" width=100% height=1200px style="display: none;"></iframe>

You can do this one of two ways:

• Add the element to a custom Stencil template file using the Stencil CLI. Then, create a store web page using the custom template.
• Add the element to a store page by entering raw HTML.

2. Store customer data using Recharge front-end objects

You'll need the following data to generate the customer portal.

• Store hash
• Customer email
• Platform ID (to identify whether the customer is using BigCommerce, Shopify, etc.)

Access and store this information using the recharge_store_objects object, which is available via the front-end.

Example code storing variables

 const store_hash = window.RCA_store_objects.store_hash
 const email = window.RCA_store_objects.customer.email
 const platform_id = window.RCA_store_objects.customer.id

3. Generate the customer portal

You have access to JavaScript methods on the front-end that let you perform various tasks.

Use the getCustomerData method to generate the customer portal, passing in the data stored in the previous step. The following script demonstrates retrieving the portal URL, passing the customer portal URL to the iFrame element, and unhiding the element.

Example code generating customer portal

 RCAInterface.account.getCustomerData(store_hash, {email, platform_id}).then((data) => {
        const src = data?.recharge?.portal_url || "#"
        const element = document.querySelector("#rcPortal")
        element.setAttribute("src", src)
        element.setAttribute("style", undefined)
    })

Example response

{
  email: "[email protected]",
  name: "Thomas Flynn",
  platform_id: "5",
  recharge: {
    expires_at: "2021-09-23T14:31:58.690395",
    hash: "987xyz",
    id: 1,
    portal_url: "https://admin.rechargeapps.com/portal/456def/schedule?token=123abc",
    temp_token: "123abc",
  }
}

Below is an example of the final script performing all the steps above:

Example script

<script>
    const store_hash = window.RCA_store_objects.store_hash
    const email = window.RCA_store_objects.customer.email
    const platform_id = window.RCA_store_objects.customer.id

    RCAInterface.account.getCustomerData(store_hash, {email, platform_id}).then((data) => {
        const src = data?.recharge?.portal_url || "#"
        const element = document.querySelector("#rcPortal")
        element.setAttribute("src", src)
        element.setAttribute("style", undefined)
    })
</script>

4. Adding the code to the store
   You can add this script to the store using Scripts Manager.

Resources

• iFrame (from Mozilla)