Building a Pricing Table

The List Products endpoint allows you to dynamically retrieve and display available pricing packages on your site or app. This is ideal for creating a pricing table that reflects the products you've configured in your Fusion dashboard — including product names, prices, and status.

By integrating this flow, you can present users with real-time subscription options and let them select a package before starting the checkout process.

1

Get

Use the List Products endpoint to fetch all available packages

2

Display

Once you’ve fetched the product list from the Fusion API, loop through each active product and display its details on your page. For each product, show the name, description, marketing features and formatted price (e.g., converting cents to dollars). Include a “Choose” or “Subscribe” button that the user can click to start the checkout flow. This creates a simple, user-friendly pricing table that dynamically reflects the available subscription options.

Code Example

The following example demonstrates how to use the Fusion Payments API to display a list of active subscription products. It fetches product data from the List Products endpoint and renders each plan with its name, description, and formatted price. This lightweight, client-side implementation helps you quickly create a dynamic pricing table based on the products you've configured in your Fusion dashboard.

HTML

<body> 
  <h2>Choose a Plan</h2> 
  <div id="plans"></div> 
  <script>
    
    const token = "YOUR_API_KEY";
    
    fetch("/api/products", {
      headers: { X-API-Key: token },
    })
    .then((res) => res.json())
    .then((products) => {
      
       const plans = document.getElementById("plans");
       
       products
        .filter((p) => p.active)
        .forEach((p) => {
          const btn = `<button onclick="checkout('${p.id}')">Choose ${p.name} - {(p.price)}</button>`;
          plans.innerHTML += <p>${p.description}<br>${btn}</p>;
        });
      });

      function checkout(productId) {…}
  </script>
</body>

Sections

Building a Pricing Table

1

Get

2

Display

Code Example

What made this section unhelpful for you?

On this page