ApplePay not showing in web application using Braintree

Question

I'm trying to implement Apple Pay into an existing react application that is using Braintree to manage payments. Specifically, the project is using braintree-web-drop-in .

The application is already successfully handling payments for both credit cards and paypal, I am just trying to get Apple Pay support added. I believe there's are a couple of ways to implement Dropin, but currently dropin.create() is what's used on the project.

According to the documentation (linked above), all that's needed is to provide an applePay property to the create() method's options parameter, which I have done like so:

createPaymentForm() {
  const total = this.getTotal();
  const displayTotal = total.toFormat('$0.00'); 

  const paypalConfig = config.payPalEnabled && { paypal: { flow: 'vault' } };
  const applePayConfig = config.applePayEnabled && {
    applePay: {
      displayName: 'Test Display Name',
      paymentRequest: {
        total: {
          label: 'Test Fee',
          amount: displayTotal,
        },
        countryCode: 'US',
        currencyCode: 'USD',
        supportedNetworks: ['visa', 'masterCard', 'amex', 'jcb', 'discover'],
        merchantCapabilities: ['supports3DS', 'supportsCredit'],
      }
    },
  };

  dropin.create(
    {
      authorization: this.props.token,
      selector: '#braintree-container',
      paymentOptionPriority: ['card', 'paypal', 'applePay'],
      ...paypalConfig,
      ...applePayConfig,
      card: {
        overrides: {
          styles: {
            // style overrides are here, I didn't change this
          },
        },
      },
    },
    (err, instance) => {
      // callback stuff is here, I didn't change this
    }
  );
}

To the best of my knowledge, I have followed all of the instructions outlined in the documentation: here . The applePay property definition, as well as a link to Apple's paymentRequest definition, can be found here .

One important note is that while I have created an Apple Sandbox account (docs here ), I have NOT signed into this account yet, because the warning in the docs states that if you log into the account on a production device (ie, my Macbook that I work from, I think?), the account will no longer be a sandbox account and will no longer work. My understanding is this account is only to be used upon trying to checkout via apple pay.

Having said that, I've followed all other steps outlined in the above linked braintree documentation.

Unfortunately, when the dropin component loads on the webpage (I'm using Safari), I'm still only seeing Credit Card and Paypal as the only two available options.

My question is: What have I done incorrectly to cause the ApplePay option to not appear in the braintree-web-drop-in component? Have I missed a step here? I expected to see ApplePay show up as an available option here when I'm using Safari on my Mac.

Answer 1

I have solved the issue. We were communicating with the client to set up the Braintree sandbox account via their Braintree Sandbox control panel.

Turns out, the application was not actually connected to their sandbox, but to a totally different sandbox account that another developer created when originally making the issue. Once we realized this, we accessed that developer's account, enabled ApplePay, and ApplePay now shows up in the list of options!

So I'd say that if anyone in the future has a similar issue, make sure that the braintree access keys match the account you THINK they belong to.