react-nativeapplepaygoogle-paydesign-guidelines

Integrating Google pay buttons and Apple pay buttons into react-native application


I have been searching everywhere on how to integrate the native assets provided by Apple (PkPaymentButton) and Google Pay ( https://developers.google.com/pay/api/web/guides/brand-guidelines#payment-buttons ) without having to write my own native modules.

I found out that these two were included in the react-native-GPay library, and in the react-native-payment libraries(interface for PKPaymentButton). Problem is, i am already using another library handling Apple pay and Google pay (tipsi-stripe) which doesn't provide the interface for the native buttons, and i don't want to include these two libraries just to use their native buttons implementation.

I also want to respect the apple/google brand design guidelines. They are very specific : - Don't create your own Google Pay buttons or alter the font, color, button radius, or padding within the button in any way. - Don't create your own Apple Pay button design or attempt to mimic the system-provided button designs.

Everywhere i look, it seems like people providing tutorial on how to implement googlepay/apple pay inside react-native apps don't care about the branding guidelines (they use simple TouchableOpacity with some text inside, triggering the payment interfaces) And i couldn't find any react-native modules that only implements the buttons UI

Maybe i am missing something quite obvious (it is my first implementation of these features), but is there any react-native modules that only provide interface for native button assets , without implementing the whole payment libraries ? Would it be usefull to create a react-native module that does just that ?


Solution

  • I'm a kind of in the same situation, except that I'm not using GPay from tipsi-stripe in my project, I'm just using it for Apple Pay on iOS. And if it can help you, here's the repo that I just recently published which exposes native Apple Pay button to React Native: Apple Pay button for RN

    Regarding Android, I didn't include it since I'm not familiar with native Android. I hope someone will add it as well, or tipsi-will stripe will include it.