1"use strict";(self.webpackChunkdevelopers_basistheory_com=self.webpackChunkdevelopers_basistheory_com||[]).push([[5557],{53916:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>m,default:()=>p,frontMatter:()=>d,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"sdks/web/web-elements/v3/getting-started","title":"Getting Started","description":"You need to collect a card from your users without raw card numbers ever touching your servers. This guide walks you through the complete setup: installing the SDK, creating card elements, validating input, and tokenizing the result.","source":"@site/docs/sdks/web/web-elements/v3/getting-started.mdx","sourceDirName":"sdks/web/web-elements/v3","slug":"/sdks/web/web-elements/v3/getting-started","permalink":"/docs/sdks/web/web-elements/v3/getting-started","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1790618629000,"frontMatter":{"title":"Getting Started","sidebar_label":"Getting Started"},"sidebar":"sdk","previous":{"title":"Overview","permalink":"/docs/sdks/web/web-elements/v3/"},"next":{"title":"Initialization","permalink":"/docs/sdks/web/web-elements/v3/initialization"}}');var a=t(74848),l=t(28453),s=t(13187),i=t(83227),c=t(85202),o=t(64011);const d={title:"Getting Started",sidebar_label:"Getting Started"},m="Getting Started",u={},h=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"1. Install",id:"1-install",level:2},{value:"2. Initialize",id:"2-initialize",level:2},{value:"3. Add Card Elements",id:"3-add-card-elements",level:2},{value:"4. Wait for the Element to Be Ready",id:"4-wait-for-the-element-to-be-ready",level:2},{value:"5. Handle Validation State",id:"5-handle-validation-state",level:2},{value:"6. Tokenize on Submit",id:"6-tokenize-on-submit",level:2},{value:"Complete Example",id:"complete-example",level:2},{value:"Next Steps",id:"next-steps",level:2}];function b(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"getting-started",children:"Getting Started"})}),"\n",(0,a.jsx)(n.p,{children:"You need to collect a card from your users without raw card numbers ever touching your servers. This guide walks you through the complete setup: installing the SDK, creating card elements, validating input, and tokenizing the result."}),"\n",(0,a.jsx)(n.p,{children:"By the end you will have a working payment form that collects card data securely and returns a token your backend can use to charge the card."}),"\n",(0,a.jsx)(n.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,a.jsxs)(n.p,{children:["You need a ",(0,a.jsx)(n.strong,{children:"Public Application"})," API key with the ",(0,a.jsx)(n.code,{children:"token:create"})," permission. Public keys are safe to use in frontend code because they can only create tokens, not read sensitive data."]}),"\n",(0,a.jsxs)(n.p,{children:["To create one, log in to the ",(0,a.jsx)(n.a,{href:"https://portal.basistheory.com",children:"Basis Theory Portal"}),', create a new application of type "Public", and grant the ',(0,a.jsx)(n.code,{children:"token:create"})," permission."]}),"\n",(0,a.jsx)(c.F,{type:c.W.WARNING,children:"Never use Management or Private API keys in frontend code. They can read raw token data and must stay server-side."}),"\n",(0,a.jsx)(n.h2,{id:"1-install",children:"1. Install"}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"package-manager",children:[(0,a.jsx)(i.A,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-shell",children:"npm install --save @basis-theory/web-elements\n"})})}),(0,a.jsx)(i.A,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-shell",children:"yarn add @basis-theory/web-elements\n"})})}),(0,a.jsx)(i.A,{value:"cdn",label:"CDN",children:(0,a.jsx)(o.P,{npmTag:"latest"})})]})}),(0,a.jsxs)(i.A,{value:"react",label:"React Elements",children:[(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"package-manager",children:[(0,a.jsx)(i.A,{value:"npm",label:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-shell",children:"npm install --save @basis-theory/react-elements\n"})})}),(0,a.jsx)(i.A,{value:"yarn",label:"yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-shell",children:"yarn add @basis-theory/react-elements\n"})})})]}),(0,a.jsxs)(n.p,{children:["React Elements includes ",(0,a.jsx)(n.code,{children:"@basis-theory/web-elements"})," as a dependency. You do not need to install both."]})]})]}),"\n",(0,a.jsx)(n.h2,{id:"2-initialize",children:"2. Initialize"}),"\n",(0,a.jsx)(n.p,{children:"The SDK is initialized synchronously \u2014 you get a ready-to-use instance immediately. Elements are loaded lazily when they are first mou
1nted."}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"package-manager",children:[(0,a.jsx)(i.A,{value:"module",label:"ES Module",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"import BasisTheory from '@basis-theory/web-elements';\n\nconst bt = BasisTheory('<PUBLIC_API_KEY>');\n"})})}),(0,a.jsxs)(i.A,{value:"cdn",label:"CDN",children:[(0,a.jsxs)(n.p,{children:["After loading the CDN script, ",(0,a.jsx)(n.code,{children:"BasisTheory"})," is available as a global. Call it inside ",(0,a.jsx)(n.code,{children:"DOMContentLoaded"})," so the script has had a chance to load:"]}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:"<script>\n document.addEventListener('DOMContentLoaded', () => {\n try {\n const bt = BasisTheory('<PUBLIC_API_KEY>');\n\n // Create and mount elements here\n } catch (error) {\n console.error('Failed to initialize Elements:', error);\n }\n });\n<\/script>\n"})})]})]})}),(0,a.jsxs)(i.A,{value:"react",label:"React Elements",children:[(0,a.jsxs)(n.p,{children:["Wrap your application (or the relevant subtree) with ",(0,a.jsx)(n.code,{children:"BasisTheoryProvider"}),". All element components and the ",(0,a.jsx)(n.code,{children:"useBasisTheory"})," hook must be descendants of this provider."]}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { BasisTheoryProvider } from '@basis-theory/react-elements';\n\nfunction App() {\n return (\n <BasisTheoryProvider apiKey='<PUBLIC_API_KEY>'>\n <PaymentForm />\n </BasisTheoryProvider>\n );\n}\n"})})]})]}),"\n",(0,a.jsx)(n.h2,{id:"3-add-card-elements",children:"3. Add Card Elements"}),"\n",(0,a.jsx)(n.p,{children:"v3 uses three separate elements \u2014 one for the card number, one for the expiration date, and one for the CVV. Each renders as a secure iframe inside the container you specify."}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsxs)(i.A,{value:"web",label:"Web Elements",children:[(0,a.jsx)(n.p,{children:"Add containers to your HTML:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:'<form id="payment-form">\n <div id="card-number-element"></div>\n <div id="expiry-element"></div>\n <div id="cvv-element"></div>\n <button type="submit" id="submit-btn" disabled>Pay</button>\n</form>\n'})}),(0,a.jsx)(n.p,{children:"Create and mount the elements:"}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"const cardNumberEl = bt.createElement('cardNumber');\nconst expiryEl = bt.createElement('expiry');\nconst cvvEl = bt.createElement('cvv');\n\nawait Promise.all([\n cardNumberEl.mount('#card-number-element'),\n expiryEl.mount('#expiry-element'),\n cvvEl.mount('#cvv-element'),\n]);\n"})})]}),(0,a.jsx)(i.A,{value:"react",label:"React Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { useRef } from 'react';\nimport {\n CardNumberElement,\n ExpiryElement,\n CVVElement,\n useBasisTheory,\n} from '@basis-theory/react-elements';\n\nfunction PaymentForm() {\n const cardNumberRef = useRef(null);\n const expiryRef = useRef(null);\n const cvvRef = useRef(null);\n\n return (\n <form>\n <CardNumberElement ref={cardNumberRef} />\n <ExpiryElement ref={expiryRef} />\n <CVVElement ref={cvvRef} />\n <button type=\"submit\">Pay</button>\n </form>\n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.h2,{id:"4-wait-for-the-element-to-be-ready",children:"4. Wait for the Element to Be Ready"}),"\n",(0,a.jsxs)(n.p,{children:["Each element emits a ",(0,a.jsx)(n.code,{children:"ready"})," event once its iframe has fully loaded and the element is interactive. If you need to drive the element programmatically (call ",(0,a.jsx)(n.code,{children:"focus()"}),", ",(0,a.jsx)(n.code,{children:"clear()"}),", etc.) after mounting, wait for ",(0,a.jsx)(n.code,{children:"ready"})," first."]}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"cardNumberEl.on('ready', () => {\n // Safe to call cardNumberEl.focus(), cardNumberEl.clear(), etc.\n});\n"})})}),(0,a.jsx)(i.A,{value:"react",label:"React Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"<CardNumberElement\n ref={cardNumberRef}\n onReady={() => {\n // The element is mounted and ready for interaction\n }}\n/>\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["For straightforward collect-and-tokenize forms you do not need to wait for ",(0,a.jsx)(n.code,{children:"ready"})," before the user can type. The element becomes interactive as soon as it mounts. ",(0,a.jsx)(n.code,{children:"ready"})," is primarily useful when you need to drive the element programmatically."]}),"\n",(0,a.jsx)(n.h2,{id:"5-handle-validation-state",children:"5. Handle Validation State"}),"\n",(0,a.jsxs)(n.p,{children:["Each element emits a ",(0,a.jsx)(n.code,{children:"change"})," event whenever the user types. Use it to track whether all fields are complete and valid before enabling the submit button."]}),"\n",(0,a.jsxs)(n.p,{children:["The change event payload is in ",(0,a.jsx)(n.code,{children:"event.detail"}),":"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isValid"})," \u2014 input passes all validation rules"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isEmpty"})," \u2014 input is empty"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"error"})," \u2014 validation error object, or ",(0,a.jsx)(n.code,{children:"null"}
1)," if valid"]}),"\n"]}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"const submitBtn = document.getElementById('submit-btn');\n\nlet cardNumberValid = false;\nlet expiryValid = false;\nlet cvvValid = false;\n\nfunction updateSubmitButton() {\n submitBtn.disabled = !(cardNumberValid && expiryValid && cvvValid);\n}\n\ncardNumberEl.on('change', (event) => {\n cardNumberValid = event.detail.isValid;\n updateSubmitButton();\n});\n\nexpiryEl.on('change', (event) => {\n expiryValid = event.detail.isValid;\n updateSubmitButton();\n});\n\ncvvEl.on('change', (event) => {\n cvvValid = event.detail.isValid;\n updateSubmitButton();\n});\n"})})}),(0,a.jsx)(i.A,{value:"react",label:"React Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { useState, useRef } from 'react';\nimport {\n CardNumberElement,\n ExpiryElement,\n CVVElement,\n} from '@basis-theory/react-elements';\n\nfunction PaymentForm() {\n const cardNumberRef = useRef(null);\n const expiryRef = useRef(null);\n const cvvRef = useRef(null);\n\n const [cardNumberValid, setCardNumberValid] = useState(false);\n const [expiryValid, setExpiryValid] = useState(false);\n const [cvvValid, setCvvValid] = useState(false);\n\n const allValid = cardNumberValid && expiryValid && cvvValid;\n\n return (\n <form>\n <CardNumberElement\n ref={cardNumberRef}\n onChange={(event) => setCardNumberValid(event.detail.isValid)}\n />\n <ExpiryElement\n ref={expiryRef}\n onChange={(event) => setExpiryValid(event.detail.isValid)}\n />\n <CVVElement\n ref={cvvRef}\n onChange={(event) => setCvvValid(event.detail.isValid)}\n />\n <button type=\"submit\" disabled={!allValid}>Pay</button>\n </form>\n );\n}\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"change"})," event payload also includes ",(0,a.jsx)(n.code,{children:"cardBrand"}),", ",(0,a.jsx)(n.code,{children:"last4"}),", and ",(0,a.jsx)(n.code,{children:"bin"})," on ",(0,a.jsx)(n.code,{children:"cardNumber"})," elements. See ",(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/events",children:"Events"})," for the full reference."]}),"\n",(0,a.jsx)(n.h2,{id:"6-tokenize-on-submit",children:"6. Tokenize on Submit"}),"\n",(0,a.jsxs)(n.p,{children:["When the user submits the form, pass the element references directly to ",(0,a.jsx)(n.code,{children:"bt.tokens.create"}),". The SDK sends the raw card data directly from the iframes to Basis Theory \u2014 your application code never sees the card number."]}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",children:"document.getElementById('payment-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberEl,\n expiration_month: expiryEl,\n expiration_year: expiryEl,\n cvc: cvvEl,\n },\n });\n\n // Send token.id to your backend to charge the card\n console.log('Token created:', token.id);\n } catch (error) {\n console.error('Tokenization failed:', error);\n }\n});\n"})})}),(0,a.jsx)(i.A,{value:"react",label:"React Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { useState, useRef } from 'react';\nimport {\n CardNumberElement,\n ExpiryElement,\n CVVElement,\n useBasisTheory,\n} from '@basis-theory/react-elements';\n\nfunction PaymentForm() {\n const { bt } = useBasisTheory();\n const cardNumberRef = useRef(null);\n const expiryRef = useRef(null);\n const cvvRef = useRef(null);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: expiryRef.current,\n expiration_year: expiryRef.current,\n cvc: cvvRef.current,\n },\n });\n\n // Send token.id to your backend to charge the card\n console.log('Token created:', token.id);\n } catch (error) {\n console.error('Tokenization failed:', error);\n }\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <CardNumberElement ref={cardNumberRef} />\n <ExpiryElement ref={expiryRef} />\n <CVVElement ref={cvvRef} />\n <button type=\"submit\">Pay</button>\n </form>\n );\n}\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"token.id"})," is a safe, non-sensitive identifier you send to your backend. Use it with the ",(0,a.jsx)(n.a,{href:"/docs/api/tokens",children:"Basis Theory API"})," or a ",(0,a.jsx)(n.a,{href:"/docs/api/proxies/invoke-pre-configured-proxies",children:"proxy"})," to charge the card through your payment processor."]}),"\n",(0,a.jsx)(n.h2,{id:"complete-example",children:"Complete Example"}),"\n",(0,a.jsxs)(s.A,{className:"bt-tabs",queryString:"implementation",children:[(0,a.jsx)(i.A,{value:"web",label:"Web Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",children:"<!DOCTYPE html>\n<html>\n <head>\n <title>Payment Form</title>\n \x3c!-- Copy the CDN script tag from the Install section above --\x3e\n </head>\n <body>\n <form id=\"payment-form\">\n <div id=\"card-number-element\"></div>\n <div id=\"expiry-element\"></div>\n <div id=\"cvv-element\"></div>\n <button type=\"submit\" id=\"submit-btn\" disabled>Pay</button>\n </form>\n\n <script>\n document.addEventListener('DOMContentLoaded', async () => {\n try {\n // BasisTheory is available as a global after the CDN script loads\n const bt = BasisTheory('<PUBLIC_API_KEY>');\n\n const cardNumberEl = bt.createElement('cardNumber');\n const expiryEl = bt.createElement('expiry');\n const cvvEl = bt.createElement('cvv');\n\n await Promise.all([\n cardNumberEl.mount('#card-number-element'),\n expiryEl.mount('#expiry-element'),\n cvvEl.mount('#cvv-element'),\n ]);\n\n const submitBtn = document.getElementById('submit-btn');\n let cardNumberValid = false;\n let expiryValid = false;\n let cvvValid = false;\n\n function updateSubmitButton() {\n submitBtn.disabled = !(cardNumberValid && expiryValid && cvvValid);\n }\n\n cardNumberEl.on('change', (event) => {\n cardNumberValid = event.detail.isValid;\n updateSubmitButton();\n });\n\n expiryEl.on('change', (event) => {\n expiryValid = event.detail.isValid;\n updateSubmitButton();\n });\n\n cvvEl.on('change', (event) => {\n cvvValid = event.detail.isValid;\n updateSubmitButton();\n });\n\n document.getElementById('payment-form').addEventListener('submit', async (e) => {\n e.preventDefault();\n submitBtn.disabled = true;\n\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberEl,\n expiration_month: expiryEl,\n expiration_year: expiryEl,\n cvc: cvvEl,\n },\n });\n\n console.log('Token created:', token.id);\n } catch (error) {\n console.error('Tokenization failed:', error);\n updateSubmitButton();\n }\n });\n } catch (error) {\n console.error('Failed to initialize Elements:', error);\n }\n });\n <\/script>\n </body>\n</html>\n"})})}),(0,a.jsx)(i.A,{value:"react",label:"React Elements",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import { use
1State, useRef } from 'react';\nimport {\n BasisTheoryProvider,\n CardNumberElement,\n ExpiryElement,\n CVVElement,\n useBasisTheory,\n} from '@basis-theory/react-elements';\n\nfunction PaymentForm() {\n const { bt, error } = useBasisTheory();\n const cardNumberRef = useRef(null);\n const expiryRef = useRef(null);\n const cvvRef = useRef(null);\n\n const [cardNumberValid, setCardNumberValid] = useState(false);\n const [expiryValid, setExpiryValid] = useState(false);\n const [cvvValid, setCvvValid] = useState(false);\n const [submitting, setSubmitting] = useState(false);\n\n const allValid = cardNumberValid && expiryValid && cvvValid;\n\n if (error) return <div>Failed to load payment form.</div>;\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setSubmitting(true);\n\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: expiryRef.current,\n expiration_year: expiryRef.current,\n cvc: cvvRef.current,\n },\n });\n\n console.log('Token created:', token.id);\n } catch (err) {\n console.error('Tokenization failed:', err);\n } finally {\n setSubmitting(false);\n }\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <CardNumberElement\n ref={cardNumberRef}\n onChange={(event) => setCardNumberValid(event.detail.isValid)}\n />\n <ExpiryElement\n ref={expiryRef}\n onChange={(event) => setExpiryValid(event.detail.isValid)}\n />\n <CVVElement\n ref={cvvRef}\n onChange={(event) => setCvvValid(event.detail.isValid)}\n />\n <button type=\"submit\" disabled={!allValid || submitting}>\n {submitting ? 'Processing...' : 'Pay'}\n </button>\n </form>\n );\n}\n\nexport default function App() {\n return (\n <BasisTheoryProvider apiKey='<PUBLIC_API_KEY>'>\n <PaymentForm />\n </BasisTheoryProvider>\n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.h2,{id:"next-steps",children:"Next Steps"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/components",children:"Element Types"})," \u2014 available element types and their options"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/events",children:"Events"})," \u2014 full event reference for ",(0,a.jsx)(n.code,{children:"change"}),", ",(0,a.jsx)(n.code,{children:"focus"}),", ",(0,a.jsx)(n.code,{children:"blur"}),", ",(0,a.jsx)(n.code,{children:"error"}),", and more"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/services",children:"Services"})," \u2014 tokens, token intents, sessions, and proxy"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/initialization",children:"Initialization Options"})," \u2014 full init options and framework-specific setup"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/lifecycle",children:"Element Lifecycle"})," \u2014 understand how elements move from creation to cleanup"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/migration",children:"Migration Guide"})," \u2014 upgrading from v2"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:"/docs/sdks/web/web-elements/v3/troubleshooting",children:"Troubleshooting"})," \u2014 common issues and solutions"]}),"\n"]})]})}function p(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(b,{...e})}):b(e)}},64011:(e,n,t)=>{t.d(n,{P:()=>o});var r=t(96540),a=t(94335),l=t(71765);function s(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}
1)))),r.forEach((function(n){s(e,n,t[n])}))}return e}const c="https://js.basistheory.com",o=({organization:e,repository:n,cdnUrl:t,npmTag:s})=>{const[o,d]=(0,r.useState)("");return(0,r.useEffect)((()=>{if(t)return void d(`\x3c!-- Exports BasisTheory as a global variable --\x3e\n<script src="${t}"><\/script>`);if(s){return void(async()=>{try{var e,n,t;const{data:r}=await a.A.get(`https://registry.npmjs.org/@basis-theory/web-elements/${s}`),l=r.version,{data:i}=await a.A.get(`${c}/${l}/web-elements/sri.json`),o=null===(t=i.versions)||void 0===t||null===(n=t[l])||void 0===n||null===(e=n.loader)||void 0===e?void 0:e.hash,m=`${c}/${l}/web-elements/basis-theory.js`;d(o?`\x3c!-- Exports BasisTheory as a global variable --\x3e\n<script\n src="${m}"\n integrity="${o}"\n crossorigin="anonymous"\n><\/script>`:`\x3c!-- Exports BasisTheory as a global variable --\x3e\n<script src="${m}"><\/script>`)}catch(r){console.error("Error fetching v3 SRI:",r),d(`\x3c!-- Exports BasisTheory as a global variable --\x3e\n<script\n src="${c}/{VERSION}/web-elements/basis-theory.js"\n integrity="{hash-from-sri.json}"\n crossorigin="anonymous"\n><\/script>`)}})()}(async()=>{try{const{data:e}=await a.A.get(`${c}/sri/?version`);d(` \x3c!-- Including this tag will export a global/window "basistheory" variable --\x3e\n ${null==e?void 0:e.html}`)}catch(e){console.error("Error fetching latest release:",e)}})()}),[e,n,t,s]),r.createElement(l.f4,{code:o||"",language:"html"},(({className:e,style:n,tokens:t,getLineProps:a,getTokenProps:l})=>r.createElement("pre",null,t.map(((e,n)=>r.createElement("div",i({key:n},a({line:e})),r.createElement("span",null,n+1),e.map(((e,n)=>r.createElement("span",i({key:n},l({token:e})))))))))))}},85202:(e,n,t)=>{t.d(n,{F:()=>B,W:()=>A});var r=t(34164),a=t(96540);const l="container_ygYU",s="title_KE4f",i="content_mpoX",c="error_YPD5",o="warning_Vv3u",d="info_XpSc",m="success_pFpA",u="neutral_bgLU",h="svg_xN_H";var b;function p(){return p=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},p.apply(null,arguments)}const v=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",p({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?a.createElement("title",{id:t},n):null,b||(b=a.createElement("path",{fill:"#F56C9D",fillRule:"evenodd",d:"M9 1.438A7.557 7.557 0 0 0 1.438 9 7.557 7.557 0 0 0 9 16.563 7.56 7.56 0 0 0 16.563 9 7.56 7.56 0 0 0 9 1.438M.063 9A8.93 8.93 0 0 1 9 .063 8.937 8.937 0 0 1 17.938 9 8.937 8.937 0 0 1 9 17.938 8.93 8.93 0 0 1 .063 9M9 4.188c.38 0 .688.307.688.687v4.583a.687.687 0 1 1-1.376 0V4.875c0-.38.308-.687.688-.687m-.006 7.791H9q.034 0 .067.003c.444.038.85.4.85.914 0 .27-.122.496-.272.645a.92.92 0 0 1-.645.271.92.92 0 0 1-.917-.916.914.914 0 0 1 .908-.917z",clipRule:"evenodd"})))};var y,f;function x(){return x=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(null,arguments)}const g=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",x({xmlns:"http://www.w3.org/2000/svg",width:20,height:18,fill:"none",viewBox:"0 0 20 18","aria-labelledby":t},r),n?a.createElement("title",{id:t},n):null,y||(y=a.createElement("path",{fill:"#FFA726",fillRule:"evenodd",d:"M7.656 1.614c1.04-1.809 3.649-1.809 4.689 0l7.055 12.27c1.037 1.803-.264 4.053-2.344 4.053H2.945c-2.08 0-3.381-2.25-2.345-4.052zm3.497.685a1.33 1.33 0 0 0-2.305 0L1.792 14.57a1.33 1.33 0 0 0 1.153 1.992h14.111a1.33 1.33 0 0 0 1.152-1.992z",clipRule:"evenodd"})),f||(f=a.createElement("path",{fill:"#FFA726",fillRule:"evenodd",d:"M10.001 5.883c.38 0 .688.308.688.688v3.428a.687.687 0 1 1-1.376 0V6.571c0-.38.308-.688.688-.688m-.006 6.183H10q.034 0 .068.003c.443.038.849.4.849.914 0 .27-.122.496-.271.645A.92.92 0 0 1 10 13.9a.92.92 0 0 1-.917-.916.914.914 0 0 1 .908-.917z",clipRule:"evenodd"})))};var j,E;function w(){return w=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},w.apply(null,arguments)}const N=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",w({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?a.createElement("title",{id:t},n):null,j||(j=a.createElement("path",{fill:"#00B68A",fillRule:"evenodd",d:"M5.58.743a8.937 8.937 0 1 1 6.84 16.514A8.937 8.937 0 0 1 5.58.743M9 1.438a7.562 7.562 0 1 0 0 15.124A7.562 7.562 0 0 0 9 1.437",clipRule:"evenodd"})),E||(E=a.createElement("path",{fill:"#00B68A",fillRule:"evenodd",d:"M12.664 6.31c.268.268.269.703 0 .972l-4.34 4.35a.69.69 0 0 1-1.087.151l-.018-.018L5.25 9.797a.688.688 0 1 1 .972-.972l1.481 1.481 3.987-3.995a.69.69 0 0 1 .973-.001",clipRule:"evenodd"})))};var k,R;function V(){return V=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},V.apply(null,arguments)}const S=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",V({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?a.createElement("title",{id:t},n):null,k||(k=a.createElement("path",{fill:"#29B6F6",fillRule:"evenodd",d:"M9.45 4.966a.69.69 0 0 0-.587-.33.914.914 0 0 0-.917.917.92.92 0 0 0 .917.917c.27 0 .495-.122.645-.271a.92.92 0 0 0 .271-.646.69.69 0 0 0-.33-.587M7.396 12.208c0-.38.308-.687.687-.687h2.118a.687.687 0 1 1 0 1.375H8.083a.69.69 0 0 1-.687-.688",clipRule:"evenodd"})),R||(R=a.createElement("path",{fill:"#29B6F6",fillRule:"evenodd",d:"M5.58.743a8.937 8.937 0 1 1 6.84 16.514A8.937 8.937 0 0 1 5.58.743M9 1.438a7.562 7.562 0 1 0 0 15.124A7.562 7.562 0 0 0 9 1.437m-.495 4.479a.687.687 0 0 0 1.265-.373.91.91 0 0 0-.97-.905.687.687 0 0 0-.295 1.278m-1.1 2.396c0-.38.307-.688.687-.688h1.054c.38 0 .687.308.687.688v3.895a.687.687 0 1 1-1.375 0V9h-.366a.69.69 0 0 1-.688-.687",clipRule:"evenodd"})))};var A=function(e){return e.ERROR="error",e.WARNING="warning",e.INFO="info",e.SUCCESS="success",e.NEUTRAL="neutral",e}({});const B=({type:e="info",title:n,content:t,children:b})=>{const p=(0,r.A)({[c]:"error"==e,[o]:"warning"==e,[d]:"info"==e,[m]:"success"==e,[u]:"neutral"==e}),y={error:v,warning:g,info:S,success:N}[e];return a.createElement("div",{className:(0,r.A)([l,p,"alert"])},y&&a.createElement("div",null,a.createElement(y,{className:h})),a.createElement("div",null,n&&a.createElement("div",{className:s},n),a.createElement("div",{className:i},null!=t?t:b)))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.