Embedded Widgets: Payment Method Update, and Customer Portal

SubscriptionFlow's Embed SDK allows you to integrate SubscriptionFlow directly into your own website without redirecting customers to a hosted SubscriptionFlow page.

Using a single JavaScript SDK, you can embed:

• Payment Method Update
• Customer Portal

Loading the SDK

Add the SubscriptionFlow Embed SDK to your page.

<script src="https://<tenant>.subscriptionflow.com/modules/paymentsflow/js/embed.js"></script>

Example

<script src="https://demo.subscriptionflow.com/modules/paymentsflow/js/embed.js"></script>

The SDK exposes a global object named:

SubscriptionFlow

Available Widgets

Payment Method Update

The Payment Method Update widget allows existing customers to securely update their saved payment method.

HTML Container

<div id="sf-update"></div>

Mount Widget

const widget = SubscriptionFlow.mount("#sf-update",{

    checkoutUrl:
    "https://<tenant>.subscriptionflow.com/en/public-checkout/payment-method-update/<CUSTOMER_ID>"

});

Please follow the screenshot below to find the <CUSTOMER_ID>

Events

widget.on("ready", callback);

widget.on("success", callback);

widget.on("error", callback);

Complete Payment Method Update Example

<!DOCTYPE html>
<html>

<head>
<title>Payment Method Update</title>
</head>

<body>

<div id="sf-update"></div>

<button id="updateCard">
Update Payment Method
</button>

<script src="https://<tenant>.subscriptionflow.com/modules/paymentsflow/js/embed.js"></script>

<script>

const widget=SubscriptionFlow.mount("#sf-update",{

checkoutUrl:
"https://<tenant>.subscriptionflow.com/en/public-checkout/payment-method-update/<CUSTOMER_ID>"

});

widget.on("success",function(result){

alert("Payment Method Updated");

console.log(result);

});

document.getElementById("updateCard").onclick=async function(){

const result=await widget.submit();

console.log(result);

};

</script>

</body>
</html>

Customer Portal

The Customer Portal widget embeds the complete SubscriptionFlow customer portal inside your website.

Prerequisites

• Whitelist your website in Portal Manager and enable Single Sign-On (SSO) for the In-App Portal: Settings → Customization → Customer Portal → Single Sign-On → InApp Portal (add your site under Allowed URLs)

• Use a valid OAuth Client ID. Generate your OAuth credentials:  Settings → API & Integrations → OAuth Clients

• The customer must have Portal Access enabled.
• To enable the Auto Customer Portal, go to:
  Settings → Customization → Preferences → Customers → Advance Settings → Customer Portal
• Set Auto Enable Portal to True, then click Save.

• If you are using an HPP link to allow customers to subscribe, make sure the steps below are completed to prevent duplicate customer records from being created. Go to:
  Settings → Customization → Web Checkout Settings → Configurations → Advance Configurations → Customer Sync & Restrictions Configurations and turn on Enable Customer Matching

• Your website must use HTTPS.

HTML Container

<div id="sf-portal"></div>

Mount Portal

const portal = SubscriptionFlow.mountPortal("#sf-portal",{

    baseUrl:"https://<tenant>.subscriptionflow.com",

    clientId:"YOUR_CLIENT_ID",

    email:"customer@example.com",

    route:"root"

});

Portal Events

portal.on("ready", callback);

portal.on("error", callback);

portal.on("close", callback);

Complete Customer Portal Example

<!DOCTYPE html>
<html>

<head>
<title>Customer Portal</title>
</head>

<body>

<div id="sf-portal"></div>

<script src="https://<tenant>.subscriptionflow.com/modules/paymentsflow/js/embed.js"></script>

<script>

const portal = SubscriptionFlow.mountPortal("#sf-portal",{

baseUrl:"https://<tenant>.subscriptionflow.com",

clientId:"YOUR_CLIENT_ID",

email:"customer@example.com",

route:"root"

});

portal.on("ready",function(){

console.log("Portal Ready");

});

portal.on("error",function(error){

console.error(error);

});

portal.on("close",function(){

console.log("Portal Closed");

});

// portal.destroy();

</script>

</body>
</html>

Troubleshooting

Related Documentation

• Hosted Payment Pages
• Public Checkout Pages
• Customer Portal
• Portal Manager
• API Authentication