NACELLE DOCS

You are viewing the v1 Nacelle Docs for existing merchants.New merchants can find the V2 docs here: nacelle.com/docs.

# Recharge Setup

To fully integrate Recharge and Nacelle, please follow the steps below. You can use our Nuxt module (opens new window) to add Recharge components to your Nacelle storefront.

# Shopify Setup

The Recharge app must be installed and setup on Shopify. This includes setting up a payment provider and initial subscription ruleset.

# Checkout Setup

To enable Recharge Checkout we need API access (opens new window). To enable this on your account you will need to reach out to Recharge support (opens new window).

Once an API access has been granted, create a token scope with Read and Write access for checkout.

In the Nacelle Dashboard, go to your space's Settings Tab. In Checkout Settings, click the "Do you offer subscriptions?" and "Use Recharge?" checkboxes. Next, paste the Recharge API endpoint and token into the alternative checkout fields. Now hit the "Save Updates" button at the bottom.

# Avalara

If you are are using the Avalara (opens new window) integration with Recharge, their support (opens new window) team must enable a beta flag for the account.

# Metafields

Recharge sets important product metafields that we need to expose to Nacelle. We can do this with a simple graphql query using Shopify's GraphQL Admin API (opens new window)

mutation metafieldStorefrontVisibilityCreate(
  $input: MetafieldStorefrontVisibilityInput!
) {
  metafieldStorefrontVisibilityCreate(input: $input) {
    metafieldStorefrontVisibility {
      id
    }
    userErrors {
      field
      message
    }
  }
}

We'll then need to set the Query Variable for this call.

{
  "input": {
    "namespace": "subscriptions",
    "key": "subscription_id",
    "ownerType": "PRODUCT"
  }
}

We want to run this with the same namespace and ownerType, but for a few different keys, so a call will need to be run for each one of these keys:

subscription_id
shipping_interval_unit_type
shipping_interval_frequency
original_to_hidden_variant_map
is_subscription_only
discount_product_id
discount_percentage

# Add Module to Nacelle

Once you have Nacelle and Recharge set up, you can install this module in your project from npm:

npm install @nacelle/nacelle-recharge-nuxt-module --save

After the package has installed, open nuxt.config.js. Under modules add @nacelle/nacelle-recharge-nuxt-module to the array. It should look something like this:

modules: [
  // ...other modules
  //
  '@nacelle/nacelle-recharge-nuxt-module'
],

# Add the components to your Nacelle Site

There are three components you can add to your Nacelle site: <recharge-widget />, <subscription-add-to-cart-button />, and <subscription-cart-line-item-details />.

Recharge Widget will display a radio selector for customer to choose between one time and subscription purchases as well as a drop down to select frequencies (This is set in a product's ruleset in Recharge admin). Add this component to pages/products/_handle.vue or anywhere you use products and pass the product object as a prop.

<recharge-widget
  v-if="isSubscription"
  :product="product"
  :variant="currentVariant"
  :metafields.sync="metafields"
  :frequency.sync="frequency"
/>

Subscription Add To Cart Button will display an add to cart button for handling subscribe and save functionality. Add this component to pages/products/_handle.vue or anywhere you use products and pass the product object as a prop.

<subscription-add-to-cart-button
  :product="product"
  :variant="selectedVariant"
  :metafields="metafields"
  :all-options-selected="allOptionsSelected"
  :only-one-option="allOptions.length === 1"
/>

Subscription Cart Line Item Details a slotted component to give access to subscription properties to display on cart line items. Add this component to components/CartItem.vue or anywhere you need to display cart line items. Pass line-item as prop. Supported Subscription Properties:

;[
  'charge_interval_frequency',
  'order_interval_frequency',
  'order_interval_unit',
  'cutoff_day_of_month',
  'cutoff_day_of_week',
  'expire_after_specific_number_of_charges',
  'order_day_of_month',
  'order_day_of_week',
]

Two helper properties are included: frequency and unit (unit is automatically pluralized based on frequency).

<subscription-cart-line-item-details :line-item="item">
  <template v-slot:default="{ subscription }">
    Your recurring order will be shipped every
    <strong>{{ subscription.frequency }} {{ subscription.unit }}</strong>
    Easily modify or cancel your subscription up to 3 days before your ship
    date.
  </template>
</subscription-cart-line-item-details>

# (Optional) Customize ReCharge Checkout URL

First follow the steps outlined by ReCharge to customize your Checkout URL: https://support.rechargepayments.com/hc/en-us/articles/360008682954-Customizing-the-Recharge-checkout (opens new window)

Then in your project add the following environment variable:

CUSTOM_RECHARGE_DOMAIN="checkout.{storename}.com"

In order to access this variable in the rest of your project you also need to add it to the env object in the nuxt.config.js file

env: {
  ...
  CUSTOM_RECHARGE_DOMAIN: process.env.CUSTOM_RECHARGE_DOMAIN
},

Finally within the checkoutRedirect method in the checkout.js file, modify the url to reflect your custom ReCharge URL:

checkoutRedirect({ state }) {
  if (process.client) {
    const parsedUrl = new URL(state.url)
    if (parsedUrl.host === 'rechargeapps.com') {
      parsedUrl.host = process.env.CUSTOM_RECHARGE_DOMAIN
    }
    const url = parsedUrl.toString()
    window.location = url
  }
}

← Refersion Setup →