Add dynamic custom fee magento 2 - magento2

Question

I am building a custom fee module for magento 2. I add a checkbox to the checkout page, if user ticks that checkbox, I will add a custom fee to the order. I successfully added the custom fee to order following this tutorial:
https://magento.stackexchange.com/questions/92774/how-to-add-fee-to-order-totals-in-magento-2
However, my custom fee is dynamic since it is fetched from external API. Let's take a look at:
app\code\Sugarcode\Test\Model\Total\Fee.php
<?php
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
namespace Sugarcode\Test\Model\Total;
class Fee extends \Magento\Quote\Model\Quote\Address\Total\AbstractTotal
{
/**
* Collect grand total address amount
*
* #param \Magento\Quote\Model\Quote $quote
* #param \Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment
* #param \Magento\Quote\Model\Quote\Address\Total $total
* #return $this
*/
protected $quoteValidator = null;
public function __construct(\Magento\Quote\Model\QuoteValidator $quoteValidator)
{
$this->quoteValidator = $quoteValidator;
}
public function collect(
\Magento\Quote\Model\Quote $quote,
\Magento\Quote\Api\Data\ShippingAssignmentInterface $shippingAssignment,
\Magento\Quote\Model\Quote\Address\Total $total
) {
parent::collect($quote, $shippingAssignment, $total);
$exist_amount = 0; //$quote->getFee();
// $fee = 100; //Excellence_Fee_Model_Fee::getFee();
// TAKE A LOOK AT THIS:
$fee = getFeeFromExternalAPI()
// I successfully get the FEE but how to update the value of checkbox in the UI???
$balance = $fee - $exist_amount;
$total->setTotalAmount('fee', $balance);
$total->setBaseTotalAmount('fee', $balance);
$total->setFee($balance);
$total->setBaseFee($balance);
$total->setGrandTotal($total->getGrandTotal() + $balance);
$total->setBaseGrandTotal($total->getBaseGrandTotal() + $balance);
return $this;
}
protected function clearValues(Address\Total $total)
{
$total->setTotalAmount('subtotal', 0);
$total->setBaseTotalAmount('subtotal', 0);
$total->setTotalAmount('tax', 0);
$total->setBaseTotalAmount('tax', 0);
$total->setTotalAmount('discount_tax_compensation', 0);
$total->setBaseTotalAmount('discount_tax_compensation', 0);
$total->setTotalAmount('shipping_discount_tax_compensation', 0);
$total->setBaseTotalAmount('shipping_discount_tax_compensation', 0);
$total->setSubtotalInclTax(0);
$total->setBaseSubtotalInclTax(0);
}
/**
* #param \Magento\Quote\Model\Quote $quote
* #param Address\Total $total
* #return array|null
*/
/**
* Assign subtotal amount and label to address object
*
* #param \Magento\Quote\Model\Quote $quote
* #param Address\Total $total
* #return array
* #SuppressWarnings(PHPMD.UnusedFormalParameter)
*/
public function fetch(\Magento\Quote\Model\Quote $quote, \Magento\Quote\Model\Quote\Address\Total $total)
{
return [
'code' => 'fee',
'title' => 'Fee',
'value' => 100
];
}
/**
* Get Subtotal label
*
* #return \Magento\Framework\Phrase
*/
public function getLabel()
{
return __('Fee');
}
Please take a look at this function getFeeFromExternalAPI. Instead of using static fee (100$), I get the fee from external API. I got the fee BUT how to update the checkbox value in the UI (HTML). How can I notify the UI to change?
I am thinking of firing an event after I get the response successfully. And then I observe that event. However, the observer is PHP file. How can I update UI from PHP file