Mobicred Integration - Installment Widget

Good Day Everyone,
I hope ANYONE can help me with this (I am assuming easy) fix for implementing the code provided by Mobicred.
I have very basic knowledge on coding etc but not enough to help me with resolving this.

The Code provided by Mobicred:
To be added to either the header or footer:
<script src="https://app.mobicredwidget.co.za/assets ... "></script>
This I have done and seems to be working fine

To be added anywhere to display the widget on the website on the product page:
<div id="instalmentCalc" data-amount="1000"></div>
This works fine if you enter the data-amount in manually, it collects the installment info from the mobicred api and returns the correct installment

On their integration section they also provide the code below:
<div id="instalmentCalc"
data-amount= "<?php echo $price;?>"
data-before="Credit Amount:"
data-after="per month"
data-textColor="#666"
data-bgColor="transparent"
data-padding="0"
data-margin="5"
data-fontFamily="inherit"
data-fontSize="16"
data-fontWeight="normal"
data-merchantId="12345"
data-min="1"
data-max="20000">
</div>

Here is my issue
I want to use the last div code as this automatically gets the price from opencart.
However i cant seem to get the price from opencart correctly. I have tried multiple texts and formats but it does not pull the amount from opencart.

I am assuming that the code: <?php echo $price;?> is incorrect. I have tried option like "price" 'price' {{ "price" }} [ `price `] etc without any success.
When I try using $price then it displays an installment of R0.00 per Month.

Please don't laugh, like I said I have no clue what I am doing with my basic knowledge. and your help will be greatly appreciate.
I am sure this will be a stupid and easy fix, but I am too blind or uneducated to resolve this myself.

Also I think you need to register your website on that site
https://live.mobicred.co.za/web_mcrliv/run.w

Hi Guy where precisely do i insert the widget in the product.twig?