[Bug]: Discrepanicies between HTML data attributes and Paddle.JS

[abishekmuthian]

What happened?

1. html custom data attribute doesn't work

Document mentions custom data can be passed through data-custom-data attribute but it doesn't. Also the example in the document for data-custom-data doesn't include valid JSON(it has single quotes); nevertheless even with valid JSON the data-custom-data doesn't work. Where as paddle.js CustomData works.

2. When pre-filling data for checkout, postalCode is mandatory for paddle.js but not for HTML attribute

When pre-filling data for checkout in HTML, data-customer-address-country-code can be passed without data-customer-address-postal-code and the checkout will have appropriate country/price selected. But in Paddle.js if we pass customer.address.countryCode without customer.address.postalCode the country will resolve to default (US) unless we pass the postal code as well.

Steps to reproduce

1. Pass custom data through HTML attribute as per the document but with valid JSON.
2. Prefill data for checkout using HTML, Give country code but not the postal code. Replicate the same with Paddle.js to see the discrepancy.

What did you expect to happen?

1. Behavior mentioned in the documentation.
2. No discrepancy between HTML attributes and paddle.js.

How are you integrating?

paddle.js, Go SDK

Logs

No response

[vijayasingam-paddle]

Hi @abishekmuthian,

Thank you for raising this bug report.

The quotes in the documentation of custom_data are indeed incorrect. I will get it fixed shortly.

I tried to test the other two issues you reported, but I am afraid I need more details.

1. Custom data not working with HTML attributes:

I tried to create a checkout with custom data. I can see it on the transaction details page in our dashboard. Can you please provide more context on what you mean by not working? 

2. Pre-filling data without postalCode:

Postal code validation depends on the country. There are a few countries where we need a postal code to detect tax rates. When pre-filling data in the checkout, if you missed sending the postcode while passing a county code that needs one, we will send a checkout.warning event with code checkout_creation_invalid_field through the event callback with some other details to tell you about the error. In this scenario, the checkout will ignore the provided country and will default based on the user's location.

Please share more details about issues for us to check further.

Thank you.

[abishekmuthian]

Thanks for the quick response,

Adding more details:

1. Custom data not working with HTML attributes:

I tested now and it works, must have been my bad. I apologize.

2. Issue 2 Pre-filling data without postalCode:

Thank you for the clarification regarding postal code, Please confirm that if I don't pass the postal code for the country which needs one the checkout will set the country as per the IP address even if I pass the country code?

HTML attribute

            <a
            href="#"
            class="paddle_button"
            data-theme="light"
            data-customer-address-country-code='US'
            data-customer-email='jo@example.com'
            data-items='[
                {
                "priceId": "pri_01hxw133mj34n18ce2ha2a7fww",
                "quantity": 1
                }
            ]',
            data-custom-data='{
                'utm_medium': 'social',
                'utm_source': 'linkedin',
                'utm_content': 'launch-video',
                'integration_id': 'AA-123'
            }'
            >
            <b>Buy Bone Health Tracker Premium</b>
            </a>

The country is India in spite of passing "US" (I'm located in India).

Where as if I add the data-postalcode, The country is correctly switched to US and directly leads to card details page -

           <a
            href="#"
            class="paddle_button"
            data-theme="light"
            data-customer-address-country-code='US'
            data-customer-email='jo@example.com'
            data-customer-address-postal-code='94103'
            data-items='[
                {
                "priceId": "pri_01hxw133mj34n18ce2ha2a7fww",
                "quantity": 1
                }
            ]',
            data-custom-data='{
                "utm_medium": "social",
                "utm_source": "linkedin",
                "utm_content": "launch-video",
                "integration_id": "AA-123"
            }'
            >
            <b>Buy Bone Health Tracker Premium</b>
            </a>

In paddle.js the behavior is same.

[vijayasingam-paddle]

Hi @abishekmuthian, Yes, that is correct.

If you pass an incomplete address, the checkout will ignore it and default the country based on user's IP address.

Please feel free to reach out to us if you need any other information.

Thank you.

[abishekmuthian]

Thank you, you may close this issue after fixing the JSON in the document.

[vijayasingam-paddle]

Hello,

We have fixed the typo in the documentation.

Please reach out to us if you need help with anything else.

Thank you.