Issue with reloading Dropin with different payment methods

General information

• SDK/Library version: 1.30.1
• Environment: Sandbox
• Browser and OS: Firefox 89.0.2 in Mac OS 11.4 and Safari 14.1

Issue description

1. Try to dropIn.create() with, for example, paypal = { ... } and Credit Card
2. dropIn.create() again but just with Credit Card
3. dropIn.create() once again but add paypal = { ... } with Credit Card
4. You will only get Credit Card and PayPal will not show, despite the fact that you requested it.

This happens whether you reload the window or not. It seems like you have a timeout to get PayPal back again. It happens with applePay = { ... } as well. The issue also happens if you always try to dropIn.create() with paypal = { ... } and Credit Card, but instead switch paymentOptionPriority = ['paypal', 'card'] to paymentOptionPriority = ['card'] and back again. If you try to justpaymentOptionPriority = ['paypal'] after paymentOptionPriority = ['card'] you’ll get an error saying that DropinError: No valid payment options available.

I think this is related to the server not wanting to give different payment methods rather than the FE implementation of this repo. Still gotta ask whether this behaviour is supported or if it’s an issue.

[crookedneighbor]

OK, I see the problem now. You’re not waiting for the modifications to the createProperties to be completed before creating the Drop-in instance. Basically, you’re modifying the createProperties after creating a Braintree client instance and Apple Pay instance, which means that the version of the object that gets passed into dropin.create does not have those modifications yet. Sometimes they get applied, because the object is mutated before they are accessed in the Drop-in create code, but sometimes they don’t so Drop-in is created with an object that does not have PayPal/Apple Pay applied and card set to false.

You shouldn’t even be using braintree-web in conjunction with Drop-in, so by simply removing the extra braintree-web code, you can solve your problem.

Here is the code you have on your site right now:

    async create(paymentMethod, availableMethods, paymentConfig) {
        const { default: dropIn } = await import('braintree-web-drop-in');
        const { default: braintree } = await import('braintree-web');
        const authorization = await this.requestBraintreeClientToken();
        const configuration = await this.requestBraintreeConfig();

        // TODO: Remove for now, waiting for Braintree team to confirm implementation below
        // const braintreeAvailableMethods = availableMethods.filter((item) => BRAINTREE_METHODS.includes(item.code));
        // eslint-disable-next-line fp/no-let
        let applePayLabel = '';
        if (paymentMethod === APPLE_PAY) {
            applePayLabel = await this.requestApplePayMerchantName();
        }
        this.isThreeDSecure = configuration.is_three_d_secure;
        const createProperties = {
            authorization,
            container: `#${ this.containerId }`,
            threeDSecure: this.isThreeDSecure
        };

        braintree.client.create({ authorization }, (clientError, clientInstance) => {
            if (clientError) {
                return;
            }

            switch (paymentMethod) {
            case APPLE_PAY:
                braintree.applePay.create({ client: clientInstance }, (applePayErr, applePayInstance) => {
                    if (applePayErr) {
                        return;
                    }
                    const paymentRequest = applePayInstance.createPaymentRequest({
                        total: {
                            label: applePayLabel.braintree_applepay_merchant_name,
                            amount: paymentConfig.grandTotal
                        }
                    });

                    createProperties.applePay = {
                        displayName: applePayLabel.braintree_applepay_merchant_name,
                        paymentRequest
                    };
                });
                break;
            case PAYPAL:
                createProperties.paypal = {
                    checkout: 'flow',
                    amount: paymentConfig.grandTotal
                };
                break;
            default:
            }
        });

        if (paymentMethod !== BRAINTREE) {
            createProperties.card = false;
        }

        // TODO: We need to keep it for Braintree team to check
        // eslint-disable-next-line no-console
        console.log(createProperties);
        this.braintreeDropIn = await dropIn.create(createProperties);

        return true;
    }

You can change it to this, and it should just work:

async create(paymentMethod, availableMethods, paymentConfig) {
  const { default: dropIn } = await import('braintree-web-drop-in');
  const authorization = await this.requestBraintreeClientToken();
  const configuration = await this.requestBraintreeConfig();

  // TODO: Remove for now, waiting for Braintree team to confirm implementation below
  // const braintreeAvailableMethods = availableMethods.filter((item) => BRAINTREE_METHODS.includes(item.code));
  // eslint-disable-next-line fp/no-let
  let applePayLabel = '';
  if (paymentMethod === APPLE_PAY) {
    applePayLabel = await this.requestApplePayMerchantName();
  }
  this.isThreeDSecure = configuration.is_three_d_secure;
  const createProperties = {
    authorization,
    container: `#${ this.containerId }`,
    threeDSecure: this.isThreeDSecure
  };

  switch (paymentMethod) {
    case APPLE_PAY:
      const paymentRequest = {
        total: {
          label: applePayLabel.braintree_applepay_merchant_name,
          amount: paymentConfig.grandTotal
        }
      };

      createProperties.applePay = {
        displayName: applePayLabel.braintree_applepay_merchant_name,
        paymentRequest
      };
      break;
    case PAYPAL:
      createProperties.paypal = {
        checkout: 'flow',
        amount: paymentConfig.grandTotal
      };
      break;
    default:
  }

  if (paymentMethod !== BRAINTREE) {
    createProperties.card = false;
  }

  // TODO: We need to keep it for Braintree team to check
  // eslint-disable-next-line no-console
  console.log(createProperties);
  this.braintreeDropIn = await dropIn.create(createProperties);

  return true;
}

Since this isn’t an issue with the Drop-in, if you need further assistance with your integration, please reach out to our support team. https://developer.paypal.com/braintree/help

[kinowashere]

Fixed that cart issue. Sorry for the wait.