> ## Documentation Index
> Fetch the complete documentation index at: https://docs.supercycle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Subscription overview

> Rent one product for a recurring price until the customer sends it back

export const storefrontBlocksScope = () => ({
  RenderReset,
  RenderWindow,
  StorefrontChip,
  StorefrontLine,
  StorefrontMethod,
  StorefrontRentBody,
  StorefrontShell,
  StorefrontSubscribeBody,
  StorefrontSubscriptionScene
});

export const StorefrontResalePdp = () => {
  const {StorefrontChip, StorefrontLine, StorefrontMethod, StorefrontRentBody, StorefrontShell} = storefrontBlocksScope();
  const [method, setMethod] = useState("buy");
  const [cond, setCond] = useState(0);
  const [period, setPeriod] = useState(0);
  const c = SF_RESALE_CONDITIONS[cond];
  const moved = method !== "buy" || cond !== 0 || period !== 0;
  const periods = [{
    days: 4,
    price: 24
  }, {
    days: 7,
    price: 36
  }, {
    days: 14,
    price: 56
  }];
  return <StorefrontShell url="yourstore.com/products/classic-denim-jacket" product="Classic Denim Jacket" from={"Rent from " + sfMoney(56 / 14) + " per day, or buy from " + sfMoney(32)} moved={moved} onReset={() => {
    setMethod("buy");
    setCond(0);
    setPeriod(0);
  }}>
      <StorefrontMethod title="Rent" price={"From " + sfMoney(56 / 14) + " per day"} sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={periods} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
      <StorefrontMethod title="Buy" price={"From " + sfMoney(32)} sub="Own a pre-loved item" selected={method === "buy"} onSelect={() => setMethod("buy")}>
        <div>
          <span className="sc-sf-label">Condition</span>
          <div className="sc-sf-chips">{SF_RESALE_CONDITIONS.map((x, i) => <StorefrontChip key={x.label} label={x.label} sub={sfMoney(x.price) + " · " + x.available + " available"} selected={i === cond} onClick={() => setCond(i)} />)}</div>
        </div>
        <div className="sc-sf-note">Every item is cleaned and checked before it ships. {c.label === "Good" ? "Light signs of wear, no marks or repairs." : "Visible wear or a small repair, described on the item."}</div>
        <div>
          <div className="sc-sf-lines">
            <StorefrontLine label={"Classic Denim Jacket, " + c.label.toLowerCase()} value={sfMoney(c.price)} />
          </div>
          <StorefrontLine label="Total" value={sfMoney(c.price)} total />
        </div>
      </StorefrontMethod>
    </StorefrontShell>;
};

export const StorefrontSubscriptionDisclaimer = () => {
  const {StorefrontSubscriptionScene} = storefrontBlocksScope();
  return <StorefrontSubscriptionScene disclaimer />;
};

export const StorefrontSubscriptionPdp = () => {
  const {StorefrontSubscriptionScene} = storefrontBlocksScope();
  return <StorefrontSubscriptionScene />;
};

export const StorefrontSubscriptionScene = ({disclaimer}) => {
  const {StorefrontMethod, StorefrontRentBody, StorefrontShell, StorefrontSubscribeBody} = storefrontBlocksScope();
  const [term, setTerm] = useState(1);
  const [method, setMethod] = useState("subscribe");
  const [period, setPeriod] = useState(0);
  const moved = term !== 1 || method !== "subscribe" || period !== 0;
  const cheapest = Math.min(...SF_SUB_TERMS.map(x => x.recurring));
  return <StorefrontShell url="yourstore.com/products/horizon-blazer" product="Horizon Blazer" from={"From " + sfMoney(cheapest / 30) + " per day"} moved={moved} onReset={() => {
    setTerm(1);
    setMethod("subscribe");
    setPeriod(0);
  }}>
      <StorefrontMethod title="Subscribe" price={sfMoney(SF_SUB_TERMS[term].recurring / 30) + " / day"} sub="Longer term rental" selected={method === "subscribe"} onSelect={() => setMethod("subscribe")}>
        <StorefrontSubscribeBody terms={SF_SUB_TERMS} term={term} setTerm={setTerm} checkout={20} deposit={100} disclaimer={disclaimer} />
      </StorefrontMethod>
      <StorefrontMethod title="Rent" price="From £7.50 per day" sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={SF_COASTAL_PERIODS} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
    </StorefrontShell>;
};

export const StorefrontSubscribeBody = ({terms, term, setTerm, checkout, deposit, disclaimer}) => {
  const {StorefrontChip, StorefrontLine} = storefrontBlocksScope();
  const t = terms[term];
  return <>
      <div>
        <span className="sc-sf-label">Minimum term</span>
        <div className="sc-sf-chips">{terms.map((x, i) => <StorefrontChip key={x.months} label={x.months + (x.months === 1 ? " month" : " months")} sub={sfMoney(x.recurring) + " monthly"} selected={i === term} onClick={() => setTerm(i)} />)}</div>
      </div>
      <div>
        <span className="sc-sf-label">Start date</span>
        <div className="sc-sf-dates"><div className="sc-sf-date"><small>Start date</small><span style={{
    color: STOREFRONT.subdued
  }}>Add date</span></div></div>
      </div>
      {disclaimer && <div className="sc-sf-note"><strong>Delivery:</strong> our team confirms your delivery date once your order is approved. We do our best to meet your requested start date.</div>}
      <div>
        <div className="sc-sf-lines">
          <StorefrontLine label="Recurring payment" value={sfMoney(t.recurring) + " monthly"} />
          <StorefrontLine label="Minimum term" value={t.months + (t.months === 1 ? " month" : " months")} />
          <StorefrontLine label="Refundable deposit" value={sfMoney(deposit)} />
        </div>
        <StorefrontLine label="First payment" value={sfMoney(checkout + deposit)} total />
      </div>
    </>;
};

export const StorefrontFixedFeeSummary = () => {
  const {StorefrontMethod, StorefrontRentBody, StorefrontShell} = storefrontBlocksScope();
  const [period, setPeriod] = useState(0);
  const [method, setMethod] = useState("rent");
  const moved = period !== 0 || method !== "rent";
  return <StorefrontShell url="yourstore.com/products/coastal-breeze-top" product="Coastal Breeze Top" from={"From " + sfMoney(SF_COASTAL_PERIODS[2].price / 14) + " per day"} moved={moved} onReset={() => {
    setPeriod(0);
    setMethod("rent");
  }}>
      <StorefrontMethod title="Rent" price={"From " + sfMoney(SF_COASTAL_PERIODS[2].price / 14) + " per day"} sub="Yours for 4 to 14 days" selected={method === "rent"} onSelect={() => setMethod("rent")}>
        <StorefrontRentBody periods={SF_COASTAL_PERIODS} fees={SF_COASTAL_FEES} period={period} setPeriod={setPeriod} start={SF_START} />
      </StorefrontMethod>
      <StorefrontMethod title="Membership" price="From £20.00 / month" sub="Rent for free with a membership" selected={method === "membership"} onSelect={() => setMethod("membership")}>
        <div className="sc-sf-note">Members rent this item for 1 credit. Join a plan from £20.00 a month, or log in to use your credits.</div>
      </StorefrontMethod>
    </StorefrontShell>;
};

export const SF_START = new Date(2026, 4, 12);

export const SF_RESALE_CONDITIONS = [{
  label: "Good",
  price: 45,
  available: 2
}, {
  label: "Fair",
  price: 32,
  available: 1
}];

export const SF_SUB_TERMS = [{
  months: 1,
  recurring: 12
}, {
  months: 3,
  recurring: 10
}, {
  months: 6,
  recurring: 9
}];

export const SF_COASTAL_FEES = [{
  title: "Cleaning fee",
  price: 20
}, {
  title: "Insurance",
  price: 12
}];

export const SF_COASTAL_PERIODS = [{
  days: 4,
  price: 30
}, {
  days: 7,
  price: 45
}, {
  days: 14,
  price: 70
}];

export const StorefrontRentBody = ({periods, fees = [], period, setPeriod, start}) => {
  const {StorefrontChip, StorefrontLine} = storefrontBlocksScope();
  const p = periods[period];
  const end = new Date(start);
  end.setDate(start.getDate() + p.days);
  const feeTotal = fees.reduce((s, f) => s + f.price, 0);
  return <>
      <div>
        <span className="sc-sf-label">Rental period</span>
        <div className="sc-sf-chips">{periods.map((x, i) => <StorefrontChip key={x.days} label={x.days + " days"} sub={sfMoney(x.price)} selected={i === period} onClick={() => setPeriod(i)} />)}</div>
      </div>
      <div className="sc-sf-dates">
        <div className="sc-sf-date"><small>Arrive by</small><span>{sfDate(start)}</span></div>
        <div className="sc-sf-date"><small>Return by</small><span>{sfDate(end)}</span></div>
      </div>
      <div>
        <div className="sc-sf-lines">
          <StorefrontLine label={sfMoney(p.price / p.days) + "/day x " + p.days + " days"} value={sfMoney(p.price)} />
          {fees.map(f => <StorefrontLine key={f.title} label={f.title} value={sfMoney(f.price)} />)}
        </div>
        <StorefrontLine label="Total" value={sfMoney(p.price + feeTotal)} total />
      </div>
    </>;
};

export const sfDate = d => d.getDate() + " " + d.toLocaleString("en", {
  month: "short"
}) + " " + String(d.getFullYear()).slice(2);

export const StorefrontLine = ({label, value, total}) => <div className={"sc-sf-line" + (total ? " sc-sf-total" : "")}><span>{label}</span><span>{value}</span></div>;

export const StorefrontChip = ({label, sub, selected, onClick}) => <button type="button" className={"sc-sf-chip" + (selected ? " on" : "")} aria-pressed={selected} onClick={onClick}>
    <span>{label}</span>
    {sub && <small>{sub}</small>}
  </button>;

export const StorefrontMethod = ({title, price, sub, selected, onSelect, children}) => <div className={"sc-sf-method" + (selected ? " on" : "")}>
    <button type="button" className={"sc-sf-method-head" + (!selected && onSelect ? " scr-pressable" : "")} aria-pressed={selected} onClick={onSelect}>
      <span className="sc-sf-radio" />
      <span className="sc-sf-method-text">
        <span className="sc-sf-method-row"><span>{title}</span><span>{price}</span></span>
        {sub && <span className="sc-sf-method-sub">{sub}</span>}
      </span>
    </button>
    {selected && children && <div className="sc-sf-method-body">{children}</div>}
  </div>;

export const StorefrontShell = ({url, product, from, desc, moved, onReset, children}) => {
  const {RenderReset, RenderWindow} = storefrontBlocksScope();
  return <RenderWindow label={"Example " + product + " product page"} url={url} designWidth={900} gutter={30} background="#ffffff" actions={moved && <RenderReset onClick={onReset} />}>
      <div className="sc-sf">
        <style>{STOREFRONT_CSS}</style>
        <div className="sc-sf-store" aria-hidden="true">
          <span className="sc-sf-store-nav"><span>Methods</span><span>Collections</span><span>Plans</span></span>
          <span className="sc-sf-store-name">Summit store</span>
          <span className="sc-sf-store-icons">
            <svg viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.4" /><path d="M10.5 10.5L14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></svg>
            <span className="sc-sf-avatar">L</span>
            <svg viewBox="0 0 16 16" fill="none"><path d="M3 5.5h10l-.8 8H3.8L3 5.5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" /><path d="M5.5 5.5V4.5a2.5 2.5 0 015 0v1" stroke="currentColor" strokeWidth="1.4" /></svg>
          </span>
        </div>
        <div className="sc-sf-body">
          <div aria-hidden="true">
            <div className="sc-sf-placeholder">
              <svg viewBox="0 0 48 48" fill="none"><rect x="6" y="10" width="36" height="28" rx="3" stroke="currentColor" strokeWidth="2" /><circle cx="17" cy="20" r="3.5" stroke="currentColor" strokeWidth="2" /><path d="M8 34l10-9 7 6 6-5 9 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </div>
          </div>
          <div className="sc-sf-panel">
            <div><div className="sc-sf-title">{product}</div><div className="sc-sf-from">{from}</div></div>
            <div className="sc-sf-methods">{children}</div>
            <button type="button" className="sc-sf-cta">Add to cart</button>
            {desc && <div className="sc-sf-desc" aria-hidden="true">{desc}</div>}
          </div>
        </div>
      </div>
    </RenderWindow>;
};

export const sfMoney = n => "£" + Number(n).toFixed(2);

export const STOREFRONT_CSS = `
  .sc-sf { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.35; color: #000000; }
  .sc-sf button { font: inherit; margin: 0; appearance: none; text-align: left; color: inherit; }
  .sc-sf button:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .sc-sf-store { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 0; font-size: 14px; }
  .sc-sf-store-name { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-size: 20px; letter-spacing: -0.01em; color: #202603; }
  .sc-sf-store-nav { display: flex; gap: 16px; color: #333; }
  .sc-sf-store-icons { display: flex; justify-content: flex-end; align-items: center; gap: 16px; color: #333; }
  .sc-sf-store-icons svg { width: 18px; height: 18px; }
  .sc-sf-avatar { width: 20px; height: 20px; border-radius: 50%; background: #2f6bff; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
  .sc-sf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; padding: 8px 0 32px; }
  .sc-sf-placeholder { aspect-ratio: 4 / 5; border-radius: 4px; background: #f3f2ee; color: #c9c5bc; display: grid; place-items: center; }
  .sc-sf-placeholder svg { width: 56px; height: 56px; }
  .sc-sf-panel { display: grid; gap: 16px; }
  .sc-sf-title { font-size: 22px; font-weight: 550; line-height: 1.2; }
  .sc-sf-from { font-size: 14px; color: #656565; margin-top: 4px; }
  .sc-sf-methods { display: grid; gap: 10px; }
  .sc-sf-method { border: 1px solid #cccccc; border-radius: 8px; background: #fff; }
  .sc-sf-method.on { border-color: #000000; outline: 1px solid #000000; }
  .sc-sf-method-head { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 14px; background: transparent; border: 0; cursor: pointer; }
  .sc-sf-radio { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1px #cccccc; }
  .sc-sf-method.on .sc-sf-radio { box-shadow: inset 0 0 0 1px #000000; }
  .sc-sf-method.on .sc-sf-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #000000; }
  .sc-sf-method-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .sc-sf-method-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
  .sc-sf-method-sub { font-size: 12px; color: #656565; text-align: right; }
  .sc-sf-method-body { border-top: 1px solid #cccccc; margin: 0 14px; padding: 14px 0; display: grid; gap: 14px; }
  .sc-sf-label { display: block; font-size: 13px; color: #656565; margin-bottom: 6px; }
  .sc-sf-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sc-sf-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 8px; border: 1px solid #cccccc; border-radius: 8px; background: #fff; cursor: pointer; text-align: center; font-size: 14px; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
  .sc-sf-chip small { font-size: 12px; color: #656565; }
  .sc-sf-chip.on { background: #000000; border-color: #000000; color: #fff; }
  .sc-sf-chip.on small { color: #fff; }
  .sc-sf-dates { border: 1px solid #cccccc; border-radius: 8px; display: flex; overflow: hidden; }
  .sc-sf-date { flex: 1; padding: 8px 10px; display: grid; gap: 4px; }
  .sc-sf-date + .sc-sf-date { border-left: 1px solid #cccccc; }
  .sc-sf-date small { font-size: 11px; }
  .sc-sf-note { font-size: 13px; line-height: 1.45; }
  .sc-sf-lines { border-top: 1px solid #cccccc; padding-top: 8px; display: grid; gap: 6px; font-size: 14px; }
  .sc-sf-line { display: flex; justify-content: space-between; gap: 8px; }
  .sc-sf-total { border-top: 1px solid #cccccc; margin-top: 6px; padding-top: 8px; font-weight: 550; }
  .sc-sf .sc-sf-cta { background: #1a1a1a; color: #fff; border: 0; border-radius: 8px; text-align: center; font-size: 15px; font-weight: 550; padding: 14px 0; width: 100%; }
  .sc-sf-desc { display: grid; gap: 12px; font-size: 14px; line-height: 1.5; color: #333; padding-top: 16px; border-top: 1px solid #ebebeb; }
  .sc-sf-desc h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #000; }
  .sc-sf-desc p { margin: 0; }
`;

export const STOREFRONT = {
  border: "#cccccc",
  text: "#000000",
  subdued: "#656565",
  accent: "#000000",
  radius: 8,
  font: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
};

export const renderKitScope = () => ({
  RenderStyles
});

export const RENDER_CSS = `
  .scr { width: 100%; min-width: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  .scr button { margin: 0; appearance: none; text-align: center; }
  .scr button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }

  /* Browser window: neutral traffic dots, centered URL, the docs' layered shadow. */
  .scr-window { position: relative; width: 100%; margin: 0 auto; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; touch-action: pan-y;
    box-shadow: 0 0 0 1px rgba(11,13,24,.06), 0 1px 2px rgba(11,13,24,.024), 0 3px 6px rgba(11,13,24,.03), 0 8px 14px rgba(11,13,24,.035), 0 16px 28px rgba(11,13,24,.04); }
  .scr-titlebar { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid #ebebeb; background: #fff; }
  .scr-dot { width: 9px; height: 9px; border-radius: 50%; background: #e3e3e3; }
  .scr-url { margin: 0 auto; min-width: 0; max-width: calc(100% - 48px); font-size: 11px; color: #85817a; background: #f3f2ee; border-radius: 6px; padding: 3px 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scr-page { position: relative; overflow: hidden; }
  /* container-name: scr is what polaris-css.jsx's @container queries measure,
     so a phone viewport cannot switch the page to a mobile layout. */
  .scr-zoom { margin: 0 auto; box-sizing: border-box; container-type: inline-size; container-name: scr; }

  /* Reset: quiet text control in the chrome, shown once a render has moved on from its resting state. */
  .scr-reset { font-size: 11px; color: #85817a; background: none; border: 0; cursor: pointer; padding: 2px 4px; font-family: inherit; }
  .scr-reset:hover { color: #1a1a1a; }

  /* Tablet: iPad in landscape, near-black bezel, camera on the left edge, iPadOS status bar. */
  .scr-tablet { position: relative; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 12px 12px 12px 20px; background: #1c1c1e; border-radius: 24px; touch-action: pan-y;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 28px rgba(11,13,24,.18); }
  .scr-camera { position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #3a3a3c; box-shadow: inset 0 0 0 1px #111; }
  .scr-screen { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
  .scr-tablet .scr-reset { position: absolute; right: 16px; top: 14px; z-index: 7; color: rgba(255,255,255,.55); }
  .scr-tablet .scr-reset:hover { color: #fff; }

  /* Main buttons the reader can press ripple softly so it's clear what responds. Plain text
     links and decorative controls don't. Paused on hover, off under reduced motion. */
  .scr-pressable { position: relative; }
  .scr-pressable::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: scr-ripple 2.4s ease-out infinite; }
  @keyframes scr-ripple {
    0% { box-shadow: 0 0 0 0 var(--scr-ripple, rgba(0, 113, 227, .45)); }
    60% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
  .scr-pressable:hover::after { animation: none; }
  @media (prefers-reduced-motion: reduce) { .scr-pressable::after { animation: none; } }
`;

export const useRenderZoom = (ref, designWidth) => {
  const [zoom, setZoom] = useState(0.6);
  useEffect(() => {
    const el = ref.current;
    if (!el || typeof ResizeObserver === "undefined") return undefined;
    const fit = () => setZoom(Math.max(0.2, Math.min(1, el.clientWidth / designWidth)));
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(el);
    return () => ro.disconnect();
  }, [designWidth]);
  return zoom;
};

export const RenderReset = ({onClick, className}) => <button type="button" className={"scr-reset" + (className ? " " + className : "")} onClick={onClick}>
    Reset
  </button>;

export const RenderStyles = () => <style>{RENDER_CSS}</style>;

export const RenderWindow = ({url, label, designWidth = 1168, gutter = 40, background = "#ffffff", actions, overlay, children}) => {
  const {RenderStyles} = renderKitScope();
  const ref = useRef(null);
  const total = designWidth + gutter * 2;
  const zoom = useRenderZoom(ref, total);
  const body = typeof children === "function" ? children({
    zoom
  }) : children;
  return <div className="not-prose scr" aria-label={label}>
      <RenderStyles />
      <div className="scr-window" ref={ref}>
        <div className="scr-titlebar">
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-dot" />
          <span className="scr-url">{url}</span>
          {actions}
        </div>
        <div className="scr-page" style={{
    background
  }}>
          <div className="scr-zoom" style={{
    zoom,
    width: total,
    padding: "0 " + gutter + "px"
  }}>
            {body}
          </div>
          {typeof overlay === "function" ? overlay({
    zoom
  }) : overlay}
        </div>
      </div>
    </div>;
};

Subscription rental is a rolling rental: the customer pays a recurring price for one product and keeps it until they return it. It suits high-value products like phones, appliances, and furniture, especially where customers upgrade regularly.

<Frame type="glass" caption="Pick a minimum term and the recurring price and first payment follow.">
  <StorefrontSubscriptionPdp />
</Frame>

***

## How it works

The customer picks a pricing group, which sets the recurring price and a **Minimum term**, and pays the checkout price at checkout. From the rental start, their card is charged the recurring price on every billing interval until the item comes back.

The minimum term is the customer's commitment. They can't start a return from customer accounts before it's up, but you can end the rental early for them from the admin. A deposit can be attached to a pricing group and stays linked to the subscription for its whole life.

You choose when billing starts, when it stops, and the default billing interval in the [subscription settings](/documentation/methods/subscription/subscription-settings). Each pricing group can use its own interval.

***

## Configurations

<CardGroup cols={2}>
  <Card title="Importing products" icon="file-import" href="/documentation/setup/importing-products">
    Import products from Shopify and create Supercycle inventory.
  </Card>

  <Card title="Subscription settings" icon="timeline-arrow" href="/documentation/methods/subscription/subscription-settings">
    Set when billing starts and stops and the default billing interval.
  </Card>

  <Card title="Deposits" icon="money-simple-from-bracket" href="/documentation/configuration/risk/deposits">
    Create deposit amounts to attach to pricing groups.
  </Card>

  <Card title="Product setup" icon="sliders-simple" href="/documentation/methods/subscription/product-setup">
    Turn on subscription rental for a product and create its pricing groups.
  </Card>

  <Card title="Add a disclaimer" icon="message-lines" href="/documentation/methods/subscription/add-a-disclaimer">
    Show a delivery note under the start date field.
  </Card>

  <Card title="Migrate subscriptions" icon="arrow-right-arrow-left" href="/documentation/methods/subscription/migration">
    Move existing subscriptions into Supercycle without interrupting billing.
  </Card>
</CardGroup>