1. React
  2. Chain React
  3. 2017
  4. PayPal Checkout with React Native

PayPal Checkout with React Native

Poornima Venkatakrishnan at Chain React 2017

This talk is a technical deep-dive of how we use react-native as a means to deliver Checkout experience in our open sourced Paypal SDK. It will also layout how react-native has given us the power to steer without merchants having to reintegrate and republish with every incremental SDK release. - Why ? ‘Pay with Paypal’ is an option many of us use while shopping online . While Paypal has a solid web experience, we are still experimenting a good solve for the mobile ecosystem. Since we aim for stellar experiences we will need to iterate and learn quickly by A/B testing. But at the same time we need to be mindful of not having to force our merchants to continuously upgrade Paypal SDKs and publish updates on the app store. After some research/ investigation into options, we decided to build our SDK using react-native. - How ? The SDK will be a native shell which will place a react-native root view into the Merchants View Controller that is initializing the Paypal SDK. This root view acts as a seed to initialize Paypal experiences. Whenever the react root view is initialized, we will pull down a checkout react-native bundle from the cloud which will host the payment experience within. When the SDK detects that a Paypal payment is initiated, the react-native layer is informed and it hosts the appropriate experience to complete the Payment (either opens a SFVC with the right mobile optimized web experience or natively put up a Paypal Pay sheet modal). Once the Payment is complete we close out the react-native hosted experience and the native shell places the merchant app in the right state, post payment. By this, we could sandbox and control the Paypal payment experience we host within the react-native layer, without interfering with the merchant app’s workflow. And the Paypal SDK integration will be a one-time easy process for the merchants !