Customizing the subscription widget for BigCommerce stores

📘

Platform:

• BigCommerce Checkout Integration
• Recharge Checkout on BigCommerce

Understanding the subscription widget

Recharge adds a script to the BigCommerce Script Manager upon install running the frontend code on your store. One of the features is the subscription widget, which displays on the product page.

This is how the subscription widget works:

• A BigCommerce modifier is made on the BigCommerce product that represents the subscription information with the options that you’ve configured on the Recharge product. For example, Delivery Every: 30 days, 60 days.
• The Recharge script will run on the product page, hide the BigCommerce modifier, and inject the Recharge subscription widget

If you’d like to fully customize the subscription widget, you must disable the frontend widget styling on product pages, and style the widget as desired from the default BigCommerce modifier styling.

Disabling the Frontend widget styling

To disable the frontend widget styling, add this script to your BigCommerce Script Manager:

{
            "name": "BC-Recharge Settings Script",
            "description": "BC Recharge Settings Script",
            "html": "<script>let RCA_SETTINGS = {
                pages: {
                    product: {
                        enabled: false
                    }
            }; }</script>",
            "auto_uninstall": true,
            "load_method": "default",
            "location": "head",
            "visibility": "all_pages",
            "kind": "script_tag",
            "enabled": true
        }

Once the widget is disabled, you will be left with a plain BigCommerce Modifier. See the following image for an example.

With this plain modifier, you can fully customize it like any other BigCommerce Modifier.

Load data from the store CDN

To ensure that the verbiage is correct in your modifier values, you can retrieve subscription information from RCA_DATA.RCA_PRODUCT_DATA after the product script loads. This has all the product information you need to create a customized subscription widget.

[
    {
        "id": 141,
        "weight": 2,
        "variants": [
            {
                "id": 105,
                "weight": 2,
                "tax_code": "",
                "tax_class_id": ""
            }
        ],
        "subscriptionModifier": {
            "id": 251,
            "charge_every": 30,
            "frequencies": {
                "358": 30
            }
        },
        "subscription": {
            "discount_type": "percentage",
            "discount_amount": 0,
            "charge_interval_frequency": 30,
            "cutoff_day_of_month": null,
            "cutoff_day_of_week": null,
            "expire_after_specific_number_of_charges": null,
            "modifiable_properties": [],
            "number_charges_until_expiration": null,
            "order_day_of_month": null,
            "order_day_of_week": null,
            "order_interval_frequency_options": [
                30
            ],
            "order_interval_unit": "day",
            "storefront_purchase_options": "subscription_only"
        },
        "tax_code": "",
        "isSubscription": true,
        "isSubscriptionOnly": true,
        "isPrepaid": false
    },
    {
        "id": 142,
        "weight": 0,
        "variants": [
            {
                "id": 106,
                "weight": 0,
                "tax_code": "",
                "tax_class_id": ""
            }
        ],
        "subscriptionModifier": {
            "id": 250,
            "charge_every": 180,
            "frequencies": {
                "356": 30
            }
        },
        "subscription": {
            "discount_type": "percentage",
            "discount_amount": 0,
            "charge_interval_frequency": 180,
            "cutoff_day_of_month": null,
            "cutoff_day_of_week": null,
            "expire_after_specific_number_of_charges": null,
            "modifiable_properties": [],
            "number_charges_until_expiration": null,
            "order_day_of_month": null,
            "order_day_of_week": null,
            "order_interval_frequency_options": [
                30
            ],
            "order_interval_unit": "day",
            "storefront_purchase_options": "subscription_only"
        },
        "tax_code": "",
        "isSubscription": true,
        "isSubscriptionOnly": true,
        "isPrepaid": true
    }
]