I’m working on a project that has Braintree payment processing integrated.
When I open the payment section where I should place credit card details it shows up as desktop preview (web view).
It is a FE/ReactNative, BE/Django project.
Screenshot of the app - desktop view/webview
As you can see it shows in web view, which is an issue as this is a mobile app and we need a mobile UI for this screen.
It is a desktop preview inside the app, what would be a solution to preview this page like a mobile version?
I would appreciate help on this one.
I did a research and from my understanding, this mobile UI preview is something that we can achieve.
This link shows step by step guide.
In this case, is the drop-in link Drop-in UI | Braintree Payments If they don’t officially support react-native, there can be workarounds or third-party libraries. I found a couple, but not sure if they’re credible:
GitHub - wgltony/react-native-braintree-dropin-ui: React Native integration of Braintree Drop-in for IOS & ANDROID (Apple Pay, Google Pay, Paypal, Venmo, Credit Card)
GitHub - bamlab/react-native-braintree-payments-drop-in: React Native integration of Braintree Drop-in
If it’s a rare scenario, where there are no workarounds either, there’s always the option to create custom UI: Custom UI | Braintree Payments
The final solution may require more effort than a simple “drop-in” solution, but should most definitely be doable. Just saying this from my experience so far with other payment gateways and a few searches now - I could be wrong.
Also, there’s this responsive UI sample (example from their official docs): https://codepen.io/braintree/pen/zeamxM
We tried everything from links in this post and nothing is working, according to the developer from this project.