From dcca8629d9e3d2ddcb0c422927af6e4afe504eab Mon Sep 17 00:00:00 2001 From: Davi Aquino Date: Wed, 8 Dec 2021 15:18:06 -0300 Subject: [PATCH 1/6] wip: deprecate storeCreditCard --- .../includes/elements/_elements_services.md | 77 +++++++++---------- 1 file changed, 36 insertions(+), 41 deletions(-) diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index abbbef48..28a35823 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -1,13 +1,10 @@ # Elements Services -## Store Credit Card +## Atomic Cards ```javascript -BasisTheory.elements.storeCreditCard({ - card: cardElement, - billingDetails: { - name: 'Fiona Theory' - } +BasisTheory.elements.atomicCard.create({ + card: cardElement }).then((token) => { console.log(token.id); // token to store console.log(JSON.stringify(token.card)); // redacted card data @@ -16,7 +13,7 @@ BasisTheory.elements.storeCreditCard({ 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. -Internally, `BasisTheory.elements.storeCreditCard` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card). +Internally, `BasisTheory.elements.atomicCard.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,22 +21,6 @@ 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 @@ -68,22 +49,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 @@ -128,7 +93,11 @@ 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 + + + +## Errors ```javascript BasisTheory.elements.tokens.create(...).catch(error => { @@ -136,10 +105,36 @@ 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 + +```javascript +BasisTheory.elements.storeCreditCard({ + card: cardElement, + billingDetails: { + name: 'Fiona Theory' + } +}).then((token) => { + console.log(token.id); // token to store + console.log(JSON.stringify(token.card)); // redacted card data +}); +``` +[Deprecated] + +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. + +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). + + From a03db21b15c61204c51bb1e39865a39e8f832e59 Mon Sep 17 00:00:00 2001 From: Brian Gonzalez Date: Wed, 8 Dec 2021 21:23:58 -0700 Subject: [PATCH 2/6] chore: adds tokenize docs, links to errors, and deprecated badge wip --- .../includes/elements/_elements_services.md | 46 +++++++++++++++++-- source/stylesheets/screen.css.scss | 10 ++++ 2 files changed, 51 insertions(+), 5 deletions(-) diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index 28a35823..e258dfce 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -11,7 +11,9 @@ BasisTheory.elements.atomicCard.create({ }); ``` -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.atomicCard.create` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card). @@ -35,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). @@ -71,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). @@ -95,6 +100,38 @@ You can fetch this same data later with [Get a Token API](/api-reference#tokens- ## 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 @@ -114,7 +151,7 @@ Attribute | Type | Scope | Description `status` | *number* | both | Response HTTP status or `-1` if the request never left the client (i.e. connection issues) -## Store Credit Card +## Store Credit Card Deprecated ```javascript BasisTheory.elements.storeCreditCard({ @@ -127,7 +164,6 @@ BasisTheory.elements.storeCreditCard({ console.log(JSON.stringify(token.card)); // redacted card data }); ``` -[Deprecated] 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. diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 9fdebdfa..71fc27a5 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -333,6 +333,16 @@ html, body { font-weight: 600; } +.deprecated { + padding: 3px 6px 4px; + color: #ff8282; + background: rgba(255, 130, 130, 0.14); + border-radius: 2px; + font-size: 10px; + margin-left: 6px; + vertical-align: text-bottom; + font-weight: 600; +} //////////////////////////////////////////////////////////////////////////////// // PAGE LAYOUT AND CODE SAMPLE BACKGROUND From 24c4418fced578d0d65fedd9758c12d957ef88f8 Mon Sep 17 00:00:00 2001 From: Brian Gonzalez Date: Thu, 9 Dec 2021 08:39:13 -0700 Subject: [PATCH 3/6] chore: adds WIP deprecated colors, icons, and label --- source/images/icon/danger.svg | 3 +++ source/includes/elements/_elements_services.md | 6 +++++- source/stylesheets/_icon-font.scss | 8 ++++++++ source/stylesheets/screen.css.scss | 14 +++++++++++--- 4 files changed, 27 insertions(+), 4 deletions(-) create mode 100644 source/images/icon/danger.svg 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 e258dfce..0125c32d 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -151,7 +151,11 @@ Attribute | Type | Scope | Description `status` | *number* | both | Response HTTP status or `-1` if the request never left the client (i.e. connection issues) -## Store Credit Card Deprecated +## Store Credit Card DEPRECATED + + ```javascript BasisTheory.elements.storeCreditCard({ 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 71fc27a5..58472e4b 100644 --- a/source/stylesheets/screen.css.scss +++ b/source/stylesheets/screen.css.scss @@ -324,7 +324,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; @@ -335,8 +335,8 @@ html, body { .deprecated { padding: 3px 6px 4px; - color: #ff8282; - background: rgba(255, 130, 130, 0.14); + color: rgba(7, 10, 27, 0.85); + background: $aside-danger-bg; border-radius: 2px; font-size: 10px; margin-left: 6px; @@ -646,6 +646,10 @@ html, body { &.success { background-color: $aside-success-bg; } + + &.danger { + background-color: $aside-danger-bg; + } } aside:before { @@ -665,6 +669,10 @@ html, body { @extend %icon-ok-sign; } + aside.danger:before { + @extend %icon-danger; + } + .search-highlight { padding: 2px; margin: -3px; From be325e6418844e27a60882b1a9789044820bad56 Mon Sep 17 00:00:00 2001 From: Brian Gonzalez Date: Thu, 9 Dec 2021 12:53:51 -0700 Subject: [PATCH 4/6] chore: adds deprecated badge to docs --- .../includes/elements/_elements_services.md | 2 +- source/stylesheets/screen.css.scss | 35 ++++++++++++------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index 0125c32d..2fbb9167 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -154,7 +154,7 @@ Attribute | Type | Scope | Description ## Store Credit Card DEPRECATED ```javascript diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss index 58472e4b..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; + } } } @@ -334,14 +338,7 @@ html, body { } .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: text-bottom; - font-weight: 600; + display: none; } //////////////////////////////////////////////////////////////////////////////// @@ -460,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 { From 9e6a9bc825cf9ded2fe5e7644c3cf31191348eca Mon Sep 17 00:00:00 2001 From: Brian Gonzalez Date: Thu, 9 Dec 2021 14:05:35 -0700 Subject: [PATCH 5/6] chore: more accurate deprecated store credit card service --- source/includes/elements/_elements_services.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index 2fbb9167..f33651a1 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -160,16 +160,15 @@ Attribute | Type | Scope | Description ```javascript BasisTheory.elements.storeCreditCard({ card: cardElement, - billingDetails: { - name: 'Fiona Theory' - } }).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). From a6760ac6de8528e23dbe07874d961a0b6c25b524 Mon Sep 17 00:00:00 2001 From: Brian Gonzalez Date: Thu, 9 Dec 2021 14:13:16 -0700 Subject: [PATCH 6/6] chore: plural service names --- source/includes/elements/_elements_services.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index f33651a1..d32001d5 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -3,7 +3,7 @@ ## Atomic Cards ```javascript -BasisTheory.elements.atomicCard.create({ +BasisTheory.elements.atomicCards.create({ card: cardElement }).then((token) => { console.log(token.id); // token to store @@ -15,7 +15,7 @@ Allows secure submission and tokenization of a card element. Returns a `Promise` 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.atomicCard.create` 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). @@ -26,7 +26,7 @@ You can fetch this same data later with [Get an Atomic Card API](/api-reference/ ## 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',