PaymentRequestComponent: Failed to execute 'show' on 'PaymentRequest'

[vitorderobe]

General information

• SDK version: 3.92.0
• Environment: Sandbox
• Chrome Version 111.0.5563.64 (Official Build) (x86_64) on MacOS 11.6.1 -->

Issue description

I have an issue with the Payment Request API. I keep getting the error when I call the tokenize method:

{
    "name": "BraintreeError",
    "code": "PAYMENT_REQUEST_NOT_COMPLETED",
    "message": "Payment request could not be completed.",
    "type": "CUSTOMER",
    "details": {
        "originalError": {
            "code": 18,
            "message": "Failed to execute 'show' on 'PaymentRequest': PaymentRequest.show() requires either transient user activation or delegated payment request capability",
            "name": "SecurityError"
        }
    }
}

And I really don't know why because my implementation looks exactly the same as the example

My code:

<%= button_tag 'Payment Request', id: 'payment-request-component-button', class: 'payment-request-component-button',
  type: 'button' %>

<script>
  if (window.PaymentRequest) {
    const auth = "####"
    var client = braintree.client.create(
      {
        authorization: auth,
      },
      clientDidCreate
    );

    var button = document.querySelector('#payment-request-component-button');

    function clientDidCreate(err, client) {
      braintree.paymentRequest.create({
        client: client
      }).then(function (instance) {
        button.addEventListener('click', function (event) {
          var amount = '100.00';

          instance.tokenize({
            details: {
              total: {
                label: 'Total',
                amount: {
                  currency: 'USD',
                  value: amount
                }
              }
            }
          }).then(function (payload) {
            console.log(payload)
          }).catch(function (err) {
            console.log(err)
          });
        });
      }).catch(function (err) {
        console.log(err)
      });
    }

  } else {
    console.log("PaymentRequest not supported by the user agent")
  }
</script>

If I use the PaymentRequest.show() API directly, it works fine. I'm not sure, but I think the Braintree Iframe is not permitted to run the PaymentRequest.show(), and I need to give permission to it somehow. I've also tested with the Microsoft Edge browser and got the same error.

Any help is appreciated. Thank you!

Additional Prints

[shango420]

// Create a client. braintree.client.create({ authorization: CLIENT_TOKEN_ENCODED_WITH_CUSTOMER_ID }, function (clientErr, clientInstance) {

// Create a PayPal Checkout component. braintree.paypalCheckout.create({ autoSetDataUserIdToken: true, client: clientInstance }, function (paypalCheckoutErr, paypalCheckoutInstance) { paypalCheckoutInstance.loadPayPalSDK({

  // The following are optional params
  dataAttributes: {
    amount: "100.00"
  }
}, function () {
  paypal.Buttons({
    fundingSource: paypal.FUNDING.PAYPAL,

    createOrder: function () {
      return paypalCheckoutInstance.createPayment({
        //...
      });
    },

    onApprove: function (data, actions) {
      return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
        // Submit `payload.nonce` to your server
      });
    },

    onCancel: function (data) {
      console.log('PayPal payment canceled', JSON.stringify(data, 0, 2));
    },

    onError: function (err) {
      console.error('PayPal error', err);
    }
  }).render('#paypal-button').then(function () {
    // The PayPal button will be rendered in an html element with the ID
    // `paypal-button`. This function will be called when the PayPal button
    // is set up and ready to be used
  });

});

});

});

[ibooker]

Hi, We've looked into this issue and found that browser support for our PaymentRequest implementation was recently deprecated in Chrome/Chromium. We're looking into potential resolutions and do not have an ETA at this time.

Thanks

[wuservices]

@ibooker is the current issue that the Braintree Payment Request API implementation is coupled with the basic-card implementation that was deprecated in 2021 and finally removed in Chrome 100? Perhaps this is a good time to revisit compatibility with payment methods and APIs since support is a bit different from when the Braintree implementation was released.

Now, the Payment Request API has support for digital wallets across Chrome, Edge, and Safari (desktop and iOS). It's compatible with Apple Pay on Safari and Google Pay (Chrome, maybe Edge?).

If you're able to support Google Pay and Apple Pay wherever browser support exists, that would be a great update.

[liucaizhong]

deprecated in 2021

Hi @ibooker So it will impact all the merchants who use Change payment button, right?