Subscription upgrade block

The Subscription upgrade block is a sub-block that nests inside Cart items. It prompts shoppers to switch an eligible one-time line item to a subscription right from the cart, turning a one-time purchase into recurring revenue at the point of decision, and lets shoppers who are already subscribed change or cancel their plan on that line.

​

Behavior

• Only appears on eligible lines. The block reads the product’s selling plans and renders nothing on a line whose product has no subscription plans.
• Never offered on reward gifts. Subscribing to an auto-granted free gift would strip its reward status, so the prompt is suppressed on those lines.
• On a one-time line, it shows the upgrade call-to-action.
• On an already-subscribed line, it shows a plan selector plus the “downgrade to one-time” option.

​

Settings

​

Placement and limits

• Parent: nests inside Cart items only.
• Maximum: 1 per cart.
• Not added by default. Not locked, so you can remove or hide it.

​

Custom template

function CustomTemplate(props) {
  const { view } = props;

  if (view.state === 'upgrade') {
    return (
      <button type="button" onClick={() => props.selectPlan(view.planId)} disabled={props.busy}>
        {view.buttonText}
      </button>
    );
  }

  return (
    <div>
      <select
        aria-label={`Subscription plan — ${props.title}`}
        value={String(view.activePlanId)}
        onChange={props.onChange}
        disabled={props.busy}
      >
        {view.plans.map((plan) => (
          <option key={plan.id} value={String(plan.id)}>
            {plan.name}{plan.discountPercent > 0 ? ` (${plan.discountPercent}% off)` : ''}
          </option>
        ))}
        <option value={props.oneTimeValue}>{props.unsubscribeText}</option>
      </select>
    </div>
  );
}

​

Design