feat: first iteration of auth ctas

Basis-Theory · Dec 13, 2022 · 6e0b450 · 6e0b450
1 parent f50ecb2
commit 6e0b450
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 72 deletions.
diff --git a/docs/guides/collect/collect-data-from-web.mdx b/docs/guides/collect/collect-data-from-web.mdx
@@ -3,46 +3,35 @@ import TabItem from "@theme/TabItem";
 
 import { Button } from "@site/src/components/shared/Button";
 import { Alert, Alerts } from "@site/src/components/shared/Alert";
+import { AuthButtons } from "@site/src/components/docs/AuthButtons";
 
 # Collect Data from Web
 
-This guide will show you how to collect data from a web browser without touching the data. 
+This guide will show you how to collect data from a web browser without touching the data.
 
 Key concepts in this guide:
+
 - [Tokens](/docs/concepts/what-are-tokens)
 - [Applications](/docs/api/applications)
 - [JavaScript Elements](/docs/sdks/web/javascript-elements)
 
-
 ## Getting Started
 
 To get started, you will need a Basis Theory account.
 
-<Button
-  href="https://portal.basistheory.com/register"
-  target="_blank"
->
-  Sign Up
-</Button>
-
-<Button
-  href="https://portal.basistheory.com/"
-  target="_blank"
-  variant="secondary"
->
-  Sign In
-</Button>
+<AuthButtons />
 
 Next you will need a [Public Application](/docs/api/applications#application-types) in order to initialize [JavaScript Elements](/docs/sdks/web/javascript-elements) for your web page.
 
 Login to your Basis Theory account and [create a new Application](https://portal.basistheory.com/applications) with the following settings:
 
-* Name - Collect Data from Web Guide
-* Application Type - Public
-* Permissions - `token:create`
+- Name - Collect Data from Web Guide
+- Application Type - Public
+- Permissions - `token:create`
 
 <Alert>
-  Save the API Key from the created Public APplication as it will be used later in this guide to initialize the form.
+  Save the API Key from the created Public APplication as it will be used later
+  in this guide to initialize the form.
 </Alert>
 
 ## Create a New HTML File
@@ -57,10 +46,9 @@ touch index.html
 
 Open the resulting `index.html` file in an IDE or text editor of your choice.
 
-
 ## Install the Web SDK
 
-We will need to install Basis Theory's [JavaScript Elements SDK](/docs/sdks/web/javascript-elements), which will render a secure iFrame for capturing the data. 
+We will need to install Basis Theory's [JavaScript Elements SDK](/docs/sdks/web/javascript-elements), which will render a secure iFrame for capturing the data.
 
 To install the SDK you can choose either our ES module or CDN hosted bundle through a `script` tag. In this guide, we will utilize the CDN hosted bundle.
 
@@ -74,10 +62,10 @@ To install the SDK you can choose either our ES module or CDN hosted bundle thro
 ```
 
 <Alert>
-  If you are building a React application, be sure to check out our <a href="/docs/sdks/web/react-elements">React Elements SDK</a>.
+  If you are building a React application, be sure to check out our{" "}
+  <a href="/docs/sdks/web/react-elements">React Elements SDK</a>.
 </Alert>
 
-
 ## Initialize the Web SDK
 
 Now we need to initialize Basis Theory JavaScript Elements. To do this, we will create an instance of `BasisTheory` with `elements: true` to dynamically loads **Elements** module.
@@ -87,10 +75,10 @@ Now we need to initialize Basis Theory JavaScript Elements. To do this, we will
   // you can initialize it wherever it suits your workflow best
   // here we are waiting for the window to load, to make sure BasisTheory instance
   // has been injected in the window variable
-  window.addEventListener('load', async () => {
+  window.addEventListener("load", async () => {
     try {
       // global/window variable BasisTheory is an instance, but requires initialization
-      await BasisTheory.init('test_1234567890', { elements: true });
+      await BasisTheory.init("test_1234567890", { elements: true });
     } catch (e) {
       // handle errors that could happen while loading elements script
     }
@@ -99,10 +87,10 @@ Now we need to initialize Basis Theory JavaScript Elements. To do this, we will
 ```
 
 <Alert>
-  Be sure to replace <code>test_1234567890</code> with the Public API Key you created in the <a href="#getting-started">Getting Started</a> step.
+  Be sure to replace <code>test_1234567890</code> with the Public API Key you
+  created in the <a href="#getting-started">Getting Started</a> step.
 </Alert>
 
-
 ## Add Your Form Components
 
 This step will add a [Text Element](/docs/sdks/web/elements/types#text-element) component to our page.
@@ -126,22 +114,21 @@ Next, we need to create a new Text Element and mount it to our `div`:
 <script>
   let textElement;
 
-  window.addEventListener('load', async () => {
+  window.addEventListener("load", async () => {
     await BasisTheory.init("test_1234567890", { elements: true });
 
-    textElement = BasisTheory.createElement('text', {
-      targetId: 'exampleTextElement',
-      placeholder: 'Input text'
+    textElement = BasisTheory.createElement("text", {
+      targetId: "exampleTextElement",
+      placeholder: "Input text",
     });
 
-    textElement.mount('#example-element'); 
+    textElement.mount("#example-element");
   });
 </script>
 ```
 
 This will create a new instance of a Text Element and when mounted to your `<div>`, it will inject an iFrame that is rendered by Basis Theory. The Basis Theory SDK will hold a reference to the Text Element which enables interactions with the underlying data without direct access to the value.
 
-
 ## Tokenize the Text Value
 
 Now we need to tokenize the value within the Text Element without exposing it to our web application.
@@ -171,25 +158,25 @@ Within our JavaScript code, let's add a new submit function to tokenize the valu
 <script>
   let textElement;
 
-  window.addEventListener('load', async () => {
+  window.addEventListener("load", async () => {
     await BasisTheory.init("test_1234567890", { elements: true });
 
-    textElement = BasisTheory.createElement('text', {
-      targetId: 'exampleTextElement',
-      placeholder: 'Input text'
+    textElement = BasisTheory.createElement("text", {
+      targetId: "exampleTextElement",
+      placeholder: "Input text",
     });
 
-    textElement.mount('#example-element'); 
+    textElement.mount("#example-element");
   });
 
   async function submit() {
     try {
       const token = await BasisTheory.tokens.create({
-        type: 'token',
-        data: textElement
+        type: "token",
+        data: textElement,
       });
 
-      const result = document.querySelector('#result');
+      const result = document.querySelector("#result");
 
       result.innerHTML = JSON.stringify(token, null, 4);
     } catch (error) {
@@ -213,34 +200,34 @@ Following this guide, your resulting page should look like the following:
   <body>
     <div id="example-element"></div>
 
-    <button type="button" onclick="submit()">
-      Submit
-    </button>
+    <button type="button" onclick="submit()">Submit</button>
 
     <pre id="result"></pre>
 
     <script>
       let textElement;
 
-      window.addEventListener('load', async () => {
-        await BasisTheory.init("key_3aYBJ6NbEvyU5FN9n1Xbvw", { elements: true });
+      window.addEventListener("load", async () => {
+        await BasisTheory.init("key_3aYBJ6NbEvyU5FN9n1Xbvw", {
+          elements: true,
+        });
 
-        textElement = BasisTheory.createElement('text', {
-          targetId: 'exampleTextElement',
-          placeholder: 'Input text'
+        textElement = BasisTheory.createElement("text", {
+          targetId: "exampleTextElement",
+          placeholder: "Input text",
         });
 
-        textElement.mount('#example-element'); 
+        textElement.mount("#example-element");
       });
 
       async function submit() {
         try {
           const token = await BasisTheory.tokens.create({
-            type: 'token',
-            data: textElement
+            type: "token",
+            data: textElement,
           });
 
-          const result = document.querySelector('#result');
+          const result = document.querySelector("#result");
 
           result.innerHTML = JSON.stringify(token, null, 4);
         } catch (error) {
@@ -262,13 +249,13 @@ A browser will open to your page running on `http://localhost:8080/`.
 
 ## Conclusion
 
-You can now capture any data without your application accessing the underlying value drastically reducing compliance and regulatory scope. 
+You can now capture any data without your application accessing the underlying value drastically reducing compliance and regulatory scope.
 
 Try typing a value and clicking the submit button will securely send the data directly to Basis Theory and return you a [token](/docs/concepts/what-are-tokens). The resulting token is displayed directly on the page.
 
-
 ## Learn More
+
 - [What are tokens?](/docs/concepts/what-are-tokens)
 - [Customize your web form](/docs/guides/collect/customize-web-form)
 - [Collect data in your web application with React Elements](/docs/sdks/web/react-elements)
-- [Collect and process cards](/docs/blueprints/cards/collect-and-process-cards)
+- [Collect and process cards](/docs/blueprints/cards/collect-and-process-cards)
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -6,8 +6,9 @@ hide_table_of_contents: true
 
 import { Intro } from "@site/src/components/shared/Intro";
 import { Card } from "@site/src/components/shared/Card";
-import { Button } from "@site/src/components/shared/Button";
 import { BlueprintCard } from "@site/src/components/docs/BlueprintCard";
+import { AuthButtons } from "@site/src/components/docs/AuthButtons";
+
 import Link from "@docusaurus/Link";
 
 import Image from "@site/static/img/getting-started.svg";
@@ -26,26 +27,14 @@ import Blueprints from "@site/static/img/docs/blueprints.svg";
 Our software becomes a core part of your infrastructure enabling you to quickly encrypt, tokenize, and store any payload securely. Your token infrastructure can be used to protect data at rest, as it passes between your own internal systems, or how it's permissioned and shared with third parties.
 
 ### Basis Theory Infrastructure
+
 ![Basis Theory Infrastructure](/img/getting-started/infrastructure.svg)
 
 ## Before You Begin
 
 To begin taking full advantage of the Basis Theory platform, we recommend creating an account or logging in to our portal to create your first Tenant.
 
-<Button
-  href="https://portal.basistheory.com/register"
-  target="_blank"
->
-  Sign Up
-</Button>
-
-<Button
-  href="https://portal.basistheory.com/"
-  target="_blank"
-  variant="secondary"
->
-  Sign In
-</Button>
+<AuthButtons />
 
 ## Start Building
 

diff --git a/src/components/docs/AuthButtons.module.css b/src/components/docs/AuthButtons.module.css
@@ -0,0 +1,5 @@
+.container {
+  display: inline-flex;
+  column-gap: 16px;
+  margin-bottom: 24px;
+}
diff --git a/src/components/docs/AuthButtons.tsx b/src/components/docs/AuthButtons.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Button } from "@site/src/components/shared/Button";
+
+import styles from "./AuthButtons.module.css";
+
+export const AuthButtons = () => {
+  return (
+    <div className={styles.container}>
+      <div>
+        <Button href="https://portal.basistheory.com/register" target="_blank">
+          Sign Up
+        </Button>
+      </div>
+      <div>
+        <Button
+          href="https://portal.basistheory.com/"
+          target="_blank"
+          variant="secondary"
+        >
+          Sign In
+        </Button>
+      </div>
+    </div>
+  );
+};