Dynamically change a value of instance already created in JavaScript

Question

I'm using "Braintree - Dropin" here. Instance is created when page load and I have a dropdown to select "pay amount" after. I want to update value of instance (already created) when dropdown is changed.

var form = document.querySelector('#payment-form');
var client_token = "{{ Braintree\ClientToken::generate()}}";
var amount = document.getElementById("amount");
var amount_val = amount.options[amount.selectedIndex].value;

braintree.dropin.create({
    authorization: client_token,
    selector: '#bt-dropin',
    applePay: {
        displayName: 'My Store',
        paymentRequest: {
            total: {
                label: 'My Store',
                amount: amount_val
            }
        }
    }
}, function (createErr, instance) {
    if (createErr) {
        console.log('Create Error', createErr);
        return;
    }
    amount.addEventListener("change", function() {
        console.log(amount.value);
        // Where i'm trying to change amount
        instance.updateConfiguration('applePay', 'paymentRequest', {
            total: {
                label: 'My Store',
                amount: amount.value
            }
        });
    });
    form.addEventListener('submit', function (event) {
        event.preventDefault();

        instance.requestPaymentMethod(function (err, payload) {

            if (err) {
                console.log('Request Payment Method Error', err);
                return;
            }
            // Add the nonce to the form and submit
            document.querySelector('#nonce').value = payload.nonce;
            form.submit();
        });
    });
});

According to "Dropin" documentation this should work. but it doesn't. https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#updateConfiguration

score 0 · Answer 1 · answered Jul 23 '20 at 14:57

I couldn't find a possible way to change instance after it is created. But I solved the problem by splitting process in to two parts. I made two steps to do the payment. In first page user will select amount from dropdown then click next button which submit selected amount into payment page. then on payment page this instance is created with amount already post from previous page. Hope this will help someone with a similar issue.

Dynamically change a value of instance already created in JavaScript

1 Answers1