iOS XMLHttpRequest cannot load XXX due to access control checks.

General information

• SDK/Library version: 1.22.1
• Environment: Sandbox
• Browser and OS: Safari 13 on iOS 13.1.1

Issue description

When attempting to submit card details using the drop-in UI via Safari 13 on iOS 13.1.1 the UI refreshes and the user can’t proceed forward.

See my code below which was adapted from this official guide https://developers.braintreepayments.com/guides/drop-in/setup-and-integration/javascript/v3:

<form action="{{controllerURL}}" method="post" name="payment_method_form" id="payment_method_form">
    <div id="dropin-container"></div>
    <button id="submit-button">Pay Now</button>
    <script src="https://js.braintreegateway.com/web/dropin/1.22.1/js/dropin.min.js"></script>
    <script>
    var button = document.querySelector('#submit-button');

    braintree.dropin.create({
        authorization: {{clientToken}},
        container: '#dropin-container'
    }, function (createErr, instance) {
        button.addEventListener('click', function () {
            instance.requestPaymentMethod(function (err, payload) {
                if (!err) {
                    document.getElementById('nonce').value = payload.nonce;
                    document.payment_method_form.submit();
                }
            });
        });
    });
    </script>
</form>

This code works absolutely fine on desktop (macOS/windows) and Android (Chrome).

It fails on iOS 13.1.1 using Safari 13 outputting the following errors in the console:

[Error] XMLHttpRequest cannot load https://origin-analytics-sand.sandbox.braintree-api.com/{{marchantID}} due to access control checks. x (hosted-fields-frame.min.html:1:49617) (anonymous function) (hosted-fields-frame.min.html:1:49181)
[Error] XMLHttpRequest cannot load https://api.sandbox.braintreegateway.com/merchants/{{marchantID}}/client_api/v1/payment_methods/credit_cards due to access control checks. x (hosted-fields-frame.min.html:1:49617) (anonymous function) (hosted-fields-frame.min.html:1:48869)
[Error] XMLHttpRequest cannot load https://origin-analytics-sand.sandbox.braintree-api.com/{{marchantID}} due to access control checks. I (dropin.min.js:1:26547) request (dropin.min.js:1:26601) (anonymous function) (dropin.min.js:1:39242) sendEvent (dropin.min.js:1:235035) (anonymous function) (dropin.min.js:1:330055) (anonymous function) promiseReactionJob
[Error] XMLHttpRequest cannot load https://origin-analytics-sand.sandbox.braintree-api.com/{{marchantID}} due to access control checks. I (dropin.min.js:1:26547) (anonymous function) (dropin.min.js:1:26111)

[crookedneighbor]

One thing I see is that you’re not preventing the form from submitting (buttons are submit type by default). So it’s possible that it’s submitting the form before the nonce is available.

Probably want to, at minimum add:

button.addEventListener('click', function (e) {
  e.preventDefault();

Going to close this for now, because as you said, updating the os fixes the issue. If we get more people reporting it, we can look into it further.

[crookedneighbor]

Closing due to inactivity.