Can't update amount with state change

[SteveAndreou]

Hi,

I've been struggling with updating the amount for the rendered component.

The properties for my wrapping component are updating correctly (seen via react dev tools) and the properties on the PayPalButton are also updating correctly but the createOrder call to paypal (see in the console with debug enabled) is not sending the correct value.

To give context to usage, I have a checkout page with a promo code field which can alter the total cost. The paypal payment button is show below the promo code fields at the very bottom of the page.

I tried using the onshippingchange action to mess with the value but it's not ideal. Any suggestions?

const paypalOptions: PaypalOptions = {
        clientId: props.apiKey,
        intent: "capture",
        debug: true,
        commit: true,
        vault: false,
        currency: props.currency
    };

    const buttonStyles: ButtonStylingOptions = {
        layout: "vertical",
        shape: "rect"
    };

<PayPalButton
                    paypalOptions={paypalOptions}
                    buttonStyles={buttonStyles}
                    ...
                    amount={props.amount}
                />

[SteveAndreou]

[Work around] Set a key on the element to re-mount the component when the key changes.

I found setting the key on the element to the same property I was using for my amount would solve this problem. It's not a great solution but it works.

<PayPalButton
                    key={charge.total}
                    paypalOptions={paypalOptions}
                    buttonStyles={buttonStyles}
                   ...
                    amount={charge.total}
                />