diff --git a/source/images/icon/danger.svg b/source/images/icon/danger.svg new file mode 100644 index 00000000..6269898b --- /dev/null +++ b/source/images/icon/danger.svg @@ -0,0 +1,3 @@ + + + diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index abbbef48..d32001d5 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -1,22 +1,21 @@ # 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). @@ -24,26 +23,10 @@ You can fetch this same data later with [Get an Atomic Card API](/api-reference/ Notice that the actual card data never leaves the element (iframe) other than to hit our secure API endpoints. -### 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# Note that when submitting plainText values, data will be HTML encoded before storage for security reasons. -### 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,7 +98,43 @@ You can fetch this same data later with [Get a Token API](/api-reference#tokens- The encryption and children attributes supported by the API are NOT supported when creating a token with elements. -### 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). + + + + + + + + +## Errors ```javascript BasisTheory.elements.tokens.create(...).catch(error => { @@ -136,10 +142,38 @@ BasisTheory.elements.tokens.create(...).catch(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 DEPRECATED + + + +```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). + + diff --git a/source/stylesheets/_icon-font.scss b/source/stylesheets/_icon-font.scss index 218059d2..77b40cba 100644 --- a/source/stylesheets/_icon-font.scss +++ b/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); +} diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 9fdebdfa..a7df92a0 100644 --- a/source/stylesheets/screen.css.scss +++ b/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;