Understanding common front-end functionality

Understand the common frontend functionality, and what to expect from each page on the frontend.

There are key points in the customer journey, where specific information is displayed on the front-end. When building a custom solution, it's important to understand these pages and the data displayed there.

πŸ“˜

Platform

  • Custom

Common frontend functionality

TypeFront-end pageData displayed Functionality
ProductProduct pagePurchase option selector (Subscribe and one-time, subscription only, or prepaid)
Subscription frequency
Subscription discount
Add to cart functionality for the subscription
CartCart pop-up after the customer adds a product to the cartSubscription frequency
Product subscription with the discounted price listed (if applicable)
Cart subtotal with discounted prices (if applicable)
Subscription checkout button
CartCart previewProduct subscription discounted price a subscribe and save discount is presentSubscription checkout button
CartView cart summarySubscription frequency by product (This is only shown if a discount is not applied. If a discount is applied, the Subscribe and Save option is visible)
Price: The product subscription price (with the discount listed if applicable)
Estimated total: The product line items total (with discounts accounted for if applicable)
Subtotal: The cart subtotal (with discounts accounted for if applicable)
Estimated grand total: The total including tax (which is hidden from the cart summary), including subscribe and save discounts
Subscription checkout button
CheckoutSubscription checkout buttonProduct
Order quantity
Option to checkout or view cart
If subscription items are preset, customers are redirected to the Recharge Checkout
Call your platform's API endpoint to retrieve the contents of the cart
Call local storage for subscription information before posting the combined cart data to Recharge
Customer portalAccount - Manage subscriptionsList of active subscriptions and subscription details
Customer account information including shipping address, and contact information
Link to Recharge-hosted cutomer portal if the customer has subscriptions

Need Help? Contact Us