Add integration with CMP (#72)

* add CMP integration

* update CMP integration

* improve CMP integration

* fix linter

* update readme + remove getAccessToken function

* update examples, add default validations and year length

* update readme

* improve cmp bugs

* update examples

* mock access token

* added missed type

* remove console.log

Author: flor-master

.circleci/config.yml

@@ -38,7 +38,7 @@ jobs:
       - run:
           name: Build
           command: |
-            yarn build    
+            yarn build
       - run:
           name: Authenticate with NPM
           command: |
@@ -47,7 +47,7 @@ jobs:
           name: Publish package
           command: |
             npm publish --access public
-  
+
   scan-sast-pr:
     parameters:
       default_branch:
@@ -62,7 +62,7 @@ jobs:
     steps:
       - checkout
       - run:
-          name: "Semgrep diff scan"
+          name: 'Semgrep diff scan'
           command: semgrep ci
 
   scan-sast-full:
@@ -78,7 +78,7 @@ jobs:
     steps:
       - checkout
       - run:
-          name: "Semgrep full scan"
+          name: 'Semgrep full scan'
           command: semgrep ci
 
 workflows:
@@ -101,7 +101,7 @@ workflows:
       - test:
           context:
             - frontend-deploy
-            - circleci    
+            - circleci
       - test-react-17
       - publish:
           context: frontend-deploy
@@ -110,7 +110,7 @@ workflows:
               ignore: /.*/
             tags:
               only: /^v.*/
-  
+
   scheduled-security-scan:
     when: << pipeline.parameters.nightly-security-scan >>
     jobs:
@@ -119,4 +119,3 @@ workflows:
             - security-tools
             - frontend-deploy
             - circleci
-

.eslintrc

@@ -32,4 +32,4 @@
     "import/export": 0,
     "no-unused-vars": "off"
   }
-}
+}

.github/CONTRIBUTING.md

@@ -4,4 +4,4 @@
 2. Create your feature branch (`git checkout -b feaure/my-amazing-feature`)
 3. Commit your changes (`git commit -m 'feature: added amazing feature'`)
 4. Push to the branch (`git push origin feature/my-amazing-feature`)
-5. Open a Pull Request
+5. Open a Pull Request

.github/ISSUE_TEMPLATE.md

@@ -1,30 +1,38 @@
 ## Expected Behavior
+
 <!--- If you're describing a bug, tell us what should happen -->
 <!--- If you're suggesting a change/improvement, tell us how it should work -->
 
 ## Current Behavior
+
 <!--- If describing a bug, tell us what happens instead of the expected behavior -->
 <!--- If suggesting a change/improvement, explain the difference from expected behavior -->
 
 ## Possible Solution
+
 <!--- Not obligatory, but suggest a fix/reason for the bug, -->
 <!--- or ideas how to implement the addition or change -->
 
 ## Steps to Reproduce (for bugs)
+
 <!--- Provide a link to a live example, or an unambiguous set of steps to -->
 <!--- reproduce this bug. Include code to reproduce, if relevant -->
+
 1.
 2.
 3.
 4.
 
 ## Context
+
 <!--- How has this issue affected you? What are you trying to accomplish? -->
 <!--- Providing context helps us come up with a solution that is most useful in the real world -->
 
 ## Your Environment
+
 <!--- Include as many relevant details about the environment you experienced the bug in -->
-* Version used:
-* Browser Name and version:
-* Operating System and version (desktop or mobile):
-* Link to your project:
+
+- Version used:
+- Browser Name and version:
+- Operating System and version (desktop or mobile):
+- Link to your project:

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,26 +1,33 @@
 ## Description
+
 <!--- Describe your changes in detail -->
 
 ## Motivation and Context
+
 <!--- Why is this change required? What problem does it solve? -->
 <!--- If it fixes an open issue, please link to the issue here. -->
 
 ## How Has This Been Tested?
+
 <!--- Please describe in detail how you tested your changes. -->
 <!--- Include details of your testing environment, the tests you ran to -->
 <!--- see how your change affects other areas of the code, etc. -->
 
 ## Screenshots (if appropriate):
 
 ## Types of Changes
+
 <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+
 - [ ] Bug fix (non-breaking change that fixes an issue)
 - [ ] New feature (non-breaking change that adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 
 ## Checklist:
+
 <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
 <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
 - [ ] My code follows the code style of this project.
 - [ ] My change requires a change to the documentation.
 - [ ] I have updated the documentation accordingly.

.github/SECURITY.md

@@ -2,4 +2,4 @@
 
 If you have found a security issue, please do not open GitHub issues or pull requests - this makes the problem immediately visible to everyone, including malicious actors. Security issues in the SDK can be safely reported to VGS by email: [email protected]
 
-**Before reporting security issue please read this** [guide](https://www.verygoodsecurity.com/learn/reporting-security-vulnerability).
+**Before reporting security issue please read this** [guide](https://www.verygoodsecurity.com/learn/reporting-security-vulnerability).

README.md

@@ -98,21 +98,22 @@ export default App;
 
 <br/>
 
-### 3. Define secure input fields:
-
-| Collect.js input type  | Collect.js React Component                  | Default Prop Values                                        |
-| ---------------------- | ------------------------------------------- | ---------------------------------------------------------- |
-| `text`                 | `<VGSCollectForm.TextField/>`               | ` {type: 'text', placeholder: 'Cardholder Name'}`          |
-| `card-number`          | `<VGSCollectForm.CardNumberField/>`         | `{type: 'card-number', placeholder: 'Credit Card Number'}` |
-| `card-expiration-date` | `<VGSCollectForm.CardExpirationDateField/>` | `{type: 'card-expiration-date', placeholder: 'MM/YY'}`     |
-| `card-security-code`   | `<VGSCollectForm.CardSecurityCodeField/>`   | `{type: 'card-security-code', placeholder: 'CVC/CVV'}`     |
-| `password`             | `<VGSCollectForm.PasswordField/>`           | `{type: 'password', placeholder: 'Enter Password'}`        |
-| `ssn`                  | `<VGSCollectForm.SSNField/>`                | `{type: 'ssn', placeholder: 'SSN'}`                        |
-| `zip-code`             | `<VGSCollectForm.ZipCodeField/>`            | `{type: 'zip-code', placeholder: 'Zip Code'}`              |
-| `number`               | `<VGSCollectForm.NumberField/>`             | `{type: 'number', placeholder: 'Number'}`                  |
-| `textarea`             | `<VGSCollectForm/TextareaField/>`           | `{type: 'textarea',  placeholder: 'Comment'}`              |
-| `file`                 | `<VGSCollectForm/FileField/>`               | `{type: 'file',  placeholder: ''}`                         |
-| `date`                 | `<VGSCollectForm/DateField/>`               | `{type: 'date',  placeholder: ''}`                         |
+### 3. Define secure input fields
+
+| **Collect.js input type** | **Collect.js React Component**              | **Default Prop Values**                                                                 |
+|---------------------------|---------------------------------------------|------------------------------------------------------------------------------------------|
+| `text`                    | `<VGSCollectForm.TextField />`              | `{ type: 'text', placeholder: 'Cardholder Name' }`                                      |
+| `text`                    | `<VGSCollectForm.CardholderField />`        | `{ type: 'text', name: 'cardholder', placeholder: 'Cardholder' }`                       |
+| `card-number`             | `<VGSCollectForm.CardNumberField />`        | `{ type: 'card-number', name: 'pan', validations: ['required', 'validCardNumber'], placeholder: 'Credit Card Number' }` |
+| `card-expiration-date`    | `<VGSCollectForm.CardExpirationDateField />`| `{ type: 'card-expiration-date', name: 'exp-date', validations: ['required', 'validCardExpirationDate'], yearLength: 2, placeholder: 'MM/YY' }` |
+| `card-security-code`      | `<VGSCollectForm.CardSecurityCodeField />`  | `{ type: 'card-security-code', name: 'cvc', validations: ['required', 'validCardSecurityCode'], placeholder: 'CVC/CVV' }` |
+| `password`                | `<VGSCollectForm.PasswordField />`          | `{ type: 'password', placeholder: 'Enter Password' }`                                   |
+| `ssn`                     | `<VGSCollectForm.SSNField />`               | `{ type: 'ssn', placeholder: 'SSN' }`                                                   |
+| `zip-code`                | `<VGSCollectForm.ZipCodeField />`           | `{ type: 'zip-code', placeholder: 'Zip Code' }`                                         |
+| `number`                  | `<VGSCollectForm.NumberField />`            | `{ type: 'number', placeholder: 'Number' }`                                             |
+| `textarea`                | `<VGSCollectForm.TextareaField />`          | `{ type: 'textarea', placeholder: 'Comment' }`                                          |
+| `file`                    | `<VGSCollectForm.FileField />`              | `{ type: 'file', placeholder: '' }`                                                     |
+| `date`                    | `<VGSCollectForm.DateField />`              | `{ type: 'date', placeholder: '' }`                                                     |
 
 The complete list of supported properties you can find here: https://www.verygoodsecurity.com/docs/api/collect/#api-formfield.
 All configuration properties available in the Reference Documentation can be passed in the component props using the same name.
@@ -122,8 +123,7 @@ _Example:_
 ```javascript
 import { VGSCollectForm } from '@vgs/collect-js-react';
 
-const { CardNumberField, CardExpirationDateField, CardSecurityCodeField } =
-  VGSCollectForm;
+const { CardNumberField, CardExpirationDateField, CardSecurityCodeField } = VGSCollectForm;
 
 const myApp = () => {
   const onSubmitCallback = (status, data) => {};
@@ -134,7 +134,7 @@ const myApp = () => {
       vaultId='<vault_id>'
       environment='<environment>'
       action='/post'
-      submitParamethers={{
+      submitParameters={{
         headers: {
           myHeader: 'MyHeader'
         }
@@ -192,12 +192,7 @@ The library exposes the following handlers: `onFocus`, `onBlur`, `onUpdate`, `on
 In order to access the form state and response from the hook, wrap consumer component with the form in `VGSCollectProvider` context provider.
 
 ```javascript
-import {
-  VGSCollectProvider,
-  useVGSCollectState,
-  useVGSCollectResponse,
-  VGSCollectForm
-} from '@vgs/collect-js-react';
+import { VGSCollectProvider, useVGSCollectState, useVGSCollectResponse, VGSCollectForm } from '@vgs/collect-js-react';
 
 const { TextField } = VGSCollectForm;
 
@@ -219,17 +214,43 @@ const VGSCollectSecureForm = () => {
     }
   }, [state]);
 
+  return (
+    <VGSCollectForm vaultId='<vault_id>' environment='<environment>' action='/post'>
+      <TextField name='cardholder-name' validations={['required']} placeholder='Cardholder name' />
+    </VGSCollectForm>
+  );
+};
+```
+
+## Integration with Card Management Platform
+
+You can create a predefined Collect.js form to integrate with the [VGS Card Management Platform](https://docs.verygoodsecurity.com/card-management/api)
+
+```javascript
+import { VGSCollectForm } from '@vgs/collect-js-react';
+
+const {CardholderField, CardNumberField, CardExpirationDateField, CardSecurityCodeField } = VGSCollectForm;
+
+const myApp = () => {
+  const onSubmitCallback = (status, data) => {};
+  const onUpdateCallback = (state) => {};
+
   return (
     <VGSCollectForm
       vaultId='<vault_id>'
       environment='<environment>'
-      action='/post'
+      submitParamethers={{
+        createCard: {
+          auth: <vgs_auth_token>
+        }
+      }}
+      onUpdateCallback={onUpdateCallback}
+      onSubmitCallback={onSubmitCallback}
     >
-      <TextField
-        name='cardholder-name'
-        validations={['required']}
-        placeholder='Cardholder name'
-      />
+      <CardholderField css={{}} />
+      <CardNumberField css={{}} />
+      <CardExpirationDateField css={{}} />
+      <CardSecurityCodeField css={{}} />
     </VGSCollectForm>
   );
 };

example/README.md

@@ -10,4 +10,4 @@ NOTE: Before start, make sure that you have configured `.env` file
 REACT_APP_VAULT_ID=<vault_id>
 REACT_APP_ENVIRONMENT=<env>
 REACT_APP_COLLECT_VERSION=<collect_version>
-```
+```

example/package.json

@@ -28,7 +28,6 @@
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
-  
   "browserslist": {
     "production": [
       ">0.2%",

example/public/index.html

@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-  <meta name="theme-color" content="#000000" />
-
-  <!--
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-  <!--
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -22,17 +21,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>collect-js-react</title>
-</head>
+    <title>collect-js-react</title>
+  </head>
 
-<body>
-  <noscript>
-    You need to enable JavaScript to run this app.
-  </noscript>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
-  <div id="root"></div>
+    <div id="root"></div>
 
-  <!--
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -42,6 +39,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>