How to Embed the CarePortals Cart

CarePortals is built with an e-commerce-first mindset, designed to help digital health brands offer a seamless shopping experience that feels modern, fast, and intuitive. Adding a cart to your site makes it easy for patients to browse multiple products, build their order, and check out with confidence.

The CarePortals cart appears as a floating cart icon (typically in your site’s header) and connects directly to your branded patient portal. It automatically matches your portal’s theme, integrates with CarePortals Checkout and payment platforms like Stripe and NMI.

Beyond convenience, the cart also supports cross-selling and upselling opportunities. Whether you want to suggest complementary products or promote subscription upgrades, the cart makes it easy to boost average order value and deliver a more personalized care journey.

Before You Begin

Please have the following information handy to replace the placeholders in the Cart code snippets:

  • organization_id - Your CarePortals organization ID.

  • productId - The unique ID of the product (e.g, 67bca5e6f670a8734cfdf96f). You can find this in CRM > Store Manager > Products.

Step 1: Initialize the Cart

Add the following global script to your website’s header or whenever you’d like to add the cart to. This script initializes the cart for your organization:

<script> window.organization = 'organization_id'; </script> <script src="<https://cart.portals.care/prod/scripts.js>"></script>

Pro Tip: By default, the cart generates the checkout URL based on your configured Patient Portal URL. If you’re building a custom checkout experience using CarePortals API, you can override this by adding a custom redirect URL to the initialize script above:

window.carePortalsCheckoutUrl = 'https://'yourdomain.com'/checkout/?cart=:cartId'

Where :cartId will be substituted with the actual cart ID at runtime.

Step 2: Embed the Cart

To embed the cart within your page, include the following div element where you want the cart to appear. This div will act as the container for the cart interface.

<div id="portals-cart-app"></div>

Step 3: Configure Add to Cart Buttons

To enable the "Add to Cart" functionality on your site, configure each product button with the correct class and product ID attributes. This ensures CarePortals can identify the product and add it to the cart successfully.

  1. Use the class add-to-cart-btn product-item for the button. This allows the platform’s scripts to detect and bind the click behavior.

  2. Add the attribute **data-product_id="**productId**"**, where productId is the unique ID of the product in CarePortals (e.g, 67172a5990f2edc0100af20b). You can find this in CRM > Store Manager > Products.

Tip: This works for both one-time and subscription products. The correct cart behavior will be triggered based on how the product is configured in the Store Manager.

Here’s an example of a correctly configured "Add to Cart" button:

<button class="add-to-cart-btn product-item" data-product_id="67172a5990f2edc0100af20b"> Add to cart </button>

Example Integration

Here’s a complete example of how your code might look:

Example
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CarePortals Cart Integration</title>

  <!-- Set your organization ID -->
  <script>
    window.organization = 'organization_id';
  </script>

  <!-- Load CarePortals Cart App -->
  <script src="https://cart.portals.care/prod/scripts.js" defer></script>
</head>
<body>
  <!-- Cart Container (floating icon will appear automatically) -->
  <div id="portals-cart-app"></div>

  <!-- Example Product Buttons -->
 <button class="add-to-cart-btn product-item" data-product_id="67172a5990f2edc0100af20b"> Add to cart </button>
  <button class="add-to-cart-btn product-item" data-product_id="d92b8c3a230c78f0123de45a"> Add to cart </button>
</body>
</html>

Related Articles

Want to learn more? Check out these related articles for deeper setup tips and advanced customizations.