JS Element 04

Checkout

Render Fundiin inside the payment area and optionally connect it to your existing payment method title.

Start implementation

Before coding

Use these values for this surface.

PlacementPayment methods

InputPayment title

Scriptcheckoutjs.js

Container#script-checkout-container

Configuration: fundiinPaymentTitle

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 checkout container

Place the container below or inside the payment gateway section.

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

Connect the payment title

Optionally expose the existing title element so Fundiin can align with your checkout UI.

Optional

<script>
  var fundiinPaymentTitle =
    document.getElementById("fundiin-payment-title");
</script>

Load the JS Element

Load the checkout script and replace merchantId with your MID.

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

<!-- Mounted below the payment gateway -->
<div id="script-checkout-container"></div>
<script>
  var fundiinPaymentTitle =
    document.getElementById("fundiin-payment-title");
</script>
<script
  type="application/javascript"
  crossorigin="anonymous"
  src="https://gateway-sandbox.fundiin.vn/merchants/checkoutjs/FD200000165745.js">
</script>