JS Element 02

Product detail

Place Fundiin beside the main product price to communicate installment options at the highest-intent moment.

Start implementation

Before coding

Use these values for this surface.

PlacementPrice section

InputProduct price

Scriptproductdetailjs.js

Container#script-general-container

Configuration: fundiinDetailConfig

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.

Mount the UI container

Add the container where the Fundiin affordability message should appear.

<div id="script-general-container"></div>

Provide price and styles

Set amount to the current product price and optionally add style overrides.

<script>
  var fundiinDetailConfig = {
    data: {
      amount: {{product_price}}
    },
    style: {}
  };
</script>

Load the JS Element

Load the product detail script after the configuration is available.

<script
  type="application/javascript"
  crossorigin="anonymous"
  src="https://gateway-sandbox.fundiin.vn/merchants/productdetailjs/(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.

<div id="script-general-container"></div>
<script>
  var fundiinDetailConfig = {
    data: {
      // Product price = 300,000 VND
      amount: 300000
    },
    style: {}
  };
</script>
<script
  type="application/javascript"
  crossorigin="anonymous"
  src="https://gateway-sandbox.fundiin.vn/merchants/productdetailjs/FD200000165745.js">
</script>