Personalizing the user journey in Affinity

Custom flow extensions intercept the initial click even before the action has occurred. Recharge no longer owns the interaction after the click is intercepted, and gives you full control over the flow.

You must be on the Recharge Pro plan, or a Custom plan, to make advanced customizations to the Affinity customer portal.

📘

Platform:

• Shopify Checkout Intergration
• Recharge Checkout on Shopify

---

Available actions

Implement custom flow extensions to respond when a user clicks one of the following:

---

Create a custom flow extension

Listen to click events emitted by Affinity and respond accordingly to integrate custom flow extensions into your portal:

1. Listen to the specific click event.
2. Use event.preventDefault() to block the standard flow.
3. Retrieve relevant subscription IDs. All click events contain a list of relevant subscription IDs in the payload under event.detail.payload.subscriptionIds.
4. Use the storefront SDK to access additional context about the subscription, address, or customer.
5. Display the custom flow based on the gained context. 

Custom flow example

The following example uses a script to interrupt the cancelation process for specific products after checking that the canceled product matches a list of restricted IDs. Instead of sending the customer through the typical cancelation flow, a message urges customers to reach out for support when canceling this specific product. The standard cancelation process applies to all other products:

<script>
// Define the list of product IDs that are not eligible for direct cancellation
const uncancellableProductIds = [PRODUCTID];

// Customize the message to guide customers to contact you
const alertMessage = "To cancel this product, please reach out to us at [email protected]";

// Listen for the cancellation flow event
document.addEventListener(
  "Recharge::extension::cancellation_flow",
  (event) => {
    const { subscription } = event.detail;
    const subscriptionProductId = subscription.shopify_product_id;
    
    // Check if the product is in the list of uncancellable products
    if (uncancellableProductIds.includes(subscriptionProductId)) {
      // Prevent the default cancellation flow
      event.preventDefault();
      
      // Display an alert to guide customers
      window.alert(alertMessage);
    }
  }
);
</script>

🚧

Warning

It is important to consider and incorporate Automatic Renewal Laws (ARL) into any custom cancelation process to ensure legal compliance. See Automatic Renewal Law (ARL) and Recharge to learn more about ARLs and how Recharge remains compliant, providing you with insights into how to configure your own setup.