can not load braintree-web-drop-in sdk in Uniapp

[chenxing-luckysky]

General information

• SDK/Library version:
• Environment: <sandbox -->
• Browser and OS

Issue description

I am using Uniapp to design an ios app. but the sdk"braintree-web-drop-in" can not be loaded. I tried: import dropIn from 'braintree-web-drop-in/index.js' and import dropIn from 'braintree-web-drop-in' both of them does not work. However, the whole app is working perfectly on chrome. but not for ios simulator. it does not give any response from simulator.

And also I tried the html way. but only paypal works but not for credit card, the requestpaymentmethod was on pending and do nothing. I read from other issue that said it was because the html is run over protocol instead of web server. but any one can provide me any idea how i can solve this problem. the whole app is base on uniapp and it will jump to html while payment. the sample code like https://codepen.io/braintree/pen/c77480f28c18484e8cd7748c8fe4fe84/?editors=1111 However, when I write the same code in my html, it does not work at all.

[crookedneighbor]

👋 this sdk is not designed to work in an hybrid webview environment, which based on what you are describing, seems to be what you're doing.

I'd recommend calling out to the native android/ios sdks that Braintree provides. Especially if you're wanting to accept PayPal in your app, that's the only was I think that will work.

I assume uniapp has some mechanism for calling native mobile app code.

[chenxing-luckysky]

@crookedneighbor what about the html way. jump to a html when payment. is there any way to solve that problem. when I jump to the html. the method requestPaymentMethod works for paypal but not for credit card (I was using default drop in). how could that happed? if paypal could get the payment nonce, then credit card should be also able to get the payment nonce. I was use the sample code from https://codepen.io/braintree/pen/c77480f28c18484e8cd7748c8fe4fe84/?editors=1111 but add paypal is the config. can you help me solve this problem

[crookedneighbor]

It's not going to be possible when running your app over the file protocol. The post message APIs we use to communicate with the iframes containing the card details don't function over the file protocol.

[chenxing-luckysky]

but the paypal works though. is there any way to make it works?

[crookedneighbor]

Not that I'm aware of. If you want to open up a Pull Request to framebus, which manages the post messaging to the iframes, feel free: https://github.com/braintree/framebus

I still recommend calling out to the native sdks to get the best experience on android/ios.

[chenxing-luckysky]

@crookedneighbor sorry for bothering you again. since my whole project is built on uniapp with javascript for frontend and java for backend. I cannot use the native sdks on ios. Is there any way that I can send all the credit card information to the backend, and do the transaction on the java backend? I was try to do this, but It seems that I cannot get the payment nonce on the java backend instead of geting it from client side. Is there any way to do everything on the java backend? I read the braintree documentation, and didn't find anything about getting nonce in the backend. do you have any reference that doing everything all on the backend? Thank you for your help!

[crookedneighbor]

That requires a higher level of PCI compliance. I would reach out to our support team to see if you qualify: https://help.braintreepayments.com/

However, another option to try is tokenizing directly using our GraphQL API: https://graphql.braintreepayments.com/

Since you're presenting the card form within a mobile app context, you should have the same level of PCI compliance as if you were using one of our native mobile sdks. Our support team can help you out if you need assistance.