Personalizing the user journey in Affinity

Use custom flow extensions to intercept regular customer actions (ie. a customer skips or reschedules an order) and provide tailored experiences

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:

ActionTriggerEvent name
SkipThe user clicks on the "Skip" button from an order or the subscription management page.Recharge::click::skip
UnskipThe user clicks on the "Unskip" button from an order or subscription page.Recharge::click::unskip
Order NowThe user clicks on the "Send now" button on the next order page.Recharge::click::orderNow
RescheduleThe user clicks on the "Reschedule" button from an order or the subscription management page.Recharge::click::reschedule
CancelThe user clicks on the "Cancel this subscription" link on the subscription management page.Recharge::extension::cancellation_flow
ReactivateThe user clicks on the "Reactivate" link on the subscription management page, or the Affinity overview page if the customer doesn't have active subscriptions.Recharge::click::reactivate

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.


Need Help? Contact Us