3

I am using the Drop in form in the Javascript v3 client SDK to render my credit card form in an Angular JS SPA as follows:

braintree.dropin.create({
    authorization: clientToken,
    container: '#creditCardForm',
    paypal: {
        flow: 'vault'
    }
}, function (createErr, instance) {
   instance.requestPaymentMethod(function (err, payload) {
       if (err) {
           return;
       }
       $http
       .post('/api/[webAPIPaymentMethod]', JSON.stringify(payload.nonce))
       .then(function() {
           _showAlert('Payment details were successfully updated.', 'success');
       })
   }
}

This works like a charm in Chrome and Firefox but for some reason IE11 and Edge just completely bombs and gets infinitely stuck in what appears to be while calling the requestPaymentMethod in the drop-in form SDK.

I see the following (test credit card used from Braintree documentation) with the progress bar just scrolling away infinitely and nothing else happening until I hard refresh the page. CC form

Anyone run into similar issues? I'm not quite sure what's wrong here.

UPDATE: I have reached out to Braintree support. We do have a staging application that demonstrates this issue but I will have to get the appropriate clearence to provide a link to it. Unfortunately there is no activity whatsoever on the dev console. No errors on the console, no calls to an external Braintree API endpoint on the network tab.

It must be something about how we've done it on our Angular app as the .NET sample in here works fine in Edge and IE11.

tkha007
  • 212
  • 3
  • 12
  • 1
    Hi tkha007- I recommend reaching out to Braintree [Support](https://support.braintreepayments.com/) and referencing this SO question with a link to a staging site and steps to replicate the problem. Otherwise, can you update your question to include specifics- are there any error messages when checking IE's developer console? – hollabaq Oct 26 '17 at 20:31
  • 1
    Braintree developer here. I investigated this a bit and it looks like something is preventing the iframes from receiving the Tokenization request. I have a simple Angular 1 app here that works just fine: https://github.com/crookedneighbor/braintree-web-drop-in-using-angular-1 So I assume it is some plugin that y'all have included that is interfering with it. Happy to look into it if you can provide a Github repo that reproduces the problem so I can go in edit things to pinpoint what is causing the failure. – BladeBarringer Nov 01 '17 at 20:45
  • @BladeBarringer Thanks for your feedback. I'll have a look at the sample and see if I can pinpoint the issue. I can't expose our app on a public repo but I may be able to isolate the relevent part and reproduce the issue and put that on a public repo. Will keep this post updated. – tkha007 Nov 01 '17 at 23:29
  • I am also facing same issue with Hosted Field UI. it goes in infinite loading while creating client. – pm86 Jan 17 '18 at 14:19

0 Answers0