Apple Pay not working In Drop-in

General information

SDK/Library version: 1.30.1
Environment: Production
Browser and OS: Safari Version 14.1.1 (15611.2.7.1.6, 15611) on MacOS Catalina 10.15.7

Issue description

I've followed the instructions, and can't get Apple Pay working in the production. I included an applePay property in Drop-in create call to render an Apple Pay option. It looks like this:

      <script src="https://js.braintreegateway.com/web/dropin/1.30.1/js/dropin.min.js"></script>
    <form method="post" id="checkout-form" action="/braintree-index2">
        <div id="braintree-container"></div>
        <input type="hidden" id="braintreeToken" name="token" />
        <button class="button" type="submit" name="checkoutSubmit"><span>Test Transaction</span></button>
    </form>
    <script>
        app.documentReady.unshift(function() {
            var form = document.querySelector('#checkout-form');

            if (window.ApplePaySession && window.ApplePaySession.supportsVersion(3) && window.ApplePaySession.canMakePayments()) {
                console.log('This device is capable of making Apple Pay payments');
            }
            braintree.dropin.create({
                authorization: '<?= $gateway->ClientToken()->generate() ?>',
                container: '#braintree-container',
                applePay: {
                    displayName: <?= json_encode($websiteTitle) ?>,
                    paymentRequest: {
                        total: {
                            label: <?= json_encode($websiteTitle) ?>,
                            amount: <?= 10 ?>
                        },
                        requiredBillingContactFields: [<?= json_encode('bb1 2bb') ?>]
                    }
                }

            }, function (createErr, instance) {
                if (createErr) {
                    console.log('Create Error', createErr);
                    return;
                }

                form.addEventListener('submit', function (event) {
                    event.preventDefault();
                    instance.requestPaymentMethod(function (requestPaymentMethodErr, payload) {
                        if (requestPaymentMethodErr) {
                            console.log('Request Payment Method Error', requestPaymentMethodErr);
                            return;
                        }

                        $('#braintreeToken').val(payload.nonce);
                        form.submit();
                    });
                });
            });
        });
    </script>

I have checked that ApplePaySession.canMakePayments() returns true. And I see the black Apple Pay button, but it doesn't work. When I tap on it, I just get a JS error: TypeError: Type error dropin.min.js:11738:208

return this._sessionInProgress || (this._sessionInProgress = !0, e = this.applePayInstance.createPaymentRequest(this.applePayConfiguration.paymentRequest), (i = new l.ApplePaySession(r.applePaySessionVersion, e)).onvalidatemerchant = function(e) {

https://js.braintreegateway.com/web/dropin/1.30.1/js/dropin.min.js

If it helps, I have created a test page on the website, and you can see this JS error here https://www.yourdesign.co.uk/braintree-index2

Is this a bug in the drop-in? Or if I do something wrong, I would appreciate it if you advise how to fix it?

braintree / braintree-web-drop-in

Apple Pay not working In Drop-in #752

General information

Issue description