Subscription and Billing Screen

Subscription management screen for mobile apps with current plan card, usage bars, plan switcher with proration, payment method update and an invoice list.

Also known as: manage subscription page, billing settings ui, change plan screen, saas billing page mobile, invoice history ui

Bootstrap 6 Mobile Settings Responsive #app #billing #mobile #responsive #settings #subscription

Subscription and Billing Screen live demo

Open in new tab

Bootstrap 6 code (HTML, CSS, JS)

Beautify

A subscription and billing screen built with Bootstrap 6: an HTML mobile template with a current plan card, usage bars, a monthly/yearly plan switcher with a proration summary, the saved payment method with an update form, an invoice list and a cancel flow. Use this manage subscription page and billing settings UI in SaaS, storage and productivity apps, as a PWA or packaged with Capacitor.

How it works

The root .sbb-app is a 430 px app column with a sticky top bar (.sbb-bar) and a bottom tab bar (.sbb-tabs).

Plan card: .sbb-plan shows the plan, price and the renewal date. RENEW_IN_DAYS in script.js sets the date relative to today, so it never goes stale.
Usage: .progress bars; .is-high turns one orange.
Plan switcher: a Bootstrap 6 toggle btn-group (label.btn-check with the radio inside) picks monthly or yearly, and .sbb-option rows use the .radio input. refreshPlans() swaps prices between data-month and data-year and enables .sbb-change only when the choice differs from the current plan.
Change sheet: a Bootstrap 6 Drawer (#sbb-change-sheet) shows the new price, a credit for the unused days and the amount due today. Confirming updates the plan card and badge.
Payment method: "Update" opens #sbb-card-sheet with cc-name, cc-number, cc-exp and cc-csc fields. The number is checked with the Luhn algorithm and the expiry must be in the future; focus moves to the first error.
Invoices: .sbb-invoice rows are built from data-months, one per month before the renewal date.
Cancel: .sbb-cancel opens #sbb-cancel-sheet; confirming marks the plan as ending and turns the link into "Resume subscription".

Customization

--sbb-violet on .sbb-app: the primary color for buttons, selected plans and progress bars (with --bs-primary-bg).
data-month and data-year on each name="sbb-plan" radio: the plan prices.
RENEW_IN_DAYS in script.js: days until renewal, which also drives the credit in the change sheet.
Change .sbb-w-68 and .sbb-w-82 (and aria-valuenow) to show real usage.
Replace the demo code in the .sbb-confirm and card form handlers with calls to your billing provider's SDK.

Use cases

SaaS and productivity apps: plan, usage limits and invoices in one account screen.
Cloud storage apps: storage meter with an upgrade path.
Streaming and membership apps: switch between monthly and yearly billing.

Accessibility

Plans and billing periods are native radio buttons, so arrow keys move between them. Card fields use the right autocomplete and inputmode values, and invalid fields get aria-invalid with messages linked through aria-describedby. Sheets are native modal <dialog> elements that close with Escape or the backdrop, and focus moves to the first useful control. Touch targets are at least 44 px.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Sheets use the new Drawer instead of Offcanvas, the period toggle uses label.btn-check btn-outline theme-primary with the input inside, plans use .radio instead of form-check-input, badges use badge-subtle theme-*, and fields use .form-field.

Subscription and Billing Screen at a glance

Framework: Bootstrap 6
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Bootstrap 6, Bootstrap Icons, fonts.googleapis.com
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Settings
License: Free for personal and commercial use

Questions about this template

Can I use the Subscription and Billing Screen code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 6 and Bootstrap Icons and fonts.googleapis.com from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">

Built for Bootstrap 6.0.0-alpha.1. Bootstrap 6 ships as an ES module, so its script and this component's JavaScript load with type="module". Alpha releases can still change before the stable version.