mastercard / web-native-integration-ios Goto Github PK

Mastercard Javascript library provides Client-side APIs to complete Click-to-Pay checkout experience. Merchant partners can use this Sample Merchant application as a guide to integrate Mastercard Javascript library with native mobile application.

• Overview
• Steps to Integrate
• Communication between Native and Web layer
• Checkout Flows
• DCF Action Sheet

The sample app shows integration of Mastercard Javascript methods which can be used to perform Recognized User, Recognition of a User through Email lookup or First Time User Checkout flow. Integrators can test the different checkout flows from the sample Merchant screen as below:

1. Download Mastercard Javascript library by adding <script> tag on index.html

<script src="https://sandbox.src.mastercard.com/srci/merchant/2/lib.js?dpaId={DpaId}&locale=en_US"></script>

2. Add srcDpaId on NewMerchantViewController.swift

IMPORTANT: Do not build the sample app without providing srcDpaId. Failing to do so will block user from calling any Mastercard APIs.

var srcDpaId = ""

It is important to have the same DpaId on both index.html and NewMerchantViewController.swift before building the Sample app.

1. Native to Web Layer: API calls from native layer are invoked by calling the evaluateJavascript method on webView object.

Merchant application converts the request object to JSON string before invoking Javascript APIs.

Example: init API called from WebViewIntegration.swift and API invocation completes on Javascript library.

self.evaluateJavaScript("initSdk(\"ios\", JSON.stringify(\(initRequestString)))")

2. API call inside Web layer:

Example: init API being invoked on click2Pay object provided by Mastercard Javascript library.

function initSdk(platform, reqString) {
  console.log('inside init:')
  console.log("init req: "+ reqString);

  let request = JSON.parse(reqString);
  let promise = new Promise(
    function(resolve, reject) {
      click2payInstance.init(request).then(resolve)
    }
  );
  promise.then(
    value => {
      sendMessageToNative(platform, value, "init");
    },
    error => {
      sendMessageToNative(platform, error, "init");
      console.log('Init API rejected '+ error)
    }
  );
}

3. Web Layer to Native: Once the API call is complete, the results are passed back to native layer from web layer using WebView.JavascriptInterface

Example: init API results being sent from javascript function back to Native Android activity. Results are received on JavascriptInterface on Android Activity.

function sendMessageToNative(json, methodName){
  console.log("sending value to native...")
    var formattedJSON = JSON.stringify(json, null, 2);
    window.webkit.messageHandlers.jsMessageHandler.postMessage(formattedJSON);
}

1. New User Checkout - To test this checkout flow call APIs in this order on Sample App: init, encryptCard, checkoutWithNewCard. Once checkout is initiated, this will launch DCF window and user can complete checkout.

2. Return User Checkout (Unrecognized flow) - To test this checkout flow call APIs in this order on Sample App: init, idLookup, initiateValidation, validate, getCards, checkoutWithCard

3. Recognized User Checkout(Remembered User flow) - To test this checkout flow either New user checkout or Return user checkout flow must be completed with "Remember Me" option selected during checkout experience. Now the cookie is persisted on webView and user can test Recognized user flow by calling these APIs - init, getCards, checkoutWithCard

Sample app provides optional styling of DCF window to be displayed as action sheet. This action sheet style mode can be enabled/disabled by selecting the checkbox located on top of the Merchant screen.

DCF Action Sheet Mode	DCF Regular Mode