Skip to main content

Manage Amounts

Track and Display Payment Amounts​

Remaining Amount to Pay​

Thus feature helps you keep users informed of the amount they need to pay and how their payment will be split. Subscribe to the checkout.remainingAmountToPay reactive variable to display the amount left to pay:

<p>Amount to pay: <span id="amount"></span></p>
checkout.remainingAmountToPay.subscribe((amount) => {
    document.getElementById("amount").textContent = amount;
});
info
Make sure the UI updates dynamically to reflect the current amount.

Payment Breakdown by Method​

For a detailed view of how the payment is split across methods, use the checkout.amountSplit reactive variable:


<div id="breakdown"></div>
checkout.amountSplit.subscribe((amounts) => {
    const ul = document.createElement("ul");
    amounts.forEach(({source, amount}) => {
        const li = document.createElement("li");
        li.textContent = `${source.method}: ${amount}`;
        ul.appendChild(li);
    });
    const breakdown = document.getElementById("breakdown");
    breakdown.innerHTML = "";
    breakdown.appendChild(ul);
});
info
This provides transparency on how the total amount is split across multiple sources.