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.

📘

Platform

• BigCommerce Integration

Step 1 - Add iFrame to store

Create and add the iFrame HTML element containing the customer portal to the store.

You can do this one of two ways:

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

Example iFrame element:

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

Step 2 - Store customer data using Recharge front-end objects

Access 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, available via the frontend.

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

Step 3 - Generate the customer portal

Access the JavaScript methods on the frontend that lets 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>

Step 4 - Add the code to the store

Use the Scripts Manager in BigCommerce to add the script to the store.

Resources

• iFrame (from Mozilla)