Manage Amounts

Track and Display Payment Amounts

Amount-Based Payment Method Filtering

Payment methods are automatically filtered based on the transaction amount. Methods with payment_min_amount or payment_max_amount configurations will be marked as disabled if the amount doesn't meet their requirements.

checkout.paymentMethods.subscribe((methods) => {
    methods.forEach((method) => {
        if (method.disabled.value) {
            const reason = method.disabled.value;
            console.log(`${method.method} is disabled: ${reason.code}`);
            // Possible codes: MIN_AMOUNT_NOT_MET, MAX_AMOUNT_EXCEEDED
            
            // Display appropriate message to user
            if (reason.code === 'MIN_AMOUNT_NOT_MET') {
                console.log(`Minimum amount required for this method`);
            } else if (reason.code === 'MAX_AMOUNT_EXCEEDED') {
                console.log(`Amount exceeds maximum for this method`);
            }
        }
    });
});

Information

Payment methods are dynamically enabled or disabled based on the current transaction amount to ensure compliance with method configuration.

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;
});

Information

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:

<ul id="breakdown"></ul>

const list = document.getElementById("breakdown");

checkout.amountSplit.subscribe((amounts) => {
    amounts.forEach(({source, amount}) => {
        const li = document.createElement("li");
        li.textContent = `${source.method}: ${amount}`;
        list.appendChild(li);
    });
});

Information

This provides transparency on how the total amount is split across multiple sources.