This is an example of Reepay Checkout using React Native app.
This React Native app is built with Expo CLI. The development environment is described in React Native Docs. Install node modules with npm install.
Global Expo CLI is deprecated:
npm install -g expo-cli
Local Expo CLI is now included in the expo package. New Expo CLI.
The project is built with node version v18.16.1, npm version 9.5.1, expo version 49.0.16, React Native version 0.72.6 and React Native WebView 13.2.2.
Runs your app in development mode.
npm run start
Runs your app in Expo development client by scanning the generated QR code. The app can be viewed using Expo for Android or Expo Go for iOS.
npm run tunnel
Like npm run start, but also attempts to open your app on a connected Android device or Android emulator. It requires installation of Android build tools (see React Native Docs for how to run on devices). An Android folder will be generated which can be opened with Android Studio.
npm run android
Like npm run start, but also attempts to open your app on an iOS simulator. An iOS folder will be generated which can be opened in Xcode, which you can run your app on an iOS device. There may be some issues with Apple Silicon processor (M1) if you are using nvm and running your app with npm run ios. Read more under Troubleshooting.
npm run ios
Runs your app in a web browser.
npm run web
If you plan to include your own native code, you will need to "eject" to create your own native builds. The "React Native CLI Quickstart" instructions will be required to continue working on this project.
Warning: Running eject is a permanent action (aside from whatever version control system you use). An ejected app will require you to have an Xcode and/or Android Studio environment set up.
npm run eject
In the app, we will use URL path changes as events that WebView listens to, thus checking whether URL contains accept or cancel in the path.
As we are using WebView by passing session URL, we will receive response with as either Accept URL or Cancel URL as defined in the request body docs:
{
...
"accept_url":"https://webshop.com/accept/order-12345",
"cancel_url":"https://webshop.com/decline/order-12345"
}
In the WebView, we will listen to URL changes when the checkout has completed a redirect, either accept or cancel by checking the URL path. For example the above cancel_url, we will check for /decline meaning the cancel_url has been triggered and WebView has redirected.
For additional parameters to be passed, use query parameters in accept_url or cancel_url. For example, https://webshop.com/decline/order-12345?myEvent=someValue&yourEvent=anotherValue.
Card payment steps:
- Generate Private API Key from your Reepay account.
- Add the Private API Key to Globals.ts or in the app.
- (Optional) Add an unique identifier for your Order and/or Customer handle.
- Generate a charge session.
- Create Reepay checkout in the webview.
- Complete the purchase with a test card or cancel the checkout.
accept.MOV
cancel.MOV
When you have generated a Private API Key from Reepay. Add the value to REEPAY_PRIVATE_API_KEY located at ./src/Globals.ts.
Alternatively, run your app and add it directly in the Private API Key input field.
MobilePay Online must be activated in your Reepay account under Configuration -> Payment Methods -> Mobile Payments. For Reepay Test accounts, it is required to get MobilePay Sandbox app. Reepay Live accounts will use MobilePay app.
Recommended to use npm run tunnel for testing MobilePay Checkout.
MobilePay Online steps:
- Generate Private API Key from your Reepay account.
- Add the Private API Key to Globals.ts or in the app.
- Add a Danish phone number.
- Generate a charge session.
- Create MobilePay checkout in the webview.
- Complete the purchase with a MobilePay test user or reject the payment.
mobilepay.mov
An issue have been found regarding building React Native apps for iOS using Apple Silicon processors (M1). There are conflicts with node version when using nvm thus creating errors on build.
Upon receiving PhaseScriptExecution [CP-User] error when building iOS using npm run ios. Follow this temporary solution.
Note that the iOS build works when running in Xcode. In case of the Xcode build error Could not find node. Make sure it is in bash PATH or set the NODE_BINARY environment variable., please refer to this.