i'm Trying to make react paypal button that change the billing amount on props change

Question

i\'m Trying to make react paypal button that changes the billing amount on props change. I call the following component with props price and everytime the price change i would

Answer 1

You should really just use react-paypal-button-v2 It updates with props, works as a stateless function and works with SSR such as next.js. It even allows bypassing actions.order.create() so that you can call your own API's.

import { PayPalButton } from "react-paypal-button-v2";

const PaypalButton = ({total, cart}) => {
  return (
    <PayPalButton
    createOrder={(data, actions) => {
      return fetch('/api/paypal/create-transaction', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }, 
        body: JSON.stringify({
            total: total,
            cart: cart,
        })
      })
      .then((response) => {return response.json()})
      .then((data) => {return data.orderID})
      .catch(error => console.log(error))
    }}
    onApprove={(data) => {
      // Capture the funds from the transaction
      return fetch('/api/paypal/capture-transaction', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({ orderID: data.orderID })
      })
        .then((res) => { return res.json() })
        .then((details) => {
          if(details === 200){
            console.log('success');
          } else {
            console.log('failure');
          }
        })
        .catch(error => {
          console.log(error)
        })
    }}
    options={{
      clientId: process.env.PAYPAL_CLIENT_ID
    }}
  />
  );
}

export default PaypalButton;

Answer 2

You can pass the amount to the forceRerender property of the button and the button will rerender each whenever the amount is updated.