@tradepoints/rewards

A lightweight, responsive rewards marketplace Web Component powered by TradePoints.

Display available rewards, browse reward categories, and showcase reward redemption options on your website using a framework-independent custom element.

Features

• Native Web Component (<tradepoints-rewards>)
• Works with vanilla JavaScript, React, Angular, Vue, WordPress, and other frameworks
• Featured rewards and category filtering
• Responsive reward cards with points pricing
• Customizable Redeem button destination
• Support for relative and absolute redemption links
• Option to hide Redeem buttons
• Option to hide the Browse All Rewards button
• Light, dark, and automatic system themes
• Country-based reward filtering
• Configurable result limit and sorting
• Shadow DOM styling to minimize conflicts with host websites
• No framework dependency required

Installation

Install the package using npm:

npm install @tradepoints/rewards

Quick Start

Import the package once in your browser application's entry point:

import "@tradepoints/rewards";

Then place the custom element in your page:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  theme="auto"
  limit="10"
  sort-by="name"
  sort-order="ASC"
></tradepoints-rewards>

The package automatically registers the tradepoints-rewards custom element when imported in a browser environment.

Configuration

The component supports the following HTML attributes:

| Attribute | Values | Default | Description | | ----------------- | ------------------------------------------------- | ------------ | ------------------------------------------ | | environment | production, development | production | TradePoints API environment. | | location-code | ISO 3166-1 alpha-2 country code (e.g. AU, US) | Not set | Filters rewards and categories by country. | | theme | auto, light, dark | auto | Controls the marketplace theme. | | limit | Integer from 1 to 100 | 10 | Maximum number of rewards requested. | | sort-by | name, pointsCost | name | Reward sorting field. | | sort-order | ASC, DESC | ASC | Sort direction. | | redeem-link | Relative or absolute URL | Not set | Custom destination for Redeem buttons. | | hide-redeem | Boolean HTML attribute | Disabled | Hides all Redeem buttons. | | hide-browse-all | Boolean HTML attribute | Disabled | Hides the Browse All Rewards button. |

When no category is selected, the component requests featured rewards.

Selecting a category loads rewards for that category.

Boolean Attributes

hide-redeem and hide-browse-all are boolean HTML attributes.

Adding the attribute enables the corresponding behavior:

<tradepoints-rewards hide-redeem hide-browse-all></tradepoints-rewards>

Removing the attribute disables it.

Important: Do not use hide-redeem="false" or hide-browse-all="false" to show the buttons. In HTML, boolean attributes are enabled whenever they are present, regardless of their value.

Redeem Button Configuration

By default, the Redeem button redirects users to the TradePoints rewards marketplace.

You can override this behavior using the redeem-link attribute.

Default Redeem Behavior

When redeem-link is not provided:

<tradepoints-rewards
  environment="production"
  location-code="AU"
></tradepoints-rewards>

Clicking Redeem opens the TradePoints rewards page in a new browser tab.

The reward name is automatically appended as a query parameter.

Example:

https://tradepoints.one/rewards?name=Amazon%20Gift%20Card

Custom Redeem Link

Use redeem-link to specify a custom destination.

<tradepoints-rewards
  environment="production"
  location-code="AU"
  redeem-link="/signup"
></tradepoints-rewards>

Clicking Redeem redirects the visitor to:

/signup

The custom destination opens in the same browser tab.

The reward name is not appended to custom links.

Supported Redeem Link Examples

Redirect to a signup page:

<tradepoints-rewards redeem-link="/signup"></tradepoints-rewards>

Redirect to a login page:

<tradepoints-rewards redeem-link="/login"></tradepoints-rewards>

Redirect to a section on the homepage:

<tradepoints-rewards redeem-link="/#welcome"></tradepoints-rewards>

Redirect to an external website:

<tradepoints-rewards
  redeem-link="https://example.com/register"
></tradepoints-rewards>

Relative links are resolved against the website hosting the component.

For example, if the component is embedded on:

https://partner.com/rewards

And configured with:

redeem-link="/signup"

The visitor will be redirected to:

https://partner.com/signup

Redeem Link Behavior Summary

| Configuration | Destination | Browser Tab | | -------------------------------------------- | ----------------------------------------- | ----------- | | No redeem-link | TradePoints rewards page with reward name | New tab | | redeem-link="/signup" | Website signup page | Same tab | | redeem-link="/login" | Website login page | Same tab | | redeem-link="/#welcome" | Homepage welcome section | Same tab | | redeem-link="https://example.com/register" | External registration page | Same tab |

Hide Redeem Buttons

Use hide-redeem to hide Redeem buttons on all reward cards.

<tradepoints-rewards
  environment="production"
  location-code="AU"
  hide-redeem
></tradepoints-rewards>

The reward cards will continue displaying:

• Reward images
• Reward names
• Points pricing

Only the Redeem buttons are hidden.

This option is useful when displaying rewards as a preview or catalogue without allowing visitors to navigate to a redemption page.

Hide Browse All Rewards Button

By default, the component displays a Browse All Rewards button beneath the rewards grid.

The button links to:

https://tradepoints.one/rewards

It opens in a new browser tab.

To hide this button, add hide-browse-all:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  hide-browse-all
></tradepoints-rewards>

The rewards grid and category navigation remain available.

Combined Configuration Example

The following example uses a custom signup link and hides the Browse All Rewards button:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  theme="dark"
  limit="10"
  sort-by="name"
  sort-order="ASC"
  redeem-link="/signup"
  hide-browse-all
></tradepoints-rewards>

Visitors can browse rewards and categories.

Clicking Redeem redirects them to /signup in the same browser tab.

Catalogue-Only Example

To display rewards without Redeem or Browse All Rewards buttons:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  theme="auto"
  limit="10"
  hide-redeem
  hide-browse-all
></tradepoints-rewards>

This configuration is useful for embedding a rewards showcase on a partner website.

Framework Examples

React

Install the package:

npm install @tradepoints/rewards

Import the component in your application entry point:

import "@tradepoints/rewards";

export default function App() {
  return (
    <tradepoints-rewards
      environment="production"
      location-code="AU"
      theme="auto"
      limit="10"
      sort-by="name"
      sort-order="ASC"
      redeem-link="/signup"
      hide-browse-all
    />
  );
}

React 19 supports custom elements.

The package includes React JSX type declarations for the element.

If TypeScript does not recognize the custom element, ensure the package's JSX type declarations are included in your project.

Angular

Install the package:

npm install @tradepoints/rewards

Import the package in your browser entry point, such as main.ts:

import "@tradepoints/rewards";

Add CUSTOM_ELEMENTS_SCHEMA to the component using the custom element:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <tradepoints-rewards
      environment="production"
      location-code="AU"
      theme="auto"
      limit="10"
      redeem-link="/signup"
      hide-browse-all
    ></tradepoints-rewards>
  `,
})
export class AppComponent {}

Vue 3

Install the package:

npm install @tradepoints/rewards

Configure Vue to recognize the custom element in vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "tradepoints-rewards",
        },
      },
    }),
  ],
});

Import the package once:

import "@tradepoints/rewards";

Use the component in your Vue template:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  theme="auto"
  limit="10"
  redeem-link="/signup"
  hide-browse-all
></tradepoints-rewards>

Plain HTML

Websites without an npm-based build process can load the standalone browser bundle using a CDN.

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

    <title>TradePoints Rewards</title>

    <script
      src="https://unpkg.com/@tradepoints/[email protected]/dist/browser/tradepoints-rewards.js"
      defer
    ></script>
  </head>

  <body>
    <tradepoints-rewards
      environment="production"
      location-code="AU"
      theme="auto"
      limit="10"
      redeem-link="/signup"
      hide-browse-all
    ></tradepoints-rewards>
  </body>
</html>

Important: Version 0.1.1 is the previously published browser bundle. The new attributes require a package release containing the updated implementation. Replace 0.1.1 with the version you publish.

WordPress

The component can also be embedded in WordPress websites.

Load the browser bundle through your WordPress theme or a script-management plugin.

<script
  src="https://unpkg.com/@tradepoints/[email protected]/dist/browser/tradepoints-rewards.js"
  defer
></script>

Then add the component using a Custom HTML block:

<tradepoints-rewards
  environment="production"
  location-code="AU"
  theme="auto"
  limit="10"
  redeem-link="/signup"
  hide-browse-all
></tradepoints-rewards>

Some WordPress installations restrict script tags inside editor blocks.

If scripts are removed by WordPress, enqueue the browser bundle using your theme or an appropriate plugin.

Update the CDN version after publishing the new package.

Theming

The component supports three themes:

| Theme | Description | | ------- | ------------------------------------------------- | | auto | Automatically follows the visitor's system theme. | | light | Forces the light theme. | | dark | Forces the dark theme. |

Automatic Theme

<tradepoints-rewards theme="auto"></tradepoints-rewards>

Light Theme

<tradepoints-rewards theme="light"></tradepoints-rewards>

Dark Theme

<tradepoints-rewards theme="dark"></tradepoints-rewards>

Custom Styling

The component uses Shadow DOM to minimize styling conflicts with host websites.

Supported CSS custom properties can be applied to the custom element:

tradepoints-rewards {
  --tp-heading-color: #ffffff;
  --tp-powered-color: #9ca3af;
  --tp-primary: #2d68ff;
  --tp-primary-text: #60a5fa;
}

These variables allow websites to customize selected colors without modifying the package source code.

API and Data

The component retrieves public rewards and reward categories from the selected TradePoints environment.

Development

https://api-dev.tradepoints.one

Production

https://api-prod.tradepoints.one

The component uses the TradePoints public API endpoints for rewards and root categories.

Reward information includes:

• Reward names
• Reward images
• Points pricing
• Available categories
• Country availability

An internet connection is required to retrieve rewards.

Rewards, availability, and points costs are provided by the TradePoints API.

Country Filtering

Use location-code to request rewards available for a specific country.

<tradepoints-rewards location-code="AU"></tradepoints-rewards>

Country codes should follow ISO 3166-1 alpha-2 format.

Examples:

| Country | Code | | -------------- | ---- | | Australia | AU | | United States | US | | United Kingdom | GB | | India | IN | | Sri Lanka | LK | | Canada | CA |

Dynamic Configuration

The component supports updating its attributes after initialization.

For example:

const rewards = document.querySelector("tradepoints-rewards");

// Change the Redeem destination.
rewards.setAttribute("redeem-link", "/login");

// Hide Redeem buttons.
rewards.setAttribute("hide-redeem", "");

// Show Redeem buttons again.
rewards.removeAttribute("hide-redeem");

// Hide Browse All Rewards.
rewards.setAttribute("hide-browse-all", "");

// Show Browse All Rewards again.
rewards.removeAttribute("hide-browse-all");

// Change the country.
rewards.setAttribute("location-code", "US");

Changes to redeem-link, hide-redeem, and hide-browse-all do not require another API request.

Changing API-related attributes, such as location-code, triggers the component to reload its data.

Browser Requirements

Use a modern browser supporting:

• Custom Elements
• Shadow DOM
• Fetch API
• CSS container queries
• CSS custom properties

The component is intended for browser rendering.

Server-side rendering environments should load it on the client unless suitable browser APIs are available.

Development

Install dependencies:

npm install

Start the development server:

npm run dev

Build the npm and browser distributions:

npm run build

Run type checking and build validation:

npm run check

Inspect the files that would be published:

npm pack --dry-run

The npm entry points are configured in package.json.

The standalone browser bundle is generated at:

dist/browser/tradepoints-rewards.js

Publishing

After updating the component and documentation, validate the package:

npm run check

Increment the package version:

npm version patch

Publish the package:

npm publish --access public

If the Git working directory is not clean, commit your changes before running npm version patch.

After publishing, verify the latest version:

npm view @tradepoints/rewards version

Update the CDN URL in this README to reference the newly published version.

Support

For questions or integration assistance, contact:

[email protected]

Website: tradepoints.one

NPM: @tradepoints/rewards

License

UNLICENSED. All rights reserved.