JS Element 01

Product listing

Add Fundiin affordability messaging to every product card so customers discover payment flexibility before opening a product.

Start implementation

Before coding

Use these values for this surface.

PlacementProduct cards

InputProduct price

Scriptproductjs.js

Container.script-product-container

Configuration: fundiinProductConfig

Implementation

Add the snippets in this order.

Replace template values with current page data and replace merchantId with the MID from your Fundiin profile. The snippets use the sandbox host.

Add the product container

Place this element inside each product card and provide the original product price.

<div class="script-product-container"
  data-fundiin-loop-product-price-origin="{{product_price}}">
</div>

Initialize the style config

Define the global configuration before loading the Fundiin script.

Optional

<script>
  const fundiinProductConfig = {
    style: {
      // Add brand overrides here
    }
  };
</script>

Load the JS Element

Add the script once in your page footer and replace merchantId with your MID.

<script
  type="application/javascript"
  crossorigin="anonymous"
  src="https://gateway-sandbox.fundiin.vn/merchants/productjs/(merchantId).js">
</script>

Complete example

Copy the full sandbox structure.

This example uses a sample MID. Replace it with the merchantId issued to your business.

Load each hosted script only once per page.

<!-- product.html: product price = 300,000 VND -->
<div class="script-product-container"
  data-fundiin-loop-product-price-origin="300000">
</div>

<!-- footer.html -->
<script>
  const fundiinProductConfig = {
    style: {}
  };
</script>
<script
  type="application/javascript"
  crossorigin="anonymous"
  src="https://gateway-sandbox.fundiin.vn/merchants/productjs/FD200000165745.js">
</script>