How to customise the Braintree dropin UI in React Native
React Native is a solid, tangible solution to develop an application at speed as 90–95% of the code will be shared across platforms.
Today we’re talking about something that falls into the category of not being able to be shared.
In a recent React Native project, we decided to use the Braintree drop-in UI integration to handle payments as an easy win when you’re using Braintree. This a great library provided by braintree (and then ported by wgltony to React Native) to save developers the need to build their own payment integrations. It’s easy to set up and get working for React Native by following the steps on the wgltony’s github repo. The only downside of using this integration on React Native is that it’s potentially harder to customise the UI of it. You have to delve into the native code in order to do so.
The Android Side
To customise the look of the Android Braintree drop-in UI you have to overwrite the styles that braintree have defined in your own styles.xml. Here is the list of styles you can overwrite. To do this you copy the style into your styles.xml, this can be found in the android/app/src/res/values directory. If it’s not there then you’ll have to create one following this guide. For example if you’d like to add a bit of your app’s style to the add card activity you can do that in the following way:
Our app’s style was a red app bar with a white title and the button’s text not all in caps. However, to recolour buttons you have to overwrite the colour that braintree has defined. In your android/app/src/res/values/colors.xml include the following:
This is mentioned in the issues of the braintree android github.
That code produces this layout:
How about iOS?
The documentation surrounding how to customise the iOS braintree drop-in UI is more complete than that of Android but it’s still worth running through. You can customise a number of properties on iOS including:
- The text color
- The overlay background colour
- The navigation text colour
- The form’s background colour
- The navigation bar’s background colour
Here’s a list of different properties which you can edit in iOS. You can set these properties before initialising the braintree UI. The following code snippet would give a similar look to the android version above:
All in all the braintree drop-in UI is an easy tool to use to handle payments. Customising it is fairly straightforward but requires some native knowledge when customising it on react-native.
Originally published at https://www.brightec.co.uk.
