JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<!-- Add meta tags for mobile and IE -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<!-- Set up a container element for the button -->
<div id="paypal-button-container"></div>
<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=<ClientID>¤cy=USD"></script>
<script>
// Render the PayPal button into #paypal-button-container
paypal.Buttons({
onShippingChange: function(data, actions) {
// Patch the tax amount
const baseOrderAmount = '19.99';
const taxPercent = '0.077';
console.log("shipping change", data);
const taxAmount = data.shipping_address.state === 'CA' ? (parseFloat(baseOrderAmount) * parseFloat(taxPercent)).toFixed(2) : '0.00';
console.log("taxamount: ", taxAmount);
console.log("new total:", (parseFloat(baseOrderAmount) + parseFloat(taxAmount)).toFixed(2));
let newTotal = (parseFloat(baseOrderAmount) + parseFloat(taxAmount)).toFixed(2);
return actions.order.patch([{
"op": "replace",
"path": "/purchase_units/@reference_id=='default'/amount",
"value": {
"currency_code": "USD",
"value": newTotal,
"breakdown": {
"item_total": {
"value": "19.99",
"currency_code": "USD"
},
"shipping": {
"value": "0.00",
"currency_code": "USD"
...