@primer-io/react-native 0.15.4 → 2.0.0

package/README.md

@@ -10,49 +10,139 @@ Official React Native SDK plugin for [Primer](https://primer.io)
 <img src="https://img.shields.io/npm/v/@primer-io/react-native" />
 </p>
 
----
+**Note:** This quick start guide addresses the platform-specific integration points only. As everything prior to that (e.g. creating a client token) is the same for all the guidelines.
 
-The simplest payments integration, ever. Integrate payments once with just a few lines of code, and empower ops teams to automate complex business logic with Primer.
+# Set up the Universal Checkout
 
-### Features of the React Native SDK
+## Step 1. Install the SDK
 
-- 💳 Create great payment experiences with our Universal Checkout
+Add the SDK package.
 
-- 🧩 Connect and configure new payment methods with only a few lines of code
+```sh
+\# With yarn
+yarn add @primer-io/react-native
+
+\# With npm
+npm i @primer-io/react-native --save
+```
+
+Once you are done, navigate to the \/ios folder and run pod install.
 
-- ✅ Dynamically handle 3DS 2.0 across processors and be SCA ready
+## Step 2. Initialize the SDK
 
-- ♻️ Store payment methods for one-click checkout, recurring and repeat payments
+Import the Primer SDK, construct your settings and call the SDK’s configure function.
 
-- 🔒 Always PCI compliant without redirecting customers
+```js
+import * as React from 'react';
+import {
+  Primer,  
+  PrimerSettings,
+  PrimerCheckoutData
+} from '@primer-io/react-native';
+
+const CheckoutScreen = (props: any) => {
+
+  const onCheckoutComplete = (checkoutData: PrimerCheckoutData) => {
+    // Perform an action based on the payment creation response
+    // ex. show success screen, redirect to order confirmation view, etc.
+  };
+
+  React.useEffect(() => {
+    const settings: PrimerSettings = {
+      onCheckoutComplete: onCheckoutComplete
+    };
+
+    Primer.configure(settings)
+      .then(() => {
+        // SDK is initialized sucessfully
+      })
+      .catch (err => {
+        // SDK failed to initialize
+      })
+  }, []);
+}
+```
 
----
+## Step 3. Generate a client token
 
-## 💾 Installation
+**Note:** Check our guide on how to set up the client session [here](https://primer.io/docs/accept-payments/manage-client-sessions).
 
-```sh
-npm i @primer-io/react-native
+Make an API call to your backend to fetch a Client Token. Here is a simple example of how it can be done from your component. Once successful store your Client Token for future use.
+
+```js
+const CheckoutScreen = (props: any) => {
+
+  // ...
+
+  const onUniversalCheckoutButtonTapped = async () => {
+    try {
+      // Make an API request to your backend to create a client session
+      // and fetch a client token.
+      const clientToken = await createClientSession(clientSessionRequestParams);
+    } catch (err) {
+      // ...
+    }
+  };
+}
 ```
 
-## 🔧 Usage
+## Step 4. Show Universal Checkout
+
+At this step, you should have a Client Token available. Call the `showUniversalCheckout(clientToken)` function, with the Client Token (as shown below) to present Universal Checkout.
 
 ```js
-import { Primer } from '@primer-io/react-native';
+const CheckoutScreen = (props: any) => {
 
-// fetch Primer client token from backend.
-const token: string = await fetchClientToken();
+  // ...
 
-// configure listeners and settings.
-const onTokenizeSuccess = async (t, handler) => {
-  const payment = await createPayment(t);
-  handler.handleSuccess(); // resume the checkout flow with success message.
-};
+  const onUniversalCheckoutButtonTapped = async () => {
+    try {
+      // ...
 
-// show Universal Checkout with client token and config.
-Primer.showUniversalCheckout(token, { onTokenizeSuccess });
+      // Present Universal Checkout
+      await Primer.showUniversalCheckout(clientToken);
+    } catch (err) {
+      // ...
+    }
+  };
+}
 ```
 
-For more info & help troubleshooting, check out our 🔥 [docs](https://www.notion.so/primerio/Quick-Start-6c5eb61e5bbe426ca66244259e06048e)
+## Full Code Snippet
+
+```js
+import * as React from 'react';
+import {
+  Primer,  
+  PrimerSettings,
+  PrimerCheckoutData
+} from '@primer-io/react-native';
+
+const CheckoutScreen = async (props: any) => {
+  const onCheckoutComplete = (checkoutData: PrimerCheckoutData) => {
+    // Show a success screen
+  };
+  
+  const onUniversalCheckoutButtonTapped = async () => {
+    const settings: PrimerSettings = {
+      onCheckoutComplete: onCheckoutComplete
+    };
+    
+    // Configure the SDK
+    await Primer.configure(settings);
+    
+    // Ask your backend to create a client session
+    const clientToken = await createClientSession(clientSessionRequestParams);
+    
+    // Present Universal Checkout
+    await Primer.showUniversalCheckout(clientToken);
+  };
+}
+```
+
+You should now be able to see Universal Checkout! The user can now interact with Universal Checkout, and the SDK will create the payment. The payment’s data will be returned in the onCheckoutComplete callback configured in Step 2.
+
+**Note:** For more info & help troubleshooting, check out our [docs](http://primer.io/docs).
 
 ## 📚 License
 

package/android/build.gradle

@@ -4,6 +4,7 @@ buildscript {
 
   repositories {
     google()
+    mavenLocal()
     jcenter()
   }
 
@@ -52,9 +53,13 @@ android {
     sourceCompatibility JavaVersion.VERSION_1_8
     targetCompatibility JavaVersion.VERSION_1_8
   }
+  kotlinOptions {
+    freeCompilerArgs += '-Xjvm-default=all'
+  }
 }
 
 repositories {
+  mavenLocal()
   mavenCentral()
   jcenter()
   google()
@@ -131,6 +136,6 @@ dependencies {
   // noinspection GradleDynamicVersion
   api 'com.facebook.react:react-native:+'
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.1"
-  implementation 'io.primer:android:1.13.0'
+  implementation "org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.3"
+  implementation 'io.primer:android:2.0.0'
 }

package/android/gradle.properties

@@ -1,4 +1,4 @@
-ReactNative_kotlinVersion=1.5.0
-ReactNative_compileSdkVersion=29
+ReactNative_kotlinVersion=1.6.21
+ReactNative_compileSdkVersion=31
 ReactNative_buildToolsVersion=29.0.2
-ReactNative_targetSdkVersion=29
+ReactNative_targetSdkVersion=31

package/android/src/main/java/com/primerioreactnative/PrimerRN.kt

@@ -5,77 +5,48 @@ import com.facebook.react.bridge.*
 import com.facebook.react.modules.core.DeviceEventManagerModule
 import com.primerioreactnative.datamodels.*
 import com.primerioreactnative.utils.PrimerImplementedRNCallbacks
+import com.primerioreactnative.utils.convertJsonToMap
 import com.primerioreactnative.utils.errorTo
-import io.primer.android.PaymentMethodIntent
 import io.primer.android.Primer
-import io.primer.android.model.dto.PrimerConfig
-import io.primer.android.model.dto.PrimerPaymentMethod
+import io.primer.android.PrimerSessionIntent
+import io.primer.android.data.configuration.models.PrimerPaymentMethodType
+import io.primer.android.data.settings.PrimerSettings
 import kotlinx.serialization.decodeFromString
 import kotlinx.serialization.encodeToString
 import kotlinx.serialization.json.Json
 import org.json.JSONObject
 
-
 class PrimerRN(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
-
-  private var settings: PrimerSettingsRN = PrimerSettingsRN()
-  private var theme: PrimerThemeRN = PrimerThemeRN()
-  private var intent: PaymentMethodIntent? = null
-  private var paymentMethod: PrimerPaymentMethod? = null
-
   private var mListener = PrimerRNEventListener()
-
-  private var sdkWasInitialised = false
-
   private val json = Json { ignoreUnknownKeys = true }
 
   init {
     mListener.sendEvent = { eventName, paramsJson -> sendEvent(eventName, paramsJson) }
-    mListener.sendError = { paramsJson -> checkoutFailed(paramsJson) }
+    mListener.sendError = { paramsJson -> onError(paramsJson) }
+    mListener.sendErrorWithCheckoutData =
+      { paramsJson, checkoutData -> onError(paramsJson, checkoutData) }
   }
 
   override fun getName(): String = "NativePrimer"
 
   @ReactMethod
-  fun configureWithSettings(settingsStr: String, promise: Promise) {
+  fun configure(settingsStr: String, promise: Promise) {
     try {
       Log.d("PrimerRN", "settings: $settingsStr")
-      val settings = json.decodeFromString<PrimerSettingsRN>(settingsStr)
-      this.settings = settings
-      startSdk()
+      val settings =
+        if (settingsStr.isBlank()) PrimerSettingsRN() else json.decodeFromString(
+          settingsStr
+        )
+      startSdk(settings.toPrimerSettings())
       promise.resolve(null)
     } catch (e: Exception) {
       Log.e("PrimerRN", "configure settings error: $e")
-      val exception = ErrorTypeRN.ParseJsonFailed errorTo "failed to parse settings."
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
-    }
-  }
-
-  @ReactMethod
-  fun configureWithTheme(themeStr: String, promise: Promise) {
-    try {
-      Log.d("PrimerRN", "theme: $themeStr")
-      val theme = json.decodeFromString<PrimerThemeRN>(themeStr)
-      this.theme = theme
-      startSdk()
-      promise.resolve(null)
-    } catch (e: Exception) {
-      Log.e("PrimerRN", "configure theme error: $e")
-      val exception = ErrorTypeRN.ParseJsonFailed errorTo "failed to parse theme."
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      val exception = ErrorTypeRN.NativeBridgeFailed errorTo "failed to parse settings."
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
     }
   }
 
-  @ReactMethod
-  fun showUniversalCheckout(promise: Promise) {
-    val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
-      "This method is deprecated. Use the new showUniversalCheckoutWithClientToken method"
-    checkoutFailed(exception)
-    promise.reject(exception.errorId, exception.errorDescription)
-  }
-
   @ReactMethod
   fun showUniversalCheckoutWithClientToken(
     clientToken: String,
@@ -85,62 +56,54 @@ class PrimerRN(reactContext: ReactApplicationContext) : ReactContextBaseJavaModu
       Primer.instance.showUniversalCheckout(reactApplicationContext.applicationContext, clientToken)
       promise.resolve(null)
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
+      val exception = ErrorTypeRN.NativeBridgeFailed errorTo
         "Primer SDK failed: ${e.message}"
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
     }
   }
 
   @ReactMethod
-  fun showVaultManager(promise: Promise) {
-    val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
-      "This method is deprecated. Use the new showUniversalCheckoutWithClientToken method"
-    checkoutFailed(exception)
-    promise.reject(exception.errorId, exception.errorDescription)
-  }
-
-  @ReactMethod
-  fun showVaultManager(clientToken: String, promise: Promise) {
+  fun showVaultManagerWithClientToken(clientToken: String, promise: Promise) {
     try {
       Primer.instance.showVaultManager(reactApplicationContext.applicationContext, clientToken)
       promise.resolve(null)
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
+      val exception = ErrorTypeRN.NativeBridgeFailed errorTo
         "Primer SDK failed: ${e.message}"
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
     }
   }
 
   @ReactMethod
   fun showPaymentMethod(
-    clientToken: String,
     paymentMethodTypeStr: String,
     intentStr: String,
+    clientToken: String,
     promise: Promise
   ) {
+    val intent: PrimerSessionIntent
     try {
-      this.intent = PaymentMethodIntent.valueOf(intentStr)
+      intent = PrimerSessionIntent.valueOf(intentStr.uppercase())
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.ParseJsonFailed errorTo "failed to parse intent."
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      val exception = ErrorTypeRN.NativeBridgeFailed errorTo "Intent $intentStr is not valid."
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
       return
     }
+    val paymentMethod: PrimerPaymentMethodType
     try {
-      val paymentMethod = PrimerPaymentMethod.valueOf(paymentMethodTypeStr)
-      this.paymentMethod = paymentMethod
+      paymentMethod = getPrimerPaymentMethod(paymentMethodTypeStr)
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.CheckoutFlowFailed errorTo "failed to parse payment method type."
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      val exception =
+        ErrorTypeRN.NativeBridgeFailed errorTo "Payment method type $paymentMethodTypeStr is not valid."
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
       return
     }
 
     try {
-      val paymentMethod = this.paymentMethod ?: return
-      val intent = this.intent ?: return
       Primer.instance.showPaymentMethod(
         reactApplicationContext.applicationContext,
         clientToken,
@@ -149,60 +112,81 @@ class PrimerRN(reactContext: ReactApplicationContext) : ReactContextBaseJavaModu
       )
       promise.resolve(null)
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
+      val exception = ErrorTypeRN.NativeBridgeFailed errorTo
         "Primer SDK failed: ${e.message}"
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
     }
   }
 
   @ReactMethod
-  fun handleNewClientToken(clientToken: String, promise: Promise) {
-    mListener.onClientTokenCallback(clientToken, null)
-    mListener.onClientSessionActions(clientToken, null)
-    mListener.onTokenizeSuccess(clientToken, null)
-    mListener.onResumeSuccess(clientToken, null)
-    removeCallbacksAndHandlers()
+  fun dismiss(promise: Promise) {
+    Primer.instance.dismiss()
     promise.resolve(null)
   }
 
+  // region tokenization handlers
   @ReactMethod
-  fun handleError(errorStr: String, promise: Promise) {
-    try {
-      val err = json.decodeFromString<PrimerErrorRN>(errorStr)
-      mListener.onClientTokenCallback(null, err)
-      mListener.onClientSessionActions(null, err)
-      mListener.onTokenizeSuccess(null, err)
-      mListener.onResumeSuccess(null, err)
-      removeCallbacksAndHandlers()
-      promise.resolve(null)
-    } catch (e: Exception) {
-      val exception = PrimerErrorRN(
-        ErrorTypeRN.CheckoutFlowFailed.name,
-        "Primer SDK failed: ${e.message}"
-      )
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
-    }
+  fun handleTokenizationNewClientToken(newClientToken: String, promise: Promise) {
+    mListener.handleTokenizationNewClientToken(newClientToken)
+    promise.resolve(null)
   }
 
   @ReactMethod
-  fun handleSuccess(promise: Promise) {
-    try {
-      mListener.onClientTokenCallback(null, null)
-      mListener.onClientSessionActions(null, null)
-      mListener.onTokenizeSuccess(null, null)
-      mListener.onResumeSuccess(null, null)
-      removeCallbacksAndHandlers()
-      promise.resolve(null)
-    } catch (e: Exception) {
-      val exception = ErrorTypeRN.CheckoutFlowFailed errorTo
-        "Primer SDK failed: ${e.message}"
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
-    }
+  fun handleTokenizationSuccess(promise: Promise) {
+    mListener.handleTokenizationSuccess()
+    promise.resolve(null)
   }
 
+  @ReactMethod
+  fun handleTokenizationFailure(errorMessage: String?, promise: Promise) {
+    mListener.handleTokenizationFailure(errorMessage.orEmpty())
+    promise.resolve(null)
+  }
+  // endregion
+
+  // region resume handlers
+  @ReactMethod
+  fun handleResumeNewClientToken(newClientToken: String, promise: Promise) {
+    mListener.handleResumeNewClientToken(newClientToken)
+    promise.resolve(null)
+  }
+
+  @ReactMethod
+  fun handleResumeSuccess(promise: Promise) {
+    mListener.handleResumeSuccess()
+    promise.resolve(null)
+  }
+
+  @ReactMethod
+  fun handleResumeFailure(errorMessage: String?, promise: Promise) {
+    mListener.handleResumeFailure(errorMessage.orEmpty())
+    promise.resolve(null)
+  }
+  // endregion
+
+  // region payment handlers
+  @ReactMethod
+  fun handlePaymentCreationContinue(promise: Promise) {
+    mListener.handlePaymentCreationContinue()
+    promise.resolve(null)
+  }
+
+  @ReactMethod
+  fun handlePaymentCreationAbort(errorMessage: String?, promise: Promise) {
+    mListener.handlePaymentCreationAbort(errorMessage.orEmpty())
+    promise.resolve(null)
+  }
+  // endregion
+
+  // region error handlers
+  @ReactMethod
+  fun showErrorMessage(errorMessage: String?, promise: Promise) {
+    mListener.handleErrorMessage(errorMessage.orEmpty())
+    promise.resolve(null)
+  }
+  // endregion
+
   @ReactMethod
   fun setImplementedRNCallbacks(implementedRNCallbacksStr: String, promise: Promise) {
     try {
@@ -212,32 +196,28 @@ class PrimerRN(reactContext: ReactApplicationContext) : ReactContextBaseJavaModu
       this.mListener.setImplementedCallbacks(implementedRNCallbacks)
       promise.resolve(null)
     } catch (e: Exception) {
-      val exception = ErrorTypeRN.ParseJsonFailed errorTo "Failed to parse implemented callbacks"
-      checkoutFailed(exception)
-      promise.reject(exception.errorId, exception.errorDescription, e)
+      val exception =
+        ErrorTypeRN.NativeBridgeFailed errorTo "Implemented callbacks $implementedRNCallbacksStr is not valid."
+      onError(exception)
+      promise.reject(exception.errorId, exception.description, e)
     }
   }
 
-  private fun removeCallbacksAndHandlers() {
-    mListener.removeCallbacksAndHandlers()
+  private fun startSdk(settings: PrimerSettings) {
+    Primer.instance.configure(settings, mListener)
   }
 
-  private fun startSdk() {
-    val theme = theme.format()
-    val settings = settings.format()
-    val config = PrimerConfig(theme, settings)
-
-    Primer.instance.configure(config, mListener)
-    sdkWasInitialised = true
-  }
-
-  private fun checkoutFailed(exception: PrimerErrorRN) {
+  private fun onError(exception: PrimerErrorRN, checkoutDataRN: PrimerCheckoutDataRN? = null) {
     val params = Arguments.createMap()
     val errorJson = JSONObject(Json.encodeToString(exception))
-    val data = Arguments.createMap()
-    prepareData(data, errorJson)
-    params.putMap(Keys.ERROR, data)
-    sendEvent(PrimerEventsRN.OnError.string, params)
+    val errorData = prepareData(errorJson)
+    params.putMap(Keys.ERROR, errorData)
+    checkoutDataRN?.let {
+      val checkoutDataJson = JSONObject(Json.encodeToString(it))
+      val checkoutData = prepareData(checkoutDataJson)
+      params.putMap(Keys.CHECKOUT_DATA, checkoutData)
+    }
+    sendEvent(PrimerEvents.ON_ERROR.eventName, params)
   }
 
   private fun sendEvent(name: String, params: WritableMap) {
@@ -247,28 +227,27 @@ class PrimerRN(reactContext: ReactApplicationContext) : ReactContextBaseJavaModu
   }
 
   private fun sendEvent(name: String, data: JSONObject?) {
-    val params = Arguments.createMap()
-    prepareData(params, data)
+    val params = prepareData(data)
     reactApplicationContext.getJSModule(
       DeviceEventManagerModule.RCTDeviceEventEmitter::class.java
     ).emit(name, params)
   }
 
-  private fun prepareData(params: WritableMap, data: JSONObject?) {
-    data?.keys()?.forEach { key ->
-      when (val dataValue = data.opt(key)) {
-        is String -> params.putString(key, dataValue)
-        is Boolean -> params.putBoolean(key, dataValue)
-        is Double -> params.putDouble(key, dataValue)
-        is Int -> params.putInt(key, dataValue)
-        is JSONObject -> prepareData(params, dataValue)
-        else -> params.putNull(key)
-      }
+  private fun prepareData(data: JSONObject?): WritableMap {
+    return data?.let { convertJsonToMap(data) } ?: Arguments.createMap()
+  }
+
+  private fun getPrimerPaymentMethod(paymentMethodTypeStr: String): PrimerPaymentMethodType {
+    if (PrimerPaymentMethodType.PAYMENT_CARD.name == paymentMethodTypeStr) {
+      return PrimerPaymentMethodType.PAYMENT_CARD
     }
+
+    return PrimerPaymentMethodType.valueOf(paymentMethodTypeStr)
   }
 }
 
 internal object Keys {
   const val ERROR = "error"
   const val RESUME_TOKEN = "resumeToken"
+  const val CHECKOUT_DATA = "checkoutData"
 }