ApplePay Icon Appear but nothing happens when clicking on it

[MSIH]

General information

• SDK/Library version: 1.32.0 drop-in web
• Environment: Sandbox
• Browser and OS: Safari 15.2.1

Issue description

The Apply Pay icon appears but nothing happens when I click on it. Not sure how to debug.

braintree.dropin.create({
        authorization: client_token,
        container: '#bt-dropin',
        applePay: {
            displayName: 'Merchant Name',
            paymentRequest: {
                label: 'Localized Name',
                total: '10.00'
            },
            requiredBillingContactFields: ["postalAddress"]
        },
        paypal: {
            flow: 'vault'
        },
        paypalCredit: {
            flow: 'vault'
        },
        venmo: {}
    }, function (err, dropinInstance) {
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            dropinInstance.requestPaymentMethod(function (err, payload) {
                if (err) {
                    console.log('Error', err);
                    return;
                }

                // Add the nonce to the form and submit
                document.querySelector('#nonce').value = payload.nonce;
                form.submit();
            });
        });

[jplukarski]

Hey @MSIH, are you seeing any errors in the console or the network tab? Also, did you ensure you completed all the necessary configurations for accepting Apple Pay?

[MSIH]

Apply Pay only appears when you are on iPhone and using safari. I do not know how to bring up dev tools on iPhone with safari.

I followed the configuration:

• add domain to sandbox
• log into icloud with test account

[jplukarski]

@MSIH It looks like you might be nesting the properties in your paymentRequest object incorrectly. This object requires a total with a label and amount like this:

paymentRequest: {
      total: {
        label: 'My Store',
        amount: '19.99'
      },

See our setup and integration guide for Apple Pay

[MSIH]

Thank I will try that. The example in the code is different:

<caption>Setting up a Drop-in instance to accept credit cards, PayPal, PayPal Credit, Venmo, and Apple Pay</caption>
 * braintree.dropin.create({
 *   authorization: 'CLIENT_AUTHORIZATION',
 *   container: '#dropin-container',
 *   applePay: {
 *     displayName: 'Merchant Name',
 *     paymentRequest: {
   *     label: 'Localized Name',
 *       total: '10.00'
 *     }
 *   },
 *   paypal: {
 *     flow: 'checkout',
 *     amount: '10.00',
 *     currency: 'USD'
 *   },
 *  paypalCredit: {
 *    flow: 'checkout',
 *    amount: '10.00',
 *    currency: 'USD'
 *   },
 *   venmo: true
 * }, function (err, dropinInstance) {
 *   // Set up a handler to request a payment method and
 *   // submit the payment method nonce to your server
 * });

[MSIH]

That worked

[jplukarski]

Glad that worked for you, @MSIH , and good catch about the example in our code. We'll create a task to get that updated.

[MSIH]

also incorrect on this page https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html#~dataCollectorOptions

braintree.dropin.create({
  authorization: 'CLIENT_AUTHORIZATION',
  container: '#dropin-container',
  applePay: {
    displayName: 'Merchant Name',
    paymentRequest: {
    label: 'Localized Name',
      total: '10.00'
    }
  },
  paypal: {
    flow: 'checkout',
    amount: '10.00',
    currency: 'USD'
  },
 paypalCredit: {
   flow: 'checkout',
   amount: '10.00',
   currency: 'USD'
  },
  venmo: true
}, function (err, dropinInstance) {
  // Set up a handler to request a payment method and
  // submit the payment method nonce to your server
});