Paypal Smart Buttons sales tax by state

Question

Have to charge sales tax if the order is in Texas, but do not know the address until after customer has entered it. The only event that seemed reasonable was onShippingChange, but after the customer clicks continue, PayPal sends back an error page saying this are not working as expected. I can not be the only person that needs to charge sales tax with these new "Smart" buttons.

<script>
    const baseOrderAmount = 20.00;
    function initPayPalButton() {
        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'vertical',
                label: 'paypal',
            },
            createOrder: function(data, actions) {
                return actions.order.create({
                    purchase_units: [
                        {
                            "description": "Add product to buy",
                            "custom_id": "xxx-yyy-zzz",
                            "amount": {
                                "currency_code": "USD",
                                "value": baseOrderAmount,
                                "breakdown": {
                                    "item_total": {
                                        "currency_code": "USD",
                                        "value": baseOrderAmount
                                    },
                                    "tax_total": {
                                        "currency_code": "USD",
                                        "value": 0
                                    }
                                }
                            }
                        }]
                });
            },
            onShippingChange: function (data, actions) {
                const taxAmount = (data.shipping_address.state === 'TX' || data.shipping_address.state === 'Texas') ? baseOrderAmount * 0.0825 : '0.00';
                return actions.order.patch([
                    {
                        op: 'replace',
                        path: "/purchase_units/@@referenceId='default'/amount",
                        value: {
                            currency_code: 'USD',
                            value: (parseFloat(baseOrderAmount) + parseFloat(taxAmount)).toFixed(2),
                            breakdown: {
                                item_total: {
                                    currency_code: 'USD',
                                    value: baseOrderAmount
                                },
                                tax_total: {
                                    currency_code: 'USD',
                                    value: taxAmount
                                }
                            }
                        }
                    }
                ]);
            },
            onApprove: function(data, actions) {
                return actions.order.capture().then(function(orderData) {
                    const element = document.getElementById('paypal-button-container');
                    element.innerHTML = '';
                    element.innerHTML = '<h3>Thank you for your payment!</h3>';
                });
            },
            onError: function(err) {
                console.log(err);
            }
        }).render('#paypal-button-container');
    }

    initPayPalButton();
</script>

Answer 1

In the browser developer tools Network tab, you can see a 422 or 400 response from the patch operation.

{
    "debug_id": "8ff787b4dd2c7",
    "details": [
        {
            "description": "Path should be a valid JSON Pointer https://tools.ietf.org/html/rfc6901 that references a location within the request where the operation is performed.",
            "field": "path",
            "issue": "INVALID_JSON_POINTER_FORMAT",
            "location": "body",
            "value": "/purchase_units/@@referenceId=default/amount"
        }
    ],
    "links": [
        {
            "href": "https://developer.paypal.com/docs/api/orders/v2/#error-INVALID_JSON_POINTER_FORMAT",
            "method": "GET",
            "rel": "information_link"
        }
    ],
    "message": "The requested action could not be performed, semantically incorrect, or failed business validation.",
    "name": "UNPROCESSABLE_ENTITY"
}

Apparently you have an extra at sign (@) in your path, and it has the wrong format...see the SDK reference:https://developer.paypal.com/sdk/js/reference/#onshippingchange

What's given there works:

path: "/purchase_units/@reference_id==\'default\'/amount",

Answer 2

For anyone else trying to implement, you have to modify the script url to add the commit=false as shown below:

<script src="https://www.paypal.com/sdk/js?client-id=<Insert your client Id>&enable-funding=venmo&currency=USD&commit=false" data-sdk-integration-source="button-factory"></script>

Placed a code block above the paypal script blocks.

@{
    var url = @"/purchase_units/@reference_id==\'default\'/amount";
}

and then change with path in the patch

path: "@Html.Raw(url)",