Skip to main content

What is topi Elements?

With topi Elements, you can effortlessly integrate topi's rental checkout option into your e-commerce store. Our first-party JavaScript library lets you embed custom elements directly into your store's frontend, enabling you to showcase topi with minimal effort while optimizing your store's conversion rate.

Say goodbye to complex integration – we handle all the heavy lifting for you!

How we've built it​

We have developed topi Elements as a UI library that simplifies the intricacies of our API for you. Think of it as an opinionated library akin to Twitter's Bootstrap or Google's Material UI.

We've engineered it this way for seamless integration. Here's what sets it apart:

  • You get a more declarative (as opposed to imperative) developer experience. Instead of viewing inputs to topi Elements as mere request inputs to the API, conceptualize them as data inputs to the library.
  • Integrate topi Elements within the framework of your domain, whether it's e-commerce, rather than navigating through topi's rental-centric domain. The elements' names resonate with the e-commerce flow (PLP, PDP, cart, checkout), ensuring clarity in their application.

See something that doesn't work as well as it could? Please send your feedback to us through your topi point of contact!

Overview of available elements​

Element nameWhat it looks like rendered on the page
Checkout Buttontopi Elements - Checkout Button screenshot
Rental Summary Labeltopi Elements - Product Rental Summary Label screenshot
Rental Overviewtopi Elements - Rental overview gif showing toggling of different tenures
Learn More Infotopi Elements - Learn More Info element

Simple HTML example​

Put on the same page, the HTML markup looks very much like regular HTML:

<body>
  <x-topi-checkout-button></x-topi-checkout-button>

  <x-topi-rental-summary-label reference="foo"></x-topi-rental-summary-label>
  <x-topi-rental-summary-label></x-topi-rental-summary-label>

  <x-topi-rental-overview></x-topi-rental-overview>
</body>

There are things you can customize within each of these elements as well as configurations you can make at the top-level instance. We'll go through those later as part of the guide.

Now that you've caught a glimpse of the visuals, let's go step by step to add a topi Checkout Button to your site using topi Elements.