When using Stripe's PaymentRequestButton how can I change the label and total before submitting the token request?

Question

I have the button working using test data, but there is a form that collects the amount and sets the label with a dropdown. I need to update the payment request button with the form data just before submitting.

I have the button initialized and it appears on my Android device. I call initPaymentRequest when the document is ready.

function initPaymentRequest(){
    paymentRequest = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
            label: 'Demo total',
            amount: 1000,
        },
    });
    prButton = elements.create('paymentRequestButton', {
        paymentRequest: paymentRequest,
    });

    // Check the availability of the Payment Request API first.
    paymentRequest.canMakePayment().then(function(result) {
        if (result) {
            log("Payment Request Available");
            $(".ux-submit, #payment-request-button").addClass("col-xs-6");
            prButton.mount('#payment-request-button');
        } else {
            log("Payment Request NOT Available");
            $(".ux-submit, #payment-request-button").addClass("col-xs-6");
        }
    });

    paymentRequest.on('click', updatePaymentRequest);
    paymentRequest.on('token', function(ev) {
        // Send the token to your server to charge it!
        fetch('/charges', {
            method: 'POST',
            body: JSON.stringify({token: ev.token.id}),
        })
            .then(function(response) {
                if (response.ok) {
                    // Report to the browser that the payment was successful, prompting
                    // it to close the browser payment interface.
                    ev.complete('success');
                    process_form(ev);
                } else {
                    // Report to the browser that the payment failed, prompting it to
                    // re-show the payment interface, or show an error message and close
                    // the payment interface.
                    ev.complete('fail');
                }
            });
    });
}

function updatePaymentRequest(){;

    paymentRequest = stripe.paymentRequest({
        country: 'US',
        currency: 'usd',
        total: {
            label: $("select[name='charge_label'] option:selected").text(),
            amount: $("#charge-amount").val()*100,
        },
    });

    prButton = elements.create('paymentRequestButton', {
        paymentRequest: paymentRequest,
    });

    $("#payment-request-button").append("<br>update");
}

Answer 1

Just try this instead of function updatePaymentRequest():

paymentRequestElement.on('click', function(ev) {
  paymentRequest.update({
    total: {
      label: $("select[name='charge_label'] option:selected").text(),
      amount: $("#charge-amount").val()*100,
    },
  })
})

Stripe docs:

• paymentRequest.update(options) - Stripe.js Reference | Stripe