From ab569f83d5ee7849f8037c3e815ce5c1036f4a85 Mon Sep 17 00:00:00 2001 From: Davi Aquino Date: Thu, 23 Dec 2021 17:41:13 -0300 Subject: [PATCH 1/2] feat: refer to new consolidate interface --- source/includes/elements/_element_mask.md | 2 +- source/includes/elements/_element_style.md | 2 +- .../includes/elements/_element_transform.md | 2 +- .../includes/elements/_elements_instance.md | 8 ++------ .../includes/elements/_elements_services.md | 20 ++++++++++--------- source/includes/elements/_getting_started.md | 14 ++----------- source/includes/elements/_initialize.md | 6 +++--- 7 files changed, 21 insertions(+), 33 deletions(-) diff --git a/source/includes/elements/_element_mask.md b/source/includes/elements/_element_mask.md index b312b652..d9d4976c 100644 --- a/source/includes/elements/_element_mask.md +++ b/source/includes/elements/_element_mask.md @@ -1,7 +1,7 @@ # Element Mask ```jsx -var phoneNumberElement = BasisTheory.elements.create('text', { +var phoneNumberElement = BasisTheory.createElement('text', { targetId: 'myPhoneNumberElement', mask: ['(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/] }) diff --git a/source/includes/elements/_element_style.md b/source/includes/elements/_element_style.md index fad689d8..0a82c981 100644 --- a/source/includes/elements/_element_style.md +++ b/source/includes/elements/_element_style.md @@ -1,7 +1,7 @@ # Element Style ```jsx -var cardElement = BasisTheory.elements.create('card', { +var cardElement = BasisTheory.createElement('card', { style: { fonts: [ "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" diff --git a/source/includes/elements/_element_transform.md b/source/includes/elements/_element_transform.md index 38301d0e..b35a9c3c 100644 --- a/source/includes/elements/_element_transform.md +++ b/source/includes/elements/_element_transform.md @@ -1,7 +1,7 @@ # Element Transform ```jsx -var phoneNumberElement = BasisTheory.elements.create('text', { +var phoneNumberElement = BasisTheory.createElement('text', { targetId: 'myPhoneNumberElement', mask: ['(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], transform: /[()-]/, diff --git a/source/includes/elements/_elements_instance.md b/source/includes/elements/_elements_instance.md index 5684cbbf..38c75595 100644 --- a/source/includes/elements/_elements_instance.md +++ b/source/includes/elements/_elements_instance.md @@ -1,17 +1,13 @@ # Elements Instance -```jsx -BasisTheory.elements -``` - After [initialization](#initialize), **Elements** are available through `BasisTheory` instance. ## Create Element ```jsx -var cardElement = BasisTheory.elements.create('card', options); +var cardElement = BasisTheory.createElement('card', options); -var textElement = BasisTheory.elements.create('text', { targetId: 'myInputId' }); +var textElement = BasisTheory.createElement('text', { targetId: 'myInputId' }); ``` This method returns a new instance of an element type. diff --git a/source/includes/elements/_elements_services.md b/source/includes/elements/_elements_services.md index d32001d5..f350da61 100644 --- a/source/includes/elements/_elements_services.md +++ b/source/includes/elements/_elements_services.md @@ -1,9 +1,11 @@ # Elements Services +The following **BasisTheory.js** services are capable of recognizing Elements instances in the payload and securely tokenizing their data directly to Basis Theory vault. + ## Atomic Cards ```javascript -BasisTheory.elements.atomicCards.create({ +BasisTheory.atomicCards.create({ card: cardElement }).then((token) => { console.log(token.id); // token to store @@ -15,7 +17,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.atomicCards.create` calls [Create Atomic Card API](/api-reference/#atomic-cards-create-atomic-card). +Internally, `BasisTheory.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 +28,7 @@ You can fetch this same data later with [Get an Atomic Card API](/api-reference/ ## Atomic Banks ```javascript -BasisTheory.elements.atomicBanks.create({ +BasisTheory.atomicBanks.create({ bank: { routingNumber: routingNumberElement | 'plainText', // values can be either a TextElement or plain text (see warning). accountNumber: accountNumberElement | 'plainText', @@ -41,7 +43,7 @@ Allows secure submission and tokenization of a bank element. Returns a `Promise` 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). +Internally, `BasisTheory.atomicBanks.create` calls [Create Atomic Bank API](/api-reference#atomic-banks-create-atomic-bank). You can fetch this same data later with [Get an Atomic Bank API](/api-reference#atomic-banks-get-an-atomic-bank). @@ -56,7 +58,7 @@ You can fetch this same data later with [Get an Atomic Bank API](/api-reference# ## Tokens ```javascript -BasisTheory.elements.tokens.create({ +BasisTheory.tokens.create({ type: 'token', data: { sensitiveData: sensitiveDataElement, @@ -78,7 +80,7 @@ BasisTheory.elements.tokens.create({ 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). +Internally, `BasisTheory.tokens.create` calls [Create Token API](/api-reference#tokens-create-token). 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) @@ -101,7 +103,7 @@ You can fetch this same data later with [Get a Token API](/api-reference#tokens- ## Tokenize ```javascript -BasisTheory.elements.tokenize.tokenize({ +BasisTheory.tokenize.tokenize({ sensitiveData: sensitiveDataElement, nonSensitiveData: 'plainText', // see warning on plain text data otherData: { @@ -117,7 +119,7 @@ BasisTheory.elements.tokenize.tokenize({ 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). +Internally, `BasisTheory.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). @@ -137,7 +139,7 @@ You can fetch this same data later with [Get a Token API](/api-reference#tokens- ## Errors ```javascript -BasisTheory.elements.tokens.create(...).catch(error => { +BasisTheory.tokens.create(...).catch(error => { // handle error }); ``` diff --git a/source/includes/elements/_getting_started.md b/source/includes/elements/_getting_started.md index 5aa63037..fe9e2249 100644 --- a/source/includes/elements/_getting_started.md +++ b/source/includes/elements/_getting_started.md @@ -87,16 +87,6 @@ The setup above is recommended to avoid errors similar to these: ## Usage with TypeScript -In order to facilitate usage with TypeScript, an optional typings NPM module is available for installation. +Starting at `1.14.0`, [BasisTheory.js](https://www.npmjs.com/package/@basis-theory/basis-theory-js) bundles all TypeScript definitions for Elements features. You don't have to take any extra steps in order to use it. -> NPM - -```shell -npm install --save-dev @basis-theory/basis-theory-elements -``` - -> Yarn - -```shell -yarn add @basis-theory/basis-theory-elements --dev -``` +If you can't upgrade past `1.13.1`, [Basis Theory Elements](https://www.npmjs.com/package/@basis-theory/basis-theory-elements) offers unmaintained definitions for deprecated Elements features. diff --git a/source/includes/elements/_initialize.md b/source/includes/elements/_initialize.md index 598f898c..8a597a9e 100644 --- a/source/includes/elements/_initialize.md +++ b/source/includes/elements/_initialize.md @@ -12,7 +12,7 @@ try { // global/window variable BasisTheory is an instance, but requires initialization await BasisTheory.init('test_1234567890', { elements: true }); - // use BasisTheory.elements + // use Elements } catch (e) { // handle errors that could happen while loading elements script } @@ -27,7 +27,7 @@ import { BasisTheory } from '@basis-theory/basis-theory-js'; // In this context BasisTheory is a class const bt = await new BasisTheory().init('test_1234567890', { elements: true }); -// use bt.elements +// use Elements ``` @@ -38,7 +38,7 @@ After [installing](#getting-started-install-sdk) **BasisTheory.js**, simply init