Integrating Apple Pay with React Native?

Highlighted
New Member
3 0 0

Hello,

 

I've been doing research on implementing Apple Pay into our app. We're using React Native for our framework. I noticed that the main way to implement Apple Pay is by using the Mobile Buy SDK, which is for pure native iOS applications only. I did find a React Native version of the Mobile Buy SDK, but in the details it says it's missing Apple Pay functionality. As of now we're using the Checkouts API, which only accepts credit card info. Is there another way for us to implement Apple Pay? Perhaps something in development? The only way I can think of right now is perhaps writing our own bridge between React Native and the Mobile Buy SDK app.

 

Thanks,

SandBox Commerce

0 Likes
Shopify Staff
Shopify Staff
106 20 22

Hey @Sterling_Smith ,

 

As of right now if you are building a mobile app for your Shopify store and would like to implement Apple Pay, the easiest solution would be to use the Mobile Buy SDK iOS. There is no official Shopify Mobile Buy SDK built in React Native.

 

However it is important to note that the Mobile Buy SDK is built on-top of the Storefront API, which you can directly leverage in your React Native app. The Shopify Mobile Buy SDK iOS implements Apple Pay by providing a module called "PaySession" which essentially just generates PKPaymentAuthorizationController on your behalf and presents it to the customer. Then once the customer authorizes in Apple Pay, you will receive an encrypted payment token and other associated information which can then be used to complete the checkout with the Storefront API mutation checkoutCompleteWithTokenizedPayment. You can theoretically try to leverage this or bridge this into your React Native app to implement the Apple Pay functionality.  

 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
New Member
3 0 0

Thank you for your insight, I'll do some research into Storefront API and get back to you if I have any trouble.  Really appreciate the fast response!

0 Likes
New Member
3 0 0

Hi Hassain,

 

I've been pouring over the documentation and cannot find what you mentioned.  I did find the mutation for checkoutCompleteWithCreditCardV2 but that's not quite what I'm looking for.  Short of reverse engineering the iOS Mobile Buy SDK code, is there anywhere else I should be looking?

 

Thanks

0 Likes
Shopify Staff
Shopify Staff
106 20 22

Hey @Sterling_Smith ,

 

You are correct that the checkoutCompleteWithCreditCardV2 mutation is not what you would need to satisfy your use case. The checkoutCompleteWithTokenizedPaymentV2 I believe should be the mutation you would want to use to help accomplish what you are looking for. This mutation uses the encrypted tokenized payment string retrieved from the Payment Gateway as an input in order to complete the checkout for your store.

 

We have some documentation on how to use this Storefront API mutation to complete checkouts with tokenized payments for payment gateways like Stripe and Spreedly (https://help.shopify.com/en/api/guides/sales-channel-sdk/completing-a-payment and 
https://help.shopify.com/en/api/storefront-api/guides/checkout-guide#stripe) that you could leverage. But in regards to accomplishing this with Apple Pay specifically, I think your best bet is looking through our open source iOS Mobile Buy SDK and bridging it over from there
 

Hassain | Developer Support Specialist @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes