Accessing store information from Recharge's CDN on the front-end

Recharge lets you build your subscription widget for fully custom purchasing experience on any site.

This article outlines how to access product, store and setting information from Recharge's CDN on the front-end.

📘

Platform:

  • Custom

The Recharge CDN files described in this article aren't yet available for other platform integrations. Support for BigCommerce and Shopify is coming soon.


Accessing the CDN

A Content Delivery Network ensures that data is reliably available to a website or service no matter where you're accessing it from. The table below outlines what Recharge data is available to you as you build a storefront.

For stores using a Custom integration, the {{external_platform_domain}} is your store’s identifier in Recharge. You can retrieve the identifier from your Recharge merchant portal. For example, if your merchant portal URL is mystore-hl.admin.rechargeapps.com, your store’s identifier is mystore-hl.

The only {{version}} currently supported is 2021-08.

Base URL: https://static.rechargecdn.com/store/{{external_platform_domain}}

File nameContentsFile Path
{product_id}.jsonContains data for specific products./product/{{version}}/{{external_product_id}}.json
widget_settings.jsonWidget settings for a store. You can customize the subscription widget within Recharge to match the look and feel of your storefront as well as modify the text that appears to your customers./{{version}}/widget_settings.json
store_settings.jsonStore settings including your store’s currency formatting settings as configured in Shopify or BigCommerce./{{version}}/store_settings.json
products.jsonCombines data from all three files above./product/{{version}}/products.json

CDN URL examples

PlatformDomainIdentifier
customdiapers-hlIndividual product: https://static.rechargecdn.com/store/diapers-hl/product/2021-08/4771.json

All products: https://static.rechargecdn.com/store/diapers-hl/product/2021-08/products.json

Individual product JSON example

{
    "product":
    {
        "external_product_id": "123",
        "plans":
        [
            {
                "id": 59,
                "discount_amount": "10.00",
                "discount_type": "percentage",
                "sort_order": 1,
                "charge_interval_frequency": 1,
                "interval_unit": "month",
                "order_interval_frequency": 1,
                "type": "subscription",
                "title": "Delivery every month",
                "external_plan_name": "Delivery every month",
                "external_plan_id": 17531071
            }
        ],
        "external_plan_group_id": 18736717,
        "variants":
        [
            {
                "external_variant_id": "37382314983615",
                "option_values":["Small"],
                "prices":
                [
                    {
                        "currency": "USD",
                        "compare_at_price": "40.00",
                        "unit_price": "39.95",
                        "plans":
                        [
                            {
                                "id": 59,
                                "discounted_price": "31.96",
                                "discount_value": "7.99"
                            }
                        ]
                    }
                ]
            }
        ]
    },
    "meta":
    {
        "version": "2021-08"
    }
}
FieldTypeDescription
external_product_idstringThe unique identifier for the product in an e-commerce platform like Shopify, BigCommerce, or an external system used by API integrations (headless).
plans[]array of objectsList of subscription plans for a product as configured in Recharge.
plans[].idnumberUnique identifier for the subscription plan in Recharge.
plans[].discount_amountstringSubscribe-and-save discount amount.
plants[].discount_typestringSubscribe-and-save discount type for the amount defined in discount_amount. Currently only percentage is supported.
plans[].sort_ordernumberSort order for the plan.
plans[].charge_interval_frequencynumberFrequency at which the subscriber will be charged.
plans[].interval_unitstringThe unit applied to charge_interval_frequency and order_interval_frequency (day, week, or month). All plans for a product have the same interval_unit.
plans[].order_interval_frequencynumberFrequency at which the subscriber will receive shipments when subscribed to this plan.
plans[].typestringThe type of plan. Possible values are subscription, prepaid, onetime.
plans[].titlestringThe title of the plan as defined in Recharge.
plans[].external_plan_namestringOnly applies to Shopify Checkout Integration. Selling Plan name as defined in Shopify by Recharge.
plans[].external_plan_idnumberOnly applies to Shopify Checkout Integration. Selling Plan ID as defined in Shopify.
external_plan_group_idnumberOnly applies to Shopify Checkout Integration. Selling Plan Group ID as defined in Shopify.
variants[]array of objectsList of the product's variants.
variants[].external_variant_idstringUnique identifier for the variant in an e-commerce platform like Shopify, BigCommerce, or an external system used by by API integrations (headless).
variants[].option_valuesarray of stringsList of the variant's option values.
variants[].pricesarray of objectsThe variant's price attributes for each currency. Recharge currently only supports one currency per store.
variants[].prices[].currencystringThree letter currency code in which prices are listed.
variants[].prices[].compare_at_pricestringThe original price of the variant before an adjustment or a discount.
variants[].prices[].unit_pricestringThe price for the variant after adjusting, usually for a discount.
variants[].prices[].plans[]array of objectsArray containing the subscribe-and-save price of the variant after applying the discount_amount on the unit_price for each plan.
variants[].prices[].plans[].idnumberUnique identifier for a plan in Recharge.
variants[].prices[].plans[].discounted_pricestringVariant's subscribe-and-save price.
variants[].prices[].plans[].discount_valuestringThe variant's subscribe-and-save discount value.

Widget settings

The following section contains the content available in the widget_settings.json file and an example of how the JSON data is structured.

Widget settings JSON example

{
  "widget_settings": {
    "active_color": "#000000",
    "background_color": "#efefef",
    "display_on": "[\"product\"]",
    "first_option": "onetime",
    "font_color": "#040404",
    "form_type": "button",
    "how_it_works": "<strong>How subscriptions work</strong><br>Products are automatically delivered on your schedule. No obligation, modify or cancel your subscription anytime.",
    "learnmore_url": "http://rechargepayments.com/subscribe-with-recharge",
    "learnmore_verbiage": "Learn more...",
    "onetime_message": "One-time purchase",
    "popup_background_color": "#606060",
    "popup_link_color": "#ffffff",
    "popup_text_color": "#e7e7e7",
    "poweredby_url": "http://rechargepayments.com/subscribe-with-recharge",
    "published": "true",
    "select_subscription_first": "false",
    "show_learnmore": "false",
    "show_poweredby": "true",
    "show_subscription_details": "true",
    "show_subscription_details_icon": "true",
    "subscribe_and_save_extended_label": "on every recurring order",
    "subscribe_message": "Subscribe &amp; save",
    "subscribe_without_discount_message": "Subscribe",
    "subscription_details_verbiage": "Subscription details",
    "translations": "{\"days\":\"Days\",\"month\":\"Month\",\"months\":\"Months\",\"week\":\"Week\",\"weeks\":\"Week\"}",
    "widget_charge_every": "Charge every",
    "widget_deliver_every": "Delivery every",
    "widget_icon": "black"
  }
}
FieldTypeDescription
active_colorstringHTML Hex code used to set the text color of a selected option
background_colorstringHTML Hex code used to set the the background color of the widget
display_onstringList of locations where the widget should be displayed
first_optionstringIndicator of the first listed purchase option
font_colorstringHTML Hex code used to set the color of the text
form_typestringIndicates the form component type
how_it_worksstringHTML for the “How it works" section
learnmore_urlstringURL target for the "Learn More" button
learnmore_verbiagestringdisplay text for the learn more button
onetime_messagestringText displayed when a customer chooses to purchase the item as a one-time purchase
popup_background_colorstringHTML Hex code used to set the background color of the popup
popup_link_colorstringHTML Hex code used to set the popup link color
popup_text_colorstringHTML Hex code used to set the popup text color
poweredby_urlstringURL target for the "Powered by" button
publishedstringBoolean indicating whether the widget is published
select_subscription_firststringBoolean indicating whether subscription option is selected by default
show_learnmorestringBoolean indicating whether "Learn more" section is displayed
show_poweredbystringBoolean indicating whether "Powered by" section is displayed
show_subscription_detailsstringBoolean indicating whether subscription details are displayed
show_subscription_details_iconstringBoolean indicating whether Recharge icon is displayed in subscription details
subscribe_and_save_extended_labelstringAdditional display text for subscribe and save purchase option
subscribe_messagestringText displayed when a user chooses to purchase the item as a subscription purchase item
subscribe_without_discount_messagestringText displayed when a user chooses to purchase the item as a subscription purchase item, but no discount is offered
subscription_details_verbiagestringText displayed as a link to link to view subscription details
translationsstringObject containing translation options for widget verbiage
widget_charge_everystringDisplay text preceding charge interval options
widget_deliver_everystringText preceding the available interval options for subscriptions
widget_iconstringColor of the Recharge icon within the widget. Possible values: White(?), Black(?), white, black

Store Settings

This section outlines all data available in the store_settings.json file and an example of how the JSON data is structured.

Store settings JSON example

{
    "store_settings":
    {
        "external_platform_domain": "recharge-cameo-dev-1.mybigcommerce.com",
        "external_store_hash": "ezugzr2hlz",
        "weight_unit": "grams",
        "store_currency":
        {
            "decimal_separator": ".",
            "currency_code": "USD",
            "currency_symbol_location": "right",
            "thousands_separator": ",",
            "currency_symbol": "$",
            "zero_decimal_currency": false
        },
        "store_identifier": "test-store-sp"
    },
    "meta": {
        "version": "2021-08"
    }
}
FieldTypeDescription
external_platform_domainstringThe store’s domain in Shopify or BigCommerce
Does not apply for API Integration stores
external_store_hashstringYour store’s unique hash in BigCommerce (only applies for BigCommerce)
weight_unitstringThe weight unit for products as defined at the store level in your Shopify or BigCommerce store. For API integration stores, this defaults to grams
store_currency.decimal_separatorstringThe decimal separator defined in Shopify or BigCommerce. For Shopify, this is derived from the setting under Settings > General > Store Currency > HTML without currency

For BigCommerce, this is derived from the setting under Store Settings > Currency > Default Currency > Edit.

(Not applicable to API Integration stores)
store_currency.currency_codestringFor API Integrations, the store’s currency code in Recharge

For Shopify and BigCommerce, this is the store’s default currency code in that platform
store_currency.currency_symbol_locationstringThe decimal separator defined in Shopify or BigCommerce. For Shopify, this is located under Settings > General > Store Currency > HTML without currency

For BigCommerce, this is located under Store Settings > Currency > Default Currency > Edit

(Not applicable for API Integration)
store_currency.thousands_separatorstringThe decimal separator defined in Shopify or BigCommerce. For Shopify, this is located under Settings > General > Store Currency > HTML without currency

For BigCommerce, this is located under Store Settings > Currency > Default Currency > Edit

(Not applicable for API Integration)
store_currency.currency_symbolstringThe decimal separator defined in Shopify or BigCommerce. For Shopify, this is located under Settings > General > Store Currency > HTML without currency

For BigCommerce, this is located under Store Settings > Currency > Default Currency > Edit
store_currency.zero_decimal_currencybooleanIndicates whether the currency supports decimal places. By default true for the following currencies that don’t support decimal places: BIF, CLP, DJF, GNF, JPY, KMF, KRW, MGA, PYG, RWF, VND, VUV, XAF, XOF, XPF
store_identifierstringThe stores unique identifier in Recharge

Need Help? Contact Us