feat(ENG-1909): adds tokenize and atomic cards service. deprecates store credit card service

source/includes/elements/_elements_services.md

@@ -1,49 +1,32 @@
 # Elements Services
 
-## Store Credit Card
+## Atomic Cards
 
 ```javascript
-BasisTheory.elements.storeCreditCard({
-  card: cardElement,
-  billingDetails: {
-    name: 'Fiona Theory'  
-  }
+BasisTheory.elements.atomicCards.create({
+  card: cardElement
 }).then((token) => {
   console.log(token.id); // token to store
   console.log(JSON.stringify(token.card)); // redacted card data
 });
 ```
 
-Allows secure submission and tokenization of a card element. Returns a `Promise` that resolves to the tokenized card data. See [CardModel](#element-types-card-element) for the resolved value type.
+Allows secure submission and tokenization of a card element. Returns a `Promise` that resolves to the tokenized card data.
+See [CardModel](#element-types-card-element) for the resolved value type. The `Promise` will reject with an [error](#elements-services-errors)
+if the response status is not in the 2xx range.
 
-Internally, `BasisTheory.elements.storeCreditCard` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card).
+Internally, `BasisTheory.elements.atomicCards.create` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card).
 
 You can fetch this same data later with [Get an Atomic Card API](/api-reference/#atomic-cards-get-an-atomic-card).
 
 <aside class="notice">
   <span>Notice that the actual card data never leaves the element (iframe) other than to hit our secure API endpoints.</span>
 </aside>
 
-### storeCreditCard Errors
-
-```javascript
-BasisTheory.elements.storeCreditCard(...).catch(error => {
-  // handle error
-});
-```
-
-In case `storeCreditCard` throws an error, that could be related to client-side validation or an unaccepted request from the server.
-
-Attribute    | Type       | Scope  | Description
------------- | ---------- | ------ | -----------
-`validation` | *array*    | client | Array of [FieldError](#element-events-on-change-fielderror), in case of client-side error.
-`data`       | *object*   | server | Response body sent from the server.
-`status`     | *number*   | both   | Response HTTP status or `-1` if the request never left the client (i.e. connection issues)
-
 ## Atomic Banks
 
 ```javascript
-BasisTheory.elements.atomicBank.create({
+BasisTheory.elements.atomicBanks.create({
   bank: {
     routingNumber: routingNumberElement | 'plainText',  // values can be either a TextElement or plain text (see warning).
     accountNumber: accountNumberElement | 'plainText',
@@ -54,7 +37,9 @@ BasisTheory.elements.atomicBank.create({
 });
 ```
 
-Allows secure submission and tokenization of a bank element. Returns a `Promise` that resolves to the tokenized bank data.
+Allows secure submission and tokenization of a bank element. Returns a `Promise` that resolves to the tokenized bank
+data. The `Promise` will reject with an [error](#elements-services-errors) if the response status is not in the 2xx
+range.
 
 Internally, `BasisTheory.elements.atomicBanks.create` calls [Create Atomic Bank API](/api-reference#atomic-banks-create-atomic-bank).
 
@@ -68,22 +53,6 @@ You can fetch this same data later with [Get an Atomic Bank API](/api-reference#
   <span>Note that when submitting <code>plainText</code> values, data will be HTML encoded before storage for security reasons.
 </aside>
 
-### atomicBank Errors
-
-```javascript
-BasisTheory.elements.atomicBank.create(...).catch(error => {
-  // handle error
-});
-```
-
-In case `atomicBank.create` throws an error, that could be related to client-side validation or an unaccepted request from the server.
-
-Attribute    | Type       | Scope  | Description
------------- | ---------- | ------ | -----------
-`validation` | *array*    | client | Array of [FieldError](#element-events-on-change-fielderror), in case of client-side error.
-`data`       | *object*   | server | Response body sent from the server.
-`status`     | *number*   | both   | Response HTTP status or `-1` if the request never left the client (i.e. connection issues)
-
 ## Tokens
 
 ```javascript
@@ -106,7 +75,8 @@ BasisTheory.elements.tokens.create({
 });
 ```
 
-Allows secure submission and tokenization of string data. Returns a `Promise` that resolves to the created token.
+Allows secure submission and tokenization of string data. Returns a `Promise` that resolves to the created token. The
+`Promise` will reject with an [error](#elements-services-errors) if the response status is not in the 2xx range.
 
 Internally, `BasisTheory.elements.tokens.create` calls [Create Token API](/api-reference#tokens-create-token).
 
@@ -128,18 +98,82 @@ You can fetch this same data later with [Get a Token API](/api-reference#tokens-
   <span>The <code>encryption</code> and <code>children</code> attributes supported by the API are <strong>NOT</strong> supported when creating a token with elements.</span>
 </aside>
 
-### tokens Errors
+## Tokenize
+
+```javascript
+BasisTheory.elements.tokenize.tokenize({
+  sensitiveData: sensitiveDataElement,
+  nonSensitiveData: 'plainText', // see warning on plain text data
+  otherData: {
+    someInteger: 20,
+    someBoolean: false,
+  },
+  someOtherData: ['plainText1', 'plainText2'],
+}).then((token) => {
+  console.log(JSON.stringify(token)); // encrypted token data
+});
+```
+
+Allows secure submission and tokenization of string data. Returns a `Promise` that resolves to the created tokens. The
+`Promise` will reject with an [error](#elements-services-errors) if the response status is not in the 2xx range.
+
+Internally, `BasisTheory.elements.tokenize.tokenize` calls [Tokenize API](/api-reference#tokenize).
+
+You can fetch this same data later with [Get a Token API](/api-reference#tokens-get-a-token) or [Get a Decrypted Token API](/api-reference#tokens-get-a-decrypted-token).
+
+<aside class="notice">
+  <span>Notice that the actual input data never leaves the element (iframe) other than to hit our secure API endpoints.</span>
+</aside>
+
+<aside class="warning">
+  <span>Note that when submitting <code>plainText</code> values, data will be HTML encoded before storage for security reasons.
+</aside>
+
+<aside class="warning">
+  <span>The <code>encryption</code> and <code>children</code> attributes supported by the API are <strong>NOT</strong> supported when creating a token with elements.</span>
+</aside>
+
+
+## Errors
 
 ```javascript
 BasisTheory.elements.tokens.create(...).catch(error => {
   // handle error
 });
 ```
 
-In case `tokens.create` throws an error, that could be related to client-side validation or an unaccepted request from the server.
+In case any Elements service throws an error, that could be related to client-side validation or an unaccepted request from the server.
 
 Attribute    | Type       | Scope  | Description
 ------------ | ---------- | ------ | -----------
 `validation` | *array*    | client | Array of [FieldError](#element-events-on-change-fielderror), in case of client-side error.
 `data`       | *object*   | server | Response body sent from the server.
 `status`     | *number*   | both   | Response HTTP status or `-1` if the request never left the client (i.e. connection issues)
+
+
+## Store Credit Card <span class="deprecated menu">DEPRECATED</span>
+
+<aside class="danger">
+  <span>This endpoint has been deprecated in favor of <a class="black-link" href="#elements-services-atomic-cards">Atomic Cards</a></span>
+</aside>
+
+```javascript
+BasisTheory.elements.storeCreditCard({
+  card: cardElement,
+}).then((token) => {
+  console.log(token.id); // token to store
+  console.log(JSON.stringify(token.card)); // redacted card data
+});
+```
+
+Allows secure submission and tokenization of a card element. Returns a `Promise` that resolves to the tokenized card
+data. See [CardModel](#element-types-card-element) for the resolved value type. The `Promise` will reject with an
+[error](#elements-services-errors) if the response status is not in the 2xx range.
+
+Internally, `BasisTheory.elements.storeCreditCard` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card).
+
+You can fetch this same data later with [Get an Atomic Card API](/api-reference/#atomic-cards-get-an-atomic-card).
+
+<aside class="notice">
+  <span>Notice that the actual card data never leaves the element (iframe) other than to hit our secure API endpoints.</span>
+</aside>

source/stylesheets/_icon-font.scss

@@ -24,14 +24,17 @@
   @extend %icon;
   content: url(../images/icon/warning.svg);
 }
+
 %icon-info-sign {
   @extend %icon;
   content: url(../images/icon/info.svg);
 }
+
 %icon-ok-sign {
   @extend %icon;
   content: url(../images/icon/check-circle.svg);
 }
+
 %icon-search {
   @extend %icon;
   content: url(../images/icon/search.svg);
@@ -41,3 +44,8 @@
   @extend %icon;
   content: url(../images/icon/chevron-left.svg);
 }
+
+%icon-danger {
+  @extend %icon;
+  content: url(../images/icon/danger.svg);
+}

source/stylesheets/screen.css.scss

@@ -42,6 +42,10 @@ html, body {
     font-weight: 600;
     line-height: 21px;
     text-align: left;
+
+    &.black-link {
+      color: $grey-900;
+    }
   }
 }
 
@@ -324,7 +328,7 @@ html, body {
 
 .beta {
   padding: 3px 6px 4px;
-  color: #FFD582;
+  color: $aside-warning-bg;
   background: rgba(255, 213, 130, 0.14);
   border-radius: 2px;
   font-size: 10px;
@@ -333,6 +337,9 @@ html, body {
   font-weight: 600;
 }
 
+.deprecated {
+  display: none;
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 // PAGE LAYOUT AND CODE SAMPLE BACKGROUND
@@ -450,11 +457,23 @@ html, body {
     }
   }
 
-    .beta {
-      background: #FFD582;
-      color: $main-text;
-      line-height: 20px;
-    }
+  .beta {
+    background: #FFD582;
+    color: $main-text;
+    line-height: 20px;
+  }
+
+  .deprecated {
+    padding: 3px 6px 4px;
+    color: rgba(7, 10, 27, 0.85);
+    background: $aside-danger-bg;
+    border-radius: 2px;
+    font-size: 10px;
+    margin-left: 6px;
+    vertical-align: bottom;
+    font-weight: 600;
+    display: inline;
+  }
 }
 
 .content {
@@ -636,6 +655,10 @@ html, body {
     &.success {
       background-color: $aside-success-bg;
     }
+
+    &.danger {
+      background-color: $aside-danger-bg;
+    }
   }
 
   aside:before {
@@ -655,6 +678,10 @@ html, body {
     @extend %icon-ok-sign;
   }
 
+  aside.danger:before {
+    @extend %icon-danger;
+  }
+
   .search-highlight {
     padding: 2px;
     margin: -3px;