@wpay/frames - npm Package Compare versions

Comparing version 1.0.2 to 2.0.4

dist/actions/actionBase.d.ts

 import { IAction } from 'src/actions/types/IAction';
-import ElementControl from '../controls/elementControl';
+import FramesControl from '../controls/framesControl';
 import IActionResponse from './types/IActionResponse';
-import IElementsService from 'src/services/types/IElementsService';
+import IFramesService from 'src/services/types/IFramesService';
 import ILoggingService from 'src/services/types/ILoggingService';
 export default abstract class ActionBase implements IAction {
+    framesService: IFramesService;
     actionConfig: IActionResponse;
-    props: any;
-    elements: Map<string, ElementControl>;
-    protected elementsService: IElementsService;
+    options: any;
+    frames: Map<string, FramesControl>;
     logger: ILoggingService;
-    constructor(elementsService: IElementsService, logger: ILoggingService);
+    constructor(framesService: IFramesService, logger: ILoggingService);
     errors(): any[];
     removeElements(): void;
-    createElement(elementType: string, targetElementId: string, options?: any): void;
+    createFramesControl(framesControlType: string, targetElementId: string, options?: any): void;
 }

dist/actions/captureCard.d.ts

 import ActionBase from './actionBase';
 import ICaptureCard from './types/ICaptureCard';
+import IFramesService from '../services/types/IFramesService';
+import IThreeDSService from '../services/types/IThreeDSService';
+import ILoggingService from '../services/types/ILoggingService';
 export default class CaptureCard extends ActionBase implements ICaptureCard {
-    start(useEveryDayPay: boolean): Promise<void>;
+    private threeDSService;
+    constructor(framesService: IFramesService, threeDSService: IThreeDSService, logger: ILoggingService);
+    start(): Promise<void>;
     validate(): Promise<void>;
     submit(): Promise<void>;
-    complete(): Promise<any>;
+    complete(save?: boolean, challengeResponses?: any[]): Promise<any>;
     clear(): Promise<void>;
 }

dist/actions/index.d.ts

@@ -5,3 +5,5 @@ declare const ActionTypes: {
     UpdateCard: symbol;
+    ValidateCard: symbol;
+    ValidatePayment: symbol;
 };
 export { ActionTypes };

dist/actions/stepUp.d.ts

 import ActionBase from './actionBase';
 import IStepUp from './types/IStepUp';
 export default class StepUp extends ActionBase implements IStepUp {
-    start(useEveryDayPay: boolean): Promise<void>;
+    start(): Promise<void>;
     validate(): Promise<void>;
     submit(): Promise<boolean>;
-    complete(): Promise<any>;
+    complete(challengeResponses?: any[]): Promise<any>;
     clear(): Promise<void>;
 }

dist/actions/types/IAction.d.ts

 import IActionResponse from './IActionResponse';
 export interface IAction {
     actionConfig: IActionResponse;
-    props: any;
-    createElement(elementType: string, targetElement: string, options?: any): void;
+    options: any;
+    createFramesControl(framesControlType: string, targetElement: string, options?: any): void;
     errors(): any[];
 }

dist/actions/updateCard.d.ts

 import ActionBase from './actionBase';
 import IUpdateCard from './types/IUpdateCard';
 export default class UpdateCard extends ActionBase implements IUpdateCard {
-    start(useEveryDayPay: boolean): Promise<void>;
+    start(): Promise<void>;
     validate(): Promise<void>;
     submit(): Promise<void>;
-    complete(): Promise<any>;
+    complete(challengeResponses?: any[]): Promise<any>;
     clear(): Promise<void>;
 }

dist/index.d.ts

@@ -1,6 +0,5 @@
-import AuthorisationService from './services/authorizationService';
-import ElementsSDK from './customer/elementsSDK';
+import FramesSDK from './framesSDK';
 import { ActionTypes } from './actions';
 import { LogLevel } from './domain/logLevel';
-import { ElementEventType } from './controls/elementEventType';
-export { AuthorisationService, ActionTypes, LogLevel, ElementEventType, ElementsSDK };
+import { FramesEventType } from './domain/framesEventType';
+export { ActionTypes, LogLevel, FramesEventType, FramesSDK };

dist/services/index.d.ts

 declare const ServiceTypes: {
-    ElementsService: symbol;
+    FramesService: symbol;
+    ThreeDSService: symbol;
     PaymentInstrumentService: symbol;
@@ -4,0 +5,0 @@ PaymentRequestService: symbol;

package.json

 {
   "name": "@wpay/frames",
-  "version": "1.0.2",
+  "version": "2.0.4",
   "description": "Development kit to assist in building clients that use the woolies API",
-  "main": "./dist/elementsSDK.js",
-  "module": "./dist/elementsSDK.js",
+  "main": "./dist/framesSDK.js",
+  "module": "./dist/framesSDK.js",
   "typings": "./dist/index.d.ts",
@@ -13,3 +13,3 @@ "files": [
     "build": "webpack --mode development",
-    "test": "jest --silent",
+    "test": "jest",
     "dist": "webpack --mode production"
@@ -21,18 +21,18 @@ },
     "axios": "^0.21.1",
-    "inversify": "^5.1.1",
+    "inversify": "^5.0.1",
     "reflect-metadata": "^0.1.13",
-    "uuidv4": "^6.2.10"
+    "uuidv4": "^6.2.3"
   },
   "devDependencies": {
     "@types/axios": "^0.14.0",
-    "@types/jest": "^26.0.23",
-    "@types/node": "^14.17.3",
+    "@types/jest": "^26.0.10",
+    "@types/node": "^14.14.37",
     "clean-webpack-plugin": "^3.0.0",
     "jest": "^26.4.0",
     "jest-fetch-mock": "^3.0.3",
-    "ts-jest": "^26.5.6",
-    "ts-loader": "^8.3.0",
+    "ts-jest": "^26.2.0",
+    "ts-loader": "^8.0.2",
     "tslib": "^1.13.0",
     "typescript": "^3.9.9",
-    "webpack": "^4.46.0",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
@@ -45,4 +45,7 @@ },
       "./test/setupJest.js"
+    ],
+    "transformIgnorePatterns": [
+      "<rootDir>/src/resources/"
     ]
   }
 }

README.md

@@ -25,3 +25,3 @@ # Installation
 
-   `<script src="./node_modules/@wpay/frames/dist/elementsSDK.js" />`
+   `<script src="./node_modules/@wpay/frames-sdk/dist/framesSDK.js"></script>`
 
@@ -33,6 +33,8 @@
    <script>
-      let apiKey = 'YOUR_API_KEY';
-      let apiHost = "https://dev.mobile-api.woolworths.com.au/wow/v1/pay/instore";
-      let authorizationToken = 'YOUR_AUTH_TOKEN' // Format: Bearer token_value
-      let sdk = new ELEMENTS.ElementsSDK(apiKey, authorizationToken, apiHost, ELEMENTS.LogLevel.DEBUG);
+        const sdk = new FRAMES.FramesSDK({
+            apiKey: 'YOUR_API_KEY', 
+            authToken: 'YOUR_AUTH_TOKEN' // Format: Bearer token_value, 
+            apiBase: "https://dev.mobile-api.woolworths.com.au/wow/v1/pay/instore", 
+            logLevel: FRAMES.LogLevel.DEBUG
+        });
    </script>
@@ -44,3 +46,3 @@ ```
     ```
-    let action = sdk.createAction(ELEMENTS.ActionTypes.CaptureCard);
+    let action = sdk.createFramesControl(FRAMES.ActionTypes.CaptureCard);
     action.start();
@@ -51,3 +53,3 @@ ```
 
-- Add the credit card capture elements to the page.
+- Add the credit card capture frames to the page.
 
@@ -65,3 +67,3 @@ The SDK attaches new elements to `div` placeholders within your page using the element `id`.
     ```
-    action.createElement('CardGroup', 'cardElement');
+    action.createFramesControl('CardGroup', 'cardElement');
     ```
@@ -96,3 +98,3 @@
 
-   `<script src="./node_modules/@wpay/frames/dist/elementsSDK.js" />`
+   `<script src="./node_modules/@wpay/frames/dist/framesSDK.js" />`
 
@@ -104,16 +106,19 @@
    <script>
-      let apiKey = 'YOUR_API_KEY';
-      let apiHost = "https://dev.mobile-api.woolworths.com.au/wow/v1/pay/instore";
-      let authorizationToken = 'YOUR_AUTH_TOKEN' // Format: Bearer token_value
-      let sdk = new ELEMENTS.ElementsSDK(apiKey, authorizationToken, apiHost, ELEMENTS.LogLevel.DEBUG);
+        const sdk = new FRAMES.FramesSDK({
+            apiKey: 'YOUR_API_KEY', 
+            authToken: 'YOUR_AUTH_TOKEN' // Format: Bearer token_value, 
+            apiBase: "https://dev.mobile-api.woolworths.com.au/wow/v1/pay/instore", 
+            logLevel: FRAMES.LogLevel.DEBUG
+        });
    </script>
    ```
 
-- Start a new card step up action referencing your paymentInstrumentID.
+- Start a new card step up action referencing your paymentInstrumentID and the scheme of the instrument (e.g. VISA)
 
     ```
     let action = sdk.createAction(
-        ELEMENTS.ActionTypes.StepUp,
+        FRAMES.ActionTypes.StepUp,
         {
-            paymentInstrumentId: <YOUR PAYMENT INSTRUMENT ID>
+            paymentInstrumentId: <YOUR PAYMENT INSTRUMENT ID>,
+            scheme: <PAYMENT INSTRUMENT SCHEME>
         }
@@ -139,3 +144,3 @@ );
     ```
-    action.createElement('CardCVV', 'cvvElement');
+    action.createFramesControl('CardCVV', 'cvvElement');
     ```
@@ -169,5 +174,5 @@
 ```
-action.createElement('CardNo', 'cardCaptureCardNo', options);
-action.createElement('CardExpiry', 'cardCaptureExpiry', options);
-action.createElement('CardCVV', 'cardCaptureCVV', options);
+action.createFramesControl('CardNo', 'cardCaptureCardNo', options);
+action.createFramesControl('CardExpiry', 'cardCaptureExpiry', options);
+action.createFramesControl('CardCVV', 'cardCaptureCVV', options);
 ```
@@ -185,3 +190,3 @@
 ```
-document.getElementById('cardCaptureCardNo').addEventListener(ELEMENTS.ElementEventType.OnValidated, updateErrors);
+document.getElementById('cardCaptureCardNo').addEventListener(FRAMES.FramesEventType.OnValidated, updateErrors);
 ```
@@ -210,4 +215,4 @@
 errorMap: {
-    'Card No. Required': 'Please enter a valid card number.',
-    `Invalid Card No.`: 'Please enter a valid card number.',
+    'Card Number Required': 'Please enter a valid card number.',
+    `Invalid Card Number`: 'Please enter a valid card number.',
     'Invalid Expiry': 'Please enter a valid expiry.',
@@ -230,3 +235,3 @@ 'Incomplete Expiry': 'Please enter a valid expiry',
     .addEventListener(
-        ELEMENTS.ElementEventType.OnBlur,
+        Frames.FramesEventType.OnBlur,
         () => { // Do something onBlur }
@@ -237,5 +242,5 @@ );
 
-In order to ensure seamless integration with your user experience, styling can either be applied to the container via CSS, or in the case you want to make styling changes inside the frame, be injected into the elements at run time via the options config.
+In order to ensure seamless integration with your user experience, styling can either be applied to the container via CSS, or in the case you want to make styling changes inside the frame, be injected into the Frames at run time via the options config.
 
-An element has several classes that can be used as targets for styling:
+An frame has several classes that can be used as targets for styling:
 - woolies-element
@@ -377,1 +382,222 @@ - container
 ```
+
+# 3DS2
+
+> Please note:  In order to use 3DS you merchant must have had 3DS enabled
+
+The Frames SDK offers 3DS2 verification cababilities by wrapping Cardinals (https://www.cardinalcommerce.com/) 3DS songbird library and orchestrating the 3DS verification process.  There are 2 supported flows, one for verification of cards during the capture process and a second for verification at time of payment.
+
+## Selecting an environment
+
+Cardinal is a little unique in how it does environement management, providing 2 instances of the songbird library, one for staging and a second for production use.  Both versions of the library have been included in the SDK so that there are no code changes required between environments.
+
+In order to protect production the SDK will use the staging version by default.  In order to switch the threeDS enabled actions over to production you need to provide the following in your options when creating the action.
+
+```
+{
+    threeDS: {
+        env: "prod"
+    }
+}
+```
+
+Here is an example of the prod config being used to validate a card:
+
+```
+const enrollmentRequest: any = {
+    sessionId: CARD_CAPTURE_RESPONSE_TOKEN,
+    threeDS: {
+        env: "prod"
+    }
+};
+
+const action = this.framesSDK.createAction(FRAMES.ActionTypes.ValidateCard, enrollmentRequest);
+```
+
+## Card Verification
+
+If you wish to perform 3DS2 verification as part of a card capture exercise, you can do so by specifying that 3DS is required when initializing the card capture action.
+
+- Create a new card capture action, specifying that 3DS is required.
+
+```
+const captureCardAction = this.framesSDK.createAction(
+    FRAMES.ActionTypes.ValidateCard,
+    {
+        threeDS: {
+          requires3DS: true
+        }
+    }
+) as CaptureCard;
+```
+
+- Capture card as per normal.  When you call complete, you will recieve a failure with a 3DS challenge.  For example:
+
+```
+{
+    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiI2MGFmOGExZTBiYWM1ZDUwY2MyNmYzM2MiLCJSZWZlcmVuY2VJZCI6ImUxYzdjNzk4LWE1MjYtNDZhMC05ODU4LTRmNGIwMmNlNzdiOSIsImlzcyI6InBldGN1bHR1cmUiLCJQYXlsb2FkIjp7ImFjdGlvbklkIjoiYzYxZmM1OTgtZDU3ZS00MWM3LTg4YzQtMjhhODlkOTczYzEyIiwib3JkZXJJbmZvcm1hdGlvbiI6eyJhbW91bnREZXRhaWxzIjp7ImN1cnJlbmN5IjoiQVVEIn19fSwiaWF0IjoxNjI3NTE3MTc2LCJqdGkiOiIzNDMyMDBmMC0wNzQ3LTQ1NWUtODdlMi04ZTU5OTc3ZTAzMDEifQ.bghcu82uOuN6LSX_oKPj8f6WjBMhnXK3DYUkfp1F0mc",
+    "message": "3DS TOKEN REQUIRED"}
+}
+```
+
+- Create and start a validateCard action.  This will initialise the cardinal library and perform device data capture.
+
+```
+const enrollmentRequest: any = {
+    sessionId: cardCaptureResponse.token,
+    threeDS: {
+        env: "staging"
+    }
+};
+
+const action = this.framesSDK.createAction(FRAMES.ActionTypes.ValidateCard, enrollmentRequest);
+await action.start();
+```
+
+- Complete the validateCard action.  If successful this will return a challengeResponse that can be used to complete the captureCard action.
+
+```
+const validationResponse = await action.complete();
+```
+
+Here is an example reponse:
+```
+{
+    "threeDSData": {
+        "Validated": true,
+        "ActionCode": "SUCCESS",
+        "ErrorNumber": 0,
+        "ErrorDescription": "Success",
+        "Payment": {
+            "Type": "CCA",
+            "ExtendedData": {
+                "Amount": "0",
+                "CAVV": "MTIzNDU2Nzg5MDEyMzQ1Njc4OTA=",
+                "CurrencyCode": "036",
+                "ECIFlag": "05",
+                "ThreeDSVersion": "2.1.0",
+                "PAResStatus": "Y",
+                "SignatureVerification": "Y"
+            },
+            "ProcessorTransactionId": "Rq6wpFnMVE9tMpRjuIC0"
+        }
+    },
+    "challengeResponse": {
+        "type": "3DS",
+        "instrumentId": undefined,
+        "token": "Rq6wpFnMVE9tMpRjuIC0",
+        "reference": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiI2MGFmOGExZTBiYWM1ZDUwY2MyNmYzM2MiLCJSZWZlcmVuY2VJZCI6ImE4N2VmMWM3LWE4ZjUtNGYzNy05MjY2LTQzMzE0MzNmNjJiOSIsImlzcyI6InBldGN1bHR1cmUiLCJQYXlsb2FkIjp7ImFjdGlvbklkIjoiODQwOTE1YTQtNjkzYS00YmQ3LTk1OTMtZGZjYWM0YjE4NjQ2Iiwib3JkZXJJbmZvcm1hdGlvbiI6eyJhbW91bnREZXRhaWxzIjp7ImN1cnJlbmN5IjoiQVVEIn19fSwiaWF0IjoxNjI3NTE5MzY1LCJqdGkiOiJkZmM4MWRiOC01YTA1LTQzMTUtODBmMy00NDAyNTZiZjA2MTgifQ.BIcz8Jk6cFYYSv872M1mCISEQqAvWJKDeDXv-2qF-ko"
+    }
+}
+```
+
+- Complete the capture card action, providing the challengeResponse.  This should return the standard card capture response with the addition of the 3DS evidence used in its creation.
+
+```
+const cardCaptureResponse = await this.captureCardAction.complete(this.saveCard, [validationResponse.challengeResponse]);
+```
+
+## Payment Verification
+
+If 3DS has been requested as part of the payment flow then you will be required to provide a 3DS challenge response when attempting to make a payment.  To create the challenge response, you need to create and execute the validatePayment action.  This will orchestrate 3DS verifaction using the Cardinal Songbird library and return a chellengeResponse that can then be used when making a payment.
+
+
+
+- Create a paymentRequest using the WPay SDK passing in the config for 3DS.
+>Please note, your schemaId may differ
+
+```
+const request = {
+    merchantReferenceId: 12345,
+    maxUses: 3,
+    timeToLivePayment: 300,
+    grossAmount: 2.40,
+    merchantPayload: {
+        schemaId: '0a221353-b26c-4848-9a77-4a8bcbacf228',
+        payload: { 
+            requires3DS: settings.merchant.require3DSPA 
+        }
+    }
+};
+
+return merchantSDK.payments.createPaymentRequest(request);
+```
+
+- Make a payment.  The request should fail requesting a 3DS challenge response, you will need need the session returned when creating the challengeResponse below.
+
+```
+const transaction = await customerSDK.paymentRequests.makePayment(paymentRequestId, paymentInstrumentId);
+```
+
+Here is an example of rejected transaction with 3DS challenge:
+
+```
+{
+    "type": "PAYMENT",
+    "status": "REJECTED",
+    "rollback": "NOT_REQUIRED",
+    "merchantId": "petculture",
+    "grossAmount": 12.4,
+    "instruments": [
+        {
+            "transactions": [],
+            "instrumentType": "CREDIT_CARD",
+            "paymentInstrumentId": "198821"
+        }
+    ],
+    "executionTime": "2021-07-29T01:53:33.517Z",
+    "transactionId": "9b5eaf73-30d8-4f32-aeb5-e1c4ac2a2a8c",
+    "clientReference": "9b5eaf73-30d8-4f32-aeb5-e1c4ac2a2a8c",
+    "subTransactions": [
+        {
+            "threeDS": {
+                "sessionId": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNGE5MjVhNi0wNzFmLTRiZjEtODA0MS1lOGJmNjEwYzQ4ZTgiLCJpYXQiOjE2Mjc1MjM2MTcuMDk4LCJpc3MiOiJwZXRjdWx0dXJlIiwiT3JnVW5pdElkIjoiNjBhZjhhMWUwYmFjNWQ1MGNjMjZmMzNjIiwiUGF5bG9hZCI6eyJwYXltZW50SW5zdHJ1bWVudElkIjoiMTk4ODIxIiwib3JkZXJJbmZvcm1hdGlvbiI6eyJhbW91bnREZXRhaWxzIjp7ImN1cnJlbmN5IjoiQVVEIiwiYW1vdW50IjoxMi40fX19LCJPYmplY3RpZnlQYXlsb2FkIjp0cnVlLCJSZWZlcmVuY2VJZCI6IjQ1OTA3MzQ5LWU2OTEtNDFkOS05Njk3LTgxYWFiMTc4MzZlZSJ9.W9D3yDqnGDZg3QncvVmiVfe7d8LW2se4yeS2jx7rPZQ",
+                "paymentInstrumentId": "198821"
+            },
+            "errorCode": "3DS_001",
+            "errorMessage": "3DS TOKEN REQUIRED"
+        }
+    ],
+    "paymentRequestId": "34a925a6-071f-4bf1-8041-e8bf610c48e8",
+    "merchantReferenceId": "d0a118eb-613e-4899-8b71-70806abd40be"
+}
+```
+
+- Create and start the validatePayment action.  This will initialise the cardinal library and perform device data capture.
+
+```
+const enrollmentRequest: any = {
+    sessionId, (Provided in the 3DS challenge)
+    paymentInstrumentId, (The payment instrumentID you want to perform 3DS on - must match instrument used in the challenge)
+    threeDS: {
+        env: "staging"
+    }
+};
+
+const action = this.framesSDK.createAction(FRAMES.ActionTypes.ValidatePayment, enrollmentRequest) as ValidatePayment;
+
+await action.start();
+```
+
+- Complete the action.  If successful this will return a 3DS challenge response.
+
+```
+const validationResponse = await action.complete();
+```
+
+- Make the payment providing the challengeResponse in the request.  The payment should now go through successfully.
+
+```
+const transaction = await this.customerSDK.paymentRequests.makePayment(paymentRequestId, paymentInstrumentId, [], undefined, undefined, undefined, [validationResponse.challengeResponse]);
+```
+## 3DS ERROR Codes
+
+- 3DS_001: 3DS Token Required
+- 3DS_002: Invalid session
+- 3DS_003: 3DS Validation Failed
+- 3DS_004: Unsupported 3DS Version
+- 3DS_005: 3DS Service Unavailable
+- 3DS_006: 3DS Authentication Failed
+- 3DS_007: 3DS Validation Timeout
+- 3DS_100: Merchant does not support 3DS
+- 3DS_500: 3DS Unknown Error

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158030

increased by25.36%

Number of package files

36

increased by16.13%

Lines of code

366

increased by14.02%

Number of lines in readme file

589

increased by61.81%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• Updatedinversify@^5.0.1

• Updateduuidv4@^6.2.3