1/*! For license information please see 5cb11f44.b3ec0bc8.js.LICENSE.txt */ 2"use strict";(self.webpackChunkdevelopers_basistheory_com=self.webpackChunkdevelopers_basistheory_com||[]).push([[4893],{33513:(e,n,t)=>{t.d(n,{Ay:()=>s,RM:()=>o});var r=t(74848),a=t(28453),i=t(35785);const o=[];function l(e){const n={a:"a",p:"p",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(n.p,{children:[(0,r.jsx)(n.a,{href:"/docs/concepts/elements",children:"Basis Theory Elements"})," are available for the following technologies. Click below for detailed instructions on how to install and configure them."]}),"\n",(0,r.jsx)(i.H,{type:"elements"})]})}function s(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(l,{...e})}):l(e)}},72475:(e,n,t)=>{t.d(n,{Ay:()=>c,RM:()=>l});var r=t(74848),a=t(28453),i=t(85202),o=t(49160);const l=[{value:"Getting Started",id:"getting-started",level:2}];function s(e){const n={a:"a",em:"em",h2:"h2",p:"p",...(0,a.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"getting-started",children:"Getting Started"}),"\n",(0,r.jsxs)(n.p,{children:["To get started, you will need to create a ",(0,r.jsx)(n.a,{href:"/docs/concepts/access-controls#basis-theory-account",children:"Basis Theory Account"})," and a ",(0,r.jsx)(n.a,{href:"/docs/concepts/access-controls#what-are-tenants",children:"TEST Tenant"}),"."]}),"\n",(0,r.jsx)(o.W,{}),"\n",(0,r.jsxs)(i.F,{type:i.W.WARNING,children:["Be sure to use your work email (e.g., ",(0,r.jsxs)(n.em,{children:["john.doe@",(0,r.jsx)("span",{children:"yourcompany.com"})]}),")"]})]})}function c(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(s,{...e})}):s(e)}},89542:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>u,default:()=>g,frontMatter:()=>h,metadata:()=>r,toc:()=>m});const r=JSON.parse('{"id":"guides/collect/collect-cards","title":"Collect Cards","description":"This guide is deprecated. Check out our updated guide: Replace Processor iFrames","source":"@site/docs/guides/collect/collect-cards.mdx","sourceDirName":"guides/collect","slug":"/guides/collect/collect-cards","permalink":"/docs/guides/collect/collect-cards","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1790020069000,"frontMatter":{}}');var a=t(74848),i=t(28453),o=t(13187),l=t(83227),s=t(85202),c=t(72475),d=t(33513);const h={},u="Collect Cards",p={},m=[...c.RM,{value:"Creating a Public Application",id:"creating-a-public-application",level:3},{value:"Configuring Basis Theory Elements",id:"configuring-basis-theory-elements",level:2},...d.RM,{value:"Adding Card Elements",id:"adding-card-elements",level:2},{value:"Storing Cards",id:"storing-cards",level:2},{value:"Customizing Tokens",id:"customizing-tokens",level:2},{value:"Deduplication",id:"deduplication",level:3},{value:"Masking",id:"masking",level:3},{value:"Aliasing",id:"aliasing",level:3},{value:"Conclusion",id:"conclusion",level:2}];function f(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components},{ImageLink:t}=n;return t||function(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("ImageLink",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"collect-cards",children:"Collect Cards"})}),"\n",(0,a.jsxs)(s.F,{type:s.W.WARNING,children:["This guide is deprecated. Check out our updated guide: ",(0,a.jsx)(n.a,{href:"/docs/card-payments/replace-processor-iframes",children:"Replace Processor iFrames"})]}),"\n",(0,a.jsx)(n.p,{children:"When building an e-commerce application, subscription service, or enabling one-time purchases, one of the critical requirements is collecting and storing cardholder data securely. However, it can be challenging to navigate PCI DSS and ensure that your application meets all the necessary security controls required to comply."}),"\n",(0,a.jsxs)(n.p,{children:["In this guide, we will set up Basis Theory SDKs to capture cards in a frontend application, Web or Mobile, and securely store the cardholder data as tokens with the Basis Theory Platform. Given this guide is followed step by step, you are substantially de-scoping your user-facing applications and database from PCI DSS compliance. If you want to learn more how we can help you meet up to 95% of the PCI requirements, or if you need help filling out your SAQ, ",(0,a.jsx)(n.a,{href:"https://basistheory.com/contact",children:"reach out to our team"}),"!"]}),"\n",(0,a.jsx)(t,{src:"/img/guides/collect/collect-cards-flowchart.png",alt:"Collect Cards Flowchart"}),"\n",(0,a.jsxs)(n.p,{children:["If you are looking for a way to use your inputs to capture your user's cards, and understand the security concerns and compliance impact it represents, follow the ",(0,a.jsx)(n.a,{href:"/docs/card-payments/use-your-own-inputs",children:"Collect Cards With Your Inputs"})," guide."]}),"\n",(0,a.jsx)(c.Ay,{}),"\n",(0,a.jsx)(n.h3,{id:"creating-a-public-application",children:"Creating a Public Application"}),"\n",(0,a.jsxs)(n.p,{children:["Next you will need a ",(0,a.jsx)(n.a,{href:"/docs/api/applications",children:"Public Application"})," using our PCI-compliant template ",(0,a.jsx)(n.code,{children:"Collect PCI Data"}),". ",(0,a.jsx)(n.a,{href:"https://portal.basistheory.com/applications/create?application_template_id=db9148c1-a55f-4164-b830-a20ab6d720ae",children:"Click here to create one."})]}),"\n",(0,a.jsxs)(n.p,{children:["This will create an application with the following ",(0,a.jsx)(n.a,{href:"/docs/concepts/access-controls",children:"Access Controls"}),":"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Permissions: ",(0,a.jsx)(n.code,{children:"token:create"}),", ",(0,a.jsx)(n.code,{children:"token:update"})]}),"\n",(0,a.jsxs)(n.li,{children:["Containers: ",(0,a.jsx)(n.code,{children:"/pci/"})]}),"\n",(0,a.jsxs)(n.li,{children:["Transform: ",(0,a.jsx)(n.code,{children:"mask"})]}),"\n"]}),"\n",(0,a.jsx)(s.F,{children:"Save the API Key from the created Public Application as it will be used later in this guide."}),"\n",(0,a.jsx)(n.h2,{id:"configuring-basis-theory-elements",children:"Configuring Basis Theory Elements"}),"\n",(0,a.jsx)(d.Ay,{}),"\n",(0,a.jsx)(n.h2,{id:"adding-card-elements",children:"Adding Card Elements"}),"\n",(0,a.jsx)(n.p,{children:"Once installed and configured, add the Card Elements to your application. This will enable your users to type in their card data in your form, while ensuring your systems never come in contact with the data."}),"\n",(0,a.jsxs)(s.F,{children:["Alternatively, you can follow ",(0,a.jsx)("a",{href:"/docs/guides/collect/collect-cards-single-element",children:"this guide"})," for using a single ",(0,a.jsx)("code",{children:"CardElement"})," with Javascript or React."]}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsxs)(l.A,{value:"javascript",label:"JavaScript",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",metastring:"showLineNumbers title=index.html",children:'<div id="cardNumber"></div>\n<div style="display: flex;">\n <div id="cardExpirationDate" style="width: 100%;"></div>\n <div id="cardVerificationCode" style="width: 100%;"></div>\n</div>\n'})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"import { basistheory } from '@basis-theory/web-elements';\n\nlet bt;\nlet cardNumberElement;\nlet cardExpirationDateElement;\nlet cardVerificationCodeElement;
2\n\nasync function init() {\n bt = await basistheory('<API_KEY>', { 'environment': 'test'});\n\n //highlight-start\n // Creates Elements instances\n cardNumberElement = bt.createElement('cardNumber', {\n targetId: 'myCardNumber' // (custom) used for tracking validation errors\n });\n cardExpirationDateElement = bt.createElement('cardExpirationDate', {\n targetId: 'myCardExpiration'\n });\n cardVerificationCodeElement = bt.createElement('cardVerificationCode', {\n targetId: 'myCardVerification'\n });\n //highlight-end\n\n //highlight-start\n // Mounts Elements in the DOM in parallel\n await Promise.all([\n cardNumberElement.mount('#cardNumber'),\n cardExpirationDateElement.mount('#cardExpirationDate'),\n cardVerificationCodeElement.mount('#cardVerificationCode'),\n ]);\n //highlight-end\n\n //highlight-start\n // Binds card brand to verification code element\n cardNumberElement.on('change', ({ cardBrand }) => {\n cardVerificationCodeElement.update({ cardBrand });\n });\n //highlight-end\n}\n\ninit();\n"})})]}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"import React, { useRef, useState } from 'react';\nimport {\n BasisTheoryProvider,\n // highlight-start\n CardNumberElement,\n CardExpirationDateElement,\n CardVerificationCodeElement,\n //highlight-end\n useBasisTheory,\n} from '@basis-theory/react-elements';\n\nexport default function App() {\n const { bt } = useBasisTheory('<API_KEY>', { 'environment': 'test'});\n // highlight-start\n // Refs to get access to the Elements instance\n const cardNumberRef = useRef(null);\n const cardExpirationRef = useRef(null);\n const cardVerificationRef = useRef(null);\n // highlight-end\n\n // highlight-start\n // stores the current card brand in state, to pass to CardVerificationCodeElement\n const [cardBrand, setCardBrand] = useState();\n // highlight-end\n\n return (\n <BasisTheoryProvider bt={bt}>\n // highlight-start\n <CardNumberElement\n id=\"myCardNumber\"\n ref={cardNumberRef}\n onChange={({ cardBrand }) => setCardBrand(cardBrand)}\n />\n // highlight-end\n <div style={{ display: 'flex' }}>\n <div style={{ width: \"100%\" }}>\n // highlight-start\n <CardExpirationDateElement\n id=\"myCardExpiration\"\n ref={cardExpirationRef}\n />\n // highlight-end\n </div>\n <div style={{ width: \"100%\" }}>\n // highlight-start\n <CardVerificationCodeElement\n id=\"myCardVerification\"\n ref={cardVerificationRef}\n cardBrand={cardBrand}\n />\n // highlight-end\n </div>\n </div>\n </BasisTheoryProvider>\n );\n}\n"})})}),(0,a.jsx)(l.A,{value:"ios",label:"iOS",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:"import Foundation\nimport UIKit\n// highlight-next-line\nimport BasisTheoryElements\nimport Combine\n\nclass ViewController: UIViewController {\n // highlight-start\n @IBOutlet weak var cardNumberTextField: CardNumberUITextField!\n @IBOutlet weak var expirationDateTextField: CardExpirationDateUITextField!\n @IBOutlet weak var cvcTextField: CardVerificationCodeUITextField!\n // highlight-end\n\n override func viewDidLoad() {\n super.viewDidLoad()\n\n // highlight-start\n // Binds card brand to verification code element\n let cvcOptions = CardVerificationCodeOptions(cardNumberUITextField: cardNumberTextField)\n cvcTextField.setConfig(options: cvcOptions)\n // highlight-end\n }\n}\n"})})}),(0,a.jsxs)(l.A,{value:"android",label:"Android",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",metastring:"showLineNumbers title=activity_main.xml",children:'<?xml version="1.0" encoding="utf-8"?>\n<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"\n xmlns:app="http://schemas.android.com/apk/res-auto"\n xmlns:tools="http://schemas.android.com/tools"\n android:layout_width="match_parent"\n android:layout_height="match_parent"\n tools:context=".MainActivity">\n\n <LinearLayout\n android:layout_width="match_parent"\n android:layout_height="wrap_content"\n android:layout_margin="20dp"\n android:orientation="vertical"\n app:layout_constraintEnd_toEndOf="parent"\n app:layout_constraintStart_toStartOf="parent"\n app:layout_constraintTop_toTopOf="parent">\n\n // highlight-start\n <com.basistheory.android.view.CardNumberElement\n android:id="@+id/card_number"\n android:layout_width="match_parent"\n android:layout_height="wrap_content" />\n <com.basistheory.android.view.CardExpirationDateElement\n android:id="@+id/expiration_date"\n android:layout_width="match_parent"\n android:layout_height="wrap_content" />\n <com.basistheory.android.view.CardVerificationCodeElement\n android:id="@+id/cvc"\n android:layout_width="match_parent"\n android:layout_height="wrap_content" />\n // highlight-end\n </LinearLayout>\n\n</androidx.constraintlayout.widget.ConstraintLayout>\n'})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:"// highlight-start\nimport com.basistheory.android.view.CardNumberElement\nimport com.basistheory.android.view.CardExpirationDateElement\nimport com.basistheory.android.view.CardVerificationCodeElement\nimport com.basistheory.android.service.BasisTheoryElements\n// highlight-end\n\nclass MainActivity : AppCompatActivity() {\n\n // highlight-start\n private lateinit var cardNumberElement: CardNumberElement\n private lateinit var cardExpirationDateElement: CardExpirationDateElement\n private lateinit var cardVerificationCodeElement: CardVerificationCodeElement\n // highlight-end\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n // highlight-start\n cardNumberElement = findViewById(R.id.card_number)\n cardExpirationDateElement = findViewById(R.id.expiration_date)\n cardVerificationCodeElement = findViewById(R.id.cvc)\n\n // Binds card brand to verification code element\n cardVerificationCodeElement.cardNumberElement = cardNumberElement\n // highlight-end\n }\n}\n"})})]}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:'import React, { useRef } from "react";\nimport { SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from "react-native";\nimport type { BTRef } from "@basis-theory/react-native-elements";\nimport { CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement } from "@basis-theory/react-native-elements";\n\nconst App = (): JSX.Element => {\n // highlight-start\n const cardNumberRef = useRef<BTRef>(null);\n const cardExpirationDateRef = useRef<BTRef>(null);\n const cardVerificationCodeRef = useRef<BTRef>(null);\n // highlight-end\n\n return (\n <SafeAreaView>\n <StatusBar />\n <ScrollView contentInsetAdjustmentBehavior="automatic">\n <View style={styles.viewContainer}>\n // highlight-start\n <CardNumberElement btRef={cardNumberRef} placeholder="Card Number" style={styles.elements} />\n <CardExpirationDateElement btRef={cardExpirationDateRef} placeholder="Card Expiration Date" style={styles.elements} />\n <CardVerificationCodeElement btRef={cardVerificationCodeRef} placeholder="CVC" style={styles.elements} />\n // highlight-end\n </View>\n </ScrollView>\n </SafeAreaView>\n );\n};\n\nconst styles = StyleSheet.create({\n cardNumber: {\n backgroundColor: "#eeeeee",\n borderColor: "blue",\n borderWidth: 2,\n color: "purple",\n height: 40,\n margin: 12,\n padding: 10,\n },\n viewContainer: {\n display: "flex",\n flexDirection: "column",\n marginTop: 32,\n },\n});\n\nexport default App;\n'})})})]}),"\n",(0,a.jsx)(n.h2,{id:"storing-cards",children:"Storing Cards"}),"\n",(0,a.jsx)(n.p,{children:"Now that you are securely capturing the cardholder data in your user-facing application(s), it is time to store it in your Basis Theory Tenant."}),"\n",(0,a.jsxs)(n.p,{children:["To do this, we will invoke the ",(0,a.jsx)(n.a,{href:"https://developers.basistheory.com/docs/api/tokens/#create-token",children:"Create Token"})," endpoint from the SDK, passing the Card Elements as data points in the payload. This will securely create a ",(0,a.jsx)(n.code,{children:"card"})," token by transferring the card information from the frontend Elements to Basis Theory, where the data will be strongly encrypted and stored in a compliant environment."]}),"\n",(0,a.jsx)(n.p,{children:"Add a submit function along with a button to trigger it:"}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsxs)(l.A,{value:"javascript",label:"JavaScript",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-html",metastring:"showLineNumbers title=index.html",children:'<div id="cardNumber"></div>\n<div style="display: flex;">\n <div id="cardExpirationDate" style="width: 100%;"></div>\n <div id="cardVerificationCode" style="width: 100%;"></div>\n</div>\n// highlight-next-line\n<button id="submit">Submit</button>\n'})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"import { BasisTheory } from '@basis-theory/basis-theory-js';\n\nlet bt;\nlet cardNumberElement;\nlet cardExpirationDateElement;\nlet cardVerificationCodeElement;\n\nasync function init () {\n ...\n //highlight-next-line\n document.getElementById(\"submit\").addEventListener(\"click\", submit);\n}\n\n// highlight-start\nasync function submit () {\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberElement,\n expiration_month: cardExpirationDateElement.month(),\n expiration_year: cardExpirationDateElement.year(),\n cvc: cardVerificationCodeElement,\n }\n });\n // store token.id in your database\n } catch (error) {\n console.error(error);\n }\n}\n// highlight-end\n\ninit();\n"})})]}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"import React, { useRef, useState } from 'react';
2\nimport {\n BasisTheoryProvider,\n CardNumberElement,\n CardExpirationDateElement,\n CardVerificationCodeElement,\n useBasisTheory,\n} from '@basis-theory/react-elements';\n\nexport default function App() {\n const { bt } = useBasisTheory('<API_KEY>', { 'environment': 'test'});\n // Refs to get access to the Elements instance\n const cardNumberRef = useRef(null);\n const cardExpirationRef = useRef(null);\n const cardVerificationRef = useRef(null);\n // stores the current card brand in state, to pass to CardVerificationCodeElement\n const [cardBrand, setCardBrand] = useState();\n\n // highlight-start\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n }\n });\n // store token.id in your database\n } catch (error) {\n console.error(error);\n }\n }\n // highlight-end\n\n return (\n <BasisTheoryProvider bt={bt}>\n ...\n // highlight-next-line\n <button onClick={submit}>Submit</button>\n </BasisTheoryProvider>\n );\n}\n"})})}),(0,a.jsxs)(l.A,{value:"ios",label:"iOS",children:[(0,a.jsxs)(n.p,{children:["Add a new ",(0,a.jsx)(n.code,{children:"UIButton"})," to your ",(0,a.jsx)(n.code,{children:"Main.storyboard"})," and create a new Action for it called ",(0,a.jsx)(n.code,{children:"submit"}),"."]}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:'import Foundation\nimport UIKit\nimport BasisTheoryElements\nimport Combine\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberTextField: CardNumberUITextField!\n @IBOutlet weak var expirationDateTextField: CardExpirationDateUITextField!\n @IBOutlet weak var cvcTextField: CardVerificationCodeUITextField!\n\n // highlight-start\n @IBAction func submit(_ sender: Any) {\n let body: [String: Any] = [\n "type": "card",\n "data": [\n "number": self.cardNumberTextField,\n "expiration_month": self.expirationDateTextField.month(),\n "expiration_year": self.expirationDateTextField.year(),\n "cvc": self.cvcTextField\n ]\n ]\n\n BasisTheoryElements.tokenize(body: body, apiKey: "<API_KEY>") { token, error in\n guard error == nil else {\n print(error)\n return\n }\n // store token.id in your database\n }\n }\n // highlight-end\n\n override func viewDidLoad() { ... }\n\n}\n'})})]}),(0,a.jsxs)(l.A,{value:"android",label:"Android",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-xml",metastring:"showLineNumbers title=activity_main.xml",children:'<?xml version="1.0" encoding="utf-8"?>\n<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"\n xmlns:app="http://schemas.android.com/apk/res-auto"\n xmlns:tools="http://schemas.android.com/tools"\n android:layout_width="match_parent"\n android:layout_height="match_parent"\n tools:context=".MainActivity">\n\n <LinearLayout\n android:layout_width="match_parent"\n android:layout_height="wrap_content"\n android:layout_margin="20dp"\n android:orientation="vertical"\n app:layout_constraintEnd_toEndOf="parent"\n app:layout_constraintStart_toStartOf="parent"\n app:layout_constraintTop_toTopOf="parent">\n\n ...\n\n // highlight-start\n <Button\n android:id="@+id/submit_button"\n android:layout_width="wrap_content"\n android:layout_height="wrap_content"\n android:layout_marginTop="20dp"\n android:backgroundTint="#00A4BA"\n android:text="Submit" />\n // highlight-end\n </LinearLayout>\n\n</androidx.constraintlayout.widget.ConstraintLayout>\n'})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:'import
2com.basistheory.android.view.CardNumberElement\nimport com.basistheory.android.view.CardExpirationDateElement\nimport com.basistheory.android.view.CardVerificationCodeElement\nimport com.basistheory.android.service.BasisTheoryElements\n\nclass MainActivity : AppCompatActivity() {\n\n private lateinit var cardNumberElement: CardNumberElement\n private lateinit var cardExpirationDateElement: CardExpirationDateElement\n private lateinit var cardVerificationCodeElement: CardVerificationCodeElement\n // highlight-start\n private lateinit var button: Button;\n\n private val bt = BasisTheoryElements.builder()\n .apiKey("<API_KEY>")\n .environment(Environment.TEST)\n .build()\n // highlight-end\n\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n\n cardNumberElement = findViewById(R.id.card_number)\n cardExpirationDateElement = findViewById(R.id.expiration_date)\n cardVerificationCodeElement = findViewById(R.id.cvc)\n // highlight-start\n button = findViewById(R.id.submit_button)\n button.setOnClickListener {\n submit()\n }\n // highlight-end\n\n // Binds card brand to verification code element\n cardVerificationCodeElement.cardNumberElement = cardNumberElement\n }\n\n // highlight-start\n private fun submit() {\n val token = runBlocking {\n bt.tokenize(object {\n val type = "card"\n val data = object {\n val number = cardNumberElement\n val expiration_month = cardExpirationDateElement.month()\n val expiration_year = cardExpirationDateElement.year()\n val cvc = cardVerificationCodeElement\n }\n })\n }\n // store token.id in your database\n }\n // highlight-end\n}\n'})})]}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:'import React, { useRef } from "react";\nimport { Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, View } from "react-native";\nimport type { BTRef } from "@basis-theory/react-native-elements";\nimport { CardNumberElement, CardExpirationDateElement, CardVerificationCodeElement, useBasisTheory } from "@basis-theory/react-native-elements";\n\nconst App = (): JSX.Element => {\n // highlight-next-line\n const { bt } = useBasisTheory(\'<PUBLIC_API_KEY>\', { \'environment\': \'test\'});\n\n const cardNumberRef = useRef<BTRef>(null);\n const cardExpirationDateRef = useRef<BTRef>(null);\n const cardVerificationCodeRef = useRef<BTRef>(null);\n\n // highlight-start\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n type: \'card\',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n }\n });\n // store token.id in your database\n } catch (error) {\n console.error(error);\n }\n }\n // highlight-end\n\n return (\n <SafeAreaView>\n <StatusBar />\n <ScrollView contentInsetAdjustmentBehavior="automatic">\n <View style={styles.viewContainer}>\n <CardNumberElement btRef={cardNumberRef} placeholder="Card Number" style={styles.elements} />\n <CardExpirationDateElement btRef={cardExpirationDateRef} placeholder="Card Expiration Date" style={styles.elements} />\n <CardVerificationCodeElement btRef={cardVerificationCodeRef} placeholder="CVC" style={styles.elements} />\n </View>\n // highlight-start\n <Button onPress={submit} title="Submit" />\n // highlight-end\n </ScrollView>\n </SafeAreaView>\n );\n};\n\nconst styles = StyleSheet.create({\n cardNumber: {\n backgroundColor: "#eeeeee",\n borderColor: "blue",\n borderWidth: 2,\n color: "purple",\n height: 40,\n margin: 12,\n padding: 10,\n },\n viewContainer: {\n display: "flex",\n flexDirection: "column",\n marginTop: 32,\n },\n});\n\nexport default App;\n'})})})]}),"\n",(0,a.jsxs)(s.F,{children:["Be sure to replace ",(0,a.jsx)("code",{children:"<API_KEY>"})," with the Public API Key you created in the ",(0,a.jsx)("a",{href:"#creating-a-public-application",children:"Creating a Public Application"})," step."]}),"\n",(0,a.jsxs)(n.p,{children:["The created ",(0,a.jsx)(n.code,{children:"card"}
2)," token object contains the non-sensitive information about the tokenized card, which follows the ",(0,a.jsx)(n.a,{href:"/docs/api/tokens/token-types#card",children:"Card Token specification"}),":"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",metastring:"showLineNumbers title=token.json",children:'{\n "id": "d2cbc1b4-5c3a-45a3-9ee2-392a1c475ab4",\n "type": "card",\n "tenant_id": "15f48eb5-8b52-4cdd-a396-608f7cf001d0",\n "data": {\n "number": "XXXXXXXXXXXX4242",\n "expiration_month": 12,\n "expiration_year": 2025\n },\n "created_by": "4a6ae2a6-79f8-4640-968f-88db913743df",\n "created_at": "2023-04-17T12:54:44.8320458+00:00",\n "mask": {\n "number": "{{ data.number | reveal_last: 4 }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n },\n "search_indexes": [],\n "containers": [\n "/pci/high/"\n ]\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["You can safely store the token's primary key ",(0,a.jsx)(n.code,{children:"id"})," in your database to link it with the appropriate checkout, user profile, subscription, or any other record that requires association with the card."]}),"\n",(0,a.jsxs)(n.p,{children:["Notice how the card ",(0,a.jsx)(n.code,{children:"number"}),", also known as Primary Account Number (PAN), has been masked before it is returned to your application. This default behavior prevents your application being pulled in additional PCI DSS scope, since it only comes in contact with a truncated portion of the cardholder data. Later in this guide we will learn how to ",(0,a.jsx)(n.a,{href:"#masking",children:"customize masking"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"customizing-tokens",children:"Customizing Tokens"}),"\n",(0,a.jsxs)(n.p,{children:["The steps so far cover most cases when you need to collect cards in your frontend and store them in a secure location. However, in some scenarios you may need to customize your card tokens for specific business needs or technical requirements. In the following sections, you will find optional steps to follow for common problems solved by ",(0,a.jsx)(n.a,{href:"/docs/concepts/what-are-tokens#what-are-the-capabilities-of-a-token",children:"Basis Theory Token capabilities"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"deduplication",children:"Deduplication"}),"\n",(0,a.jsx)(n.p,{children:"Companies often find it necessary to uniquely identify cards flowing through their systems for various reasons, which may include: preventing fraudulent transactions, detecting credit cards abuse, building consumer profiles or streamlining payment processing for a better user experience."}),"\n",(0,a.jsxs)(n.p,{children:["By leveraging ",(0,a.jsx)(n.a,{href:"/docs/concepts/what-are-tokens#fingerprinting",children:"token fingerprinting"}),", developers can recognize the tokenized data in a customizable fashion, without having to touch the plaintext data. For cards, it is common to index in the Primary Account Number (PAN). In some cases the expiration date may also be considered."]}),"\n",(0,a.jsx)(n.p,{children:"When making the tokenization request to store the card, pass a fingerprint expression to instruct Basis Theory to calculate the fingerprint for the sensitive data field:"}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsx)(l.A,{value:"javascript",label:"JavaScript",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"async function submit () {\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberElement,\n expiration_month: cardExpirationDateElement.month(),\n expiration_year: cardExpirationDateElement.year(),\n cvc: cardVerificationCodeElement,\n },\n // highlight-start\n fingerprintExpression: '{{ data.number }}',\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n}\n"})})}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"export default function App() {\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n },\n // highlight-start\n fingerprintExpression: '{{ data.number }}',\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n return (...);\n}\n"})})}),(0,a.jsx)(l.A,{value:"ios",label:"iOS",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:'class ViewController: UIViewController {\n @IBAction func submit(_ sender: Any) {\n let body: [String: Any] = [\n "type": "card",\n "data": [\n "number": self.cardNumberTextField,\n "expiration_month": self.expirationDateTextField.month(),\n "expiration_year": self.expirationDateTextField.year(),\n "cvc": self.cvcTextField\n ],\n // highlight-start\n "fingerprint_expression": "{{ data.number }}"\n // highlight-end\n ]\n\n BasisTheoryElements.tokenize(body: body, apiKey: "<API_KEY>") { token, error in\n guard error == nil else {\n print(error)\n return\n }\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"android",label:"Android",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:'class MainActivity : AppCompatActivity() {\n\n private fun submit() {\n val token = runBlocking {\n bt.tokens.create(object {\n val type = "card"\n val data = object {\n val number = cardNumberElement\n val expiration_month = cardExpirationDateElement.month()\n val expiration_year = cardExpirationDateElement.year()\n val cvc = cardVerificationCodeElement\n }\n // highlight-start\n val fingerprint_expression = "{{ data.number }}"\n // highlight-end\n })\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:"const App = (): JSX.Element => {\n const { bt } = useBasisTheory('<PUBLIC_API_KEY>', { 'environment': 'test'});\n ...\n const submit = async () => {\n try {\n const _token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationDateRef.current?.month(),\n expiration_year: cardExpirationDateRef.current?.year(),\n cvc: cardVerificationCodeRef.current,\n },\n // highlight-start\n fingerprintExpression: '{{ data.number }}',\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n return (...);\n };\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"The new tokens should now have a fingerprint:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",metastring:"showLineNumbers title=token.json",children:'{\n "id": "d2cbc1b4-5c3a-45a3-9ee2-392a1c475ab4",\n "type": "card",\n "tenant_id": "15f48eb5-8b52-4cdd-a396-608f7cf001d0",\n "data": {\n "number": "XXXXXXXXXXXX4242",\n "expiration_month": 12,\n "expiration_year": 2025\n },\n "created_by": "4a6ae2a6-79f8-4640-968f-88db913743df",\n "created_at": "2023-04-17T12:54:44.8320458+00:00",\n // highlight-start\n "fingerprint": "CC2XvyoohnqecEq4r3FtXv6MdCx4TbaW1UUTdCCN5MNL",\n "fingerprint_expression": "{{ data.number }}",\n // highlight-end\n "mask": {\n "number": "{{ data.number | reveal_last: 4 }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n },\n "search_indexes": [],\n "containers": [\n "/pci/high/"\n ]\n}\n'})}),"\n",(0,a.jsx)(n.p,{children:"If you want to prevent creation of a duplicate token based on the distinguishable fingerprint, add the flag below:"}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsx)(l.A,{value:"javascript",label:"JavaScript",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"async function submit () {\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberElement,\n expiration_month: cardExpirationDateElement.month(),\n expiration_year: cardExpirationDateElement.year(),\n cvc: cardVerificationCodeElement,\n },\n fingerprintExpression: '{{ data.number }}',\n // highlight-start\n deduplicateToken: true,\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n}\n"})})}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"export default function App() {\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n // highlight-start\n deduplicateToken: true,\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n return (...);\n}\n"})})}),(0,a.jsx)(l.A,{value:"ios",label:"iOS",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:'class ViewController: UIViewController {\n @IBAction func submit(_ sender: Any) {\n let body: [String: Any] = [\n "type": "card",\n "data": [\n "number": self.cardNumberTextField,\n "expiration_month": self.expirationDateTextField.month(),\n "expiration_year": self.expirationDateTextField.year(),\n "cvc": self.cvcTextField\n ],\n "fingerprint_expression": "{{ data.number }}",\n // highlight-start\n "deduplicate_token": true\n // highlight-end\n ]\n\n BasisTheoryElements.tokenize(body: body, apiKey: "<API_KEY>") { token, error in\n guard error == nil else {\n print(error)\n return\n }\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"android",label:"Android",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:'class MainActivity : AppCompatActivity() {\n\n private fun submit() {\n val token = runBlocking {\n bt.tokens.create(object {\n val type = "card"\n val data = object {\n val number = cardNumberElement\n val expiration_month = cardExpirationDateElement.month()\n val expiration_year = cardExpirationDateElement.year()\n val cvc = cardVerificationCodeElement\n }\n val fingerprint_expression = "{{ data.number }}"\n // highlight-start\n val deduplicate_token = true\n // highlight-end\n })\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:"const App = (): JSX.Element => {\n const { bt } = useBasisTheory('<PUBLIC_API_KEY>', { 'environment': 'test'});\n ...\n const submit = async () => {\n try {\n const _token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationDateRef.current?.month(),\n expiration_year: cardExpirationDateRef.current?.year(),\n cvc: cardVerificationCodeRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n // highlight-start\n deduplicateToken: true,\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n return (...);\n };\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["By doing the above, you are instructing Basis Theory to return the existing token if it is found to have the same fingerprint. ",(0,a.jsx)(n.a,{href:"/docs/concepts/what-are-tokens#deduplication",children:"Click here to learn more about token deduplication"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"masking",children:"Masking"}),"\n",(0,a.jsx)(n.p,{children:"By default, card tokens are created with a mask revealing only the last 4 digits of the card number. This is useful for generating receipts and payment history, displaying the card to the end-user without reveal
2ing the full number, etc."}),"\n",(0,a.jsxs)(n.p,{children:["In other scenarios, being able to preserve the Bank Identification Number (BIN) from the card number can enable fraud detection mechanisms, advanced payment processing routing, account type differentiation and other core functionality. ",(0,a.jsx)(n.a,{href:"https://www.pcisecuritystandards.org/faq/articles/Frequently_Asked_Question/What-are-acceptable-formats-for-truncation-of-primary-account-numbers/",children:"PCI DSS allows"})," applications to reveal up to the first 8 and last 4 digits of a card number, depending on its length and Payment Brand. Luckily, when creating a token, you can express which segments of the PAN are useful to you with a single expressions filter: ",(0,a.jsx)(n.code,{children:"card_mask"}),". ",(0,a.jsx)(n.a,{href:"/docs/expressions/filters#card_mask",children:"Click here to learn more about this filter"}),"."]}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsx)(l.A,{value:"javascript",label:"JavaScript",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"async function submit () {\n try {\n const token = await bt.tokens.create({\n type: 'card',\n data: {\n number: cardNumberElement,\n expiration_month: cardExpirationDateElement.month(),\n expiration_year: cardExpirationDateElement.year(),\n cvc: cardVerificationCodeElement,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n // highlight-start\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n}\n"})})}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"export default function App() {\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n // highlight-start\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n return (...);\n}\n"})})}),(0,a.jsx)(l.A,{value:"ios",label:"iOS",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:'class ViewController: UIViewController {\n @IBAction func submit(_ sender: Any) {\n let body: [String: Any] = [\n "type": "card",\n "data": [\n "number": self.cardNumberTextField,\n "expiration_month": self.expirationDateTextField.month(),\n "expiration_year": self.expirationDateTextField.year(),\n "cvc": self.cvcTextField\n ],\n "fingerprint_expression": "{{ data.number }}",\n "deduplicate_token": true,\n // highlight-start\n "mask": [\n "number": "{{ data.number | card_mask: \'true\', \'true\' }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n ],\n // highlight-end\n ]\n\n BasisTheoryElements.tokenize(body: body, apiKey: "<API_KEY>") { token, error in\n guard error == nil else {\n print(error)\n return\n }\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"android",label:"Android",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:'class MainActivity : AppCompatActivity() {\n\n private fun submit() {\n val token = runBlocking {\n bt.tokens.create(object {\n val type = "card"\n val data = object {\n val number = cardNumberElement\n val expiration_month = cardExpirationDateElement.month()\n val expiration_year = cardExpirationDateElement.year()\n val cvc = cardVerificationCodeElement\n }\n val fingerprint_expression = "{{ data.number }}"\n val deduplicate_token = true\n // highlight-start\n val mask = object {\n val number = "{{ data.number | card_mask: \'true\', \'true\' }}"\n val expiration_month = "{{ data.expiration_month }}"\n val expiration_year = "{{ data.expiration_year }}"\n }\n // highlight-end\n })\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:"const App = (): JSX.Element => {\n const { bt } = useBasisTheory('<PUBLIC_API_KEY>', { 'environment': 'test'});\n ...\n const submit = async () => {\n try {\n const _token = await bt?.tokens.create({\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationDateRef.current?.month(),\n expiration_year: cardExpirationDateRef.current?.year(),\n cvc: cardVerificationCodeRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n // highlight-start\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n // highlight-end\n });\n } catch (error) {\n console.error(error);\n }\n }\n return (...);\n };\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Now, the created token should also reveal the BIN:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",metastring:"showLineNumbers title=token.json",children:'{\n "id": "d2cbc1b4-5c3a-45a3-9ee2-392a1c475ab4",\n "type": "card",\n "tenant_id": "15f48eb5-8b52-4cdd-a396-608f7cf001d0",\n "data": {\n // highlight-next-line\n "number": "42424242XXXX4242",\n "expiration_month": 12,\n "expiration_year": 2025\n },\n "created_by": "4a6ae2a6-79f8-4640-968f-88db913743df",\n "created_at": "2023-04-17T12:54:44.8320458+00:00",\n "fingerprint": "CC2XvyoohnqecEq4r3FtXv6MdCx4TbaW1UUTdCCN5MNL",\n "fingerprint_expression": "{{ data.number }}",\n "mask": {\n // highlight-next-line\n "number": "{{ data.number | card_mask: \'true\', \'true\' }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n },\n "search_indexes": [],\n "containers": [\n "/pci/high/"\n ]\n}\n'})}),"\n",(0,a.jsxs)(n.p,{children:["In the example above, we instruct Basis Theory to reveal both
2segments, without having to worry about the card brand or number length. ",(0,a.jsx)(n.a,{href:"/docs/expressions/masks",children:"Click here to learn more about Masking"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"aliasing",children:"Aliasing"}),"\n",(0,a.jsx)(n.p,{children:"While storing or transmitting tokens between systems, you may encounter restrictive technical constraints that can draw the default token Universally Unique Identifier (UUID) incompatible."}),"\n",(0,a.jsxs)(n.p,{children:["In the example below, we will pass a predefined token ",(0,a.jsx)(n.code,{children:"id"})," that follows a custom logic, which resembles an alternative format used in the payments industry. This capability enables Token Portability, and it can be specially useful in migration scenarios."]}),"\n",(0,a.jsxs)(o.A,{className:"bt-tabs",queryString:"sdk",children:[(0,a.jsx)(l.A,{value:"javascript",label:"JavaScript",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-javascript",metastring:"showLineNumbers title=index.js",children:"// highlight-start\nfunction generateTokenId() {\n const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let tokenId = 'card_';\n for (let i = 0; i < 24; i++) {\n tokenId += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return tokenId;\n}\n// highlight-end\n\nasync function submit () {\n try {\n const token = await bt.tokens.create({\n // highlight-next-line\n id: generateTokenId(),\n type: 'card',\n data: {\n number: cardNumberElement,\n expiration_month: cardExpirationDateElement.month(),\n expiration_year: cardExpirationDateElement.year(),\n cvc: cardVerificationCodeElement,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n });\n } catch (error) {\n console.error(error);\n }\n}\n"})})}),(0,a.jsx)(l.A,{value:"react",label:"React",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",metastring:"showLineNumbers title=App.jsx",children:"// highlight-start\nconst generateTokenId = () => {\n const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let tokenId = 'card_';\n for (let i = 0; i < 24; i++) {\n tokenId += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return tokenId;\n}\n// highlight-end\n\nexport default function App() {\n const submit = async () => {\n try {\n const token = await bt?.tokens.create({\n // highlight-next-line\n id: generateTokenId(),\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationRef.current.month(),\n expiration_year: cardExpirationRef.current.year(),\n cvc: cardVerificationRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n });\n } catch (error) {\n console.error(error);\n }\n }\n\n return (...);\n}\n"})})}),(0,a.jsx)(l.A,{value:"ios",label:"iOS",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-swift",metastring:"showLineNumbers title=ViewController.swift",children:'class ViewController: UIViewController {\n // highlight-start\n func generateTokenId() -> String {\n let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"\n var tokenId = "card_"\n for _ in 1...24 {\n let randomIndex = Int(arc4random_uniform(UInt32(chars.count)))\n let randomChar = chars[chars.index(chars.startIndex, offsetBy: randomIndex)]\n tokenId.append(randomChar)\n }\n return tokenId\n }\n //highlight-end\n\n @IBAction func submit(_ sender: Any) {\n let body: [String: Any] = [\n // highlight-next-line\n "id": generateTokenId(),\n "type": "card",\n "data": [\n "number": self.cardNumberTextField,\n "expiration_month": self.expirationDateTextField.month(),\n "expiration_year": self.expirationDateTextField.year(),\n "cvc": self.cvcTextField\n ],\n "fingerprint_expression": "{{ data.number }}",\n "deduplicate_token": true,\n "mask": [\n "number": "{{ data.number | card_mask: \'true\', \'true\' }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n ],\n ]\n\n BasisTheoryElements.tokenize(body: body, apiKey: "<API_KEY>") { token, error in\n guard error == nil else {\n print(error)\n return\n }\n }\n }\n}\n'})})}),(0,a.jsx)(l.A,{value:"android",label:"Android",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-kotlin",metastring:"showLineNumbers title=MainActivity.kt",children:"class MainActivity : AppCompatActivity() {\n // highlight-start\n fun generateTokenId(): String {\n val allowedChars = ('A'..'Z') + ('a'..'z') + ('0'..'9')\n val tokenId = StringBuilder(\"card_\")\n repeat(24) {\n tokenId.append(allowedChars.random())\n }\n return tokenId.toString()\n }\n // highlight-end\n\n private fun submit() {\n val token = runBlocking {\n bt.tokens.create(object {\n // highlight-next-line\n val id = this.generateTokenId()\n val type = \"card\"\n val data = object {\n val number = cardNumberElement\n val expiration_month = cardExpirationDateElement.month()\n val expiration_year = cardExpirationDateElement.year()\n val cvc = cardVerificationCodeElement\n }\n val fingerprint_expression = \"{{ data.number }}\"\n val deduplicate_token = true\n val mask = object {\n val number = \"{{ data.number | card_mask: 'true', 'true' }}\"\n val expiration_month = \"{{ data.expiration_month }}\"\n val expiration_year = \"{{ data.expiration_year }}\"\n }\n })\n }\n }\n}\n"})})}),(0,a.jsx)(l.A,{value:"react-native",label:"React Native",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-typescript",metastring:"showLineNumbers title=App.tsx",children:" // highlight-start\n function generateTokenId() {\n const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let tokenId = 'card_';\n for (let i = 0; i < 24;
2 i++) {\n tokenId += chars.charAt(Math.floor(Math.random() * chars.length));\n }\n return tokenId;\n }\n // highlight-end\n\nconst App = (): JSX.Element => {\n const { bt } = useBasisTheory('<PUBLIC_API_KEY>', { 'environment': 'test'});\n ...\n const submit = async () => {\n try {\n const _token = await bt?.tokens.create({\n // highlight-next-line\n id: generateTokenId(),\n type: 'card',\n data: {\n number: cardNumberRef.current,\n expiration_month: cardExpirationDateRef.current?.month(),\n expiration_year: cardExpirationDateRef.current?.year(),\n cvc: cardVerificationCodeRef.current,\n },\n fingerprintExpression: '{{ data.number }}',\n deduplicateToken: true,\n mask: {\n number:'{{ data.number | card_mask: \"true\", \"true\" }}',\n expiration_month: '{{ data.expiration_month }}',\n expiration_year: '{{ data.expiration_year }}',\n },\n });\n } catch (error) {\n console.error(error);\n }\n }\n return (...);\n };\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"The returned token object should now have a custom identifier:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",metastring:"showLineNumbers title=token.json",children:'{\n // highlight-next-line\n "id": "card_1Mxqr82eZvKYlo2CSaatci3m",\n "type": "card",\n "tenant_id": "15f48eb5-8b52-4cdd-a396-608f7cf001d0",\n "data": {\n "number": "42424242XXXX4242",\n "expiration_month": 12,\n "expiration_year": 2025\n },\n "created_by": "4a6ae2a6-79f8-4640-968f-88db913743df",\n "created_at": "2023-04-17T12:54:44.8320458+00:00",\n "fingerprint": "CC2XvyoohnqecEq4r3FtXv6MdCx4TbaW1UUTdCCN5MNL",\n "fingerprint_expression": "{{ data.number }}",\n "mask": {\n "number": "{{ data.number | card_mask: \'true\', \'true\' }}",\n "expiration_month": "{{ data.expiration_month }}",\n "expiration_year": "{{ data.expiration_year }}"\n },\n\n "search_indexes": [],\n "containers": [\n "/pci/high/"\n ]\n}\n'})}),"\n",(0,a.jsx)(n.p,{children:"Similarly to masking, aliasing also supports passing custom data-bound expressions, that can generate length and format-preserving token identifiers. Doing such increases compatibility to store or pass tokens between systems, white preserving information about the tokenized data."}),"\n",(0,a.jsxs)(n.p,{children:["For example, use the ",(0,a.jsx)(n.a,{href:"/docs/expressions/filters#alias_card",children:"alias_card"})," filter to generate a synthetic card number as a token identifier, which shares the same BIN and last four digits of the real card number. ",(0,a.jsx)(n.a,{href:"/docs/expressions/aliasing",children:"Click here to learn more about Aliasing"}),"."]}),"\n",(0,a.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,a.jsxs)(n.p,{children:["The best practices prescribed in this guide ensure that your user-facing applications are compliant with the PCI-DSS standards and your users' sensitive card data is protected. The ",(0,a.jsx)(n.code,{children:"token.id"})," obtained at the end of the ",(0,a.jsx)(n.a,{href:"#storing-cards",children:"Storing Cards"})," section is a synthetic replacement for the sensitive data and can be safely stored in your database, or transmitted through your systems, meeting compliance requirements and reducing the risk of exposure in case of data breaches."]}),"\n",(0,a.jsxs)(n.p,{children:["The optional ",(0,a.jsx)(n.a,{href:"#customizing-tokens",children:"customization steps"})," are meant to showcase platform capabilities that go beyond the examples given. Make sure to explore the provided links within each subsection to learn more about the possibilities for customization."]}),"\n",(0,a.jsx)(n.p,{children:"For next steps, take a look at the following guides to proceed taking the most value of your secured card tokens:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"/docs/guides/share/process-card-payments",children:"Process Card Payments"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"/docs/card-issuing/display-cards",children:"Display Cards"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"/docs/guides/process/search-data",children:"Search Data"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"/docs/guides/process/analyze-data",children:"Analyze Data"})}),"\n"]})]})}function g(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(f,{...e})}):f(e)}},9075:(e,n,t)=>{t.d(n,{A:()=>o});var r,a=t(96540);function i(){return i=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},i.apply(null,arguments)}const o=e=>{let{title:n,titleId:t,...o}=e;return a.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},o),n?a.createElement("title",{id:t},n):null,r||(r=a.createElement("path",{fill:"#3DDB86",d:"M10.227 11.173c.096-.223.45-.234.554-.012.504.855.993 1.72 1.493 2.578 2.373-1.079 5.21-1.077 7.585-.002.502-.855.987-1.721 1.493-2.575.114-.252.528-.195.576.
2077.034.216-.143.393-.231.577-.427.732-.847 1.469-1.274 2.2a8.74 8.74 0 0 1 3.198 3.003A8.8 8.8 0 0 1 24.94 21c-5.917-.002-11.833.003-17.75-.003.214-2.89 1.96-5.614 4.522-6.979-.465-.794-.92-1.595-1.385-2.39-.073-.136-.189-.299-.1-.455m1.456 5.89c-.448.188-.584.835-.227 1.174.364.419 1.13.213 1.241-.33.169-.558-.49-1.115-1.014-.843m8.2-.015c-.484.17-.633.869-.242 1.209.377.404 1.133.17 1.225-.374.14-.542-.47-1.06-.984-.835"})))}},92972:(e,n,t)=>{t.d(n,{A:()=>F});var r,a,i,o,l,s,c,d,h,u,p,m,f,g,b,y,x,v,E,w,j,C,_,k,A,N,O,T,I,R,B,D,S,q,V,P=t(96540);function M(){return M=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},M.apply(null,arguments)}const F=e=>{let{title:n,titleId:t,...F}=e;return P.createElement("svg",M({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},F),n?P.createElement("title",{id:t},n):null,r||(r=P.createElement("path",{fill:"url(#a)",d:"M12.584 12.953c.865 2.645 1.193 7.363 3.722 7.363q.289 0 .582-.056c-2.299-.536-2.571-5.203-3.974-7.62q-.165.15-.33.313"})),a||(a=P.createElement("path",{fill:"url(#b)",d:"M12.914 12.64c1.403 2.416 1.675 7.083 3.975 7.62q.27-.052.543-.147c-2.064-1.011-2.634-5.544-4.228-7.725q-.144.12-.29.251"})),i||(i=P.createElement("path",{fill:"#14559A",d:"M14.935 11.202q-.289 0-.583.056c-.512.097-1.032.317-1.556.65q.216.214.408.48c.533-.443 1.063-.77 1.59-.966q.297-.11.593-.165a1.8 1.8 0 0 0-.452-.055"})),o||(o=P.createElement("path",{fill:"url(#c)",d:"M19.042 19.182q.317-.252.635-.557c-.879-2.632-1.194-7.418-3.74-7.418q-.275 0-.55.05c2.32.578 2.617 5.625 3.655 7.925"})),l||(l=P.createElement("path",{fill:"#3092C4",d:"M15.388 11.257a1.8 1.8 0 0 0-.453-.055l1.002.004q-.274 0-.55.051"})),s||(s=P.createElement("path",{fill:"#1969BC",d:"M18.997 19.74q-.149-.143-.287-.31a5.3 5.3 0 0 1-1.28.683 2 2 0 0 0 .884.203c.476 0 .852-.056 1.173-.21a2.2 2.2 0 0 1-.49-.366"})),c||(c=P.createElement("path",{fill:"url(#d)",d:"M14.794 11.422c2.078 1.087 2.26 6.009 3.917 8.008q.166-.118.331-.25c-1.038-2.299-1.334-7.347-3.654-7.923a3.6 3.6 0 0 0-.594.165"})),d||(d=P.createElement("path",{fill:"url(#e)",d:"M13.204 12.388c1.593 2.182 2.163 6.714 4.227 7.725q.636-.227 1.28-.683c-1.658-1.999-1.84-6.92-3.917-8.008-.528.196-1.057.523-1.59.966"})),h||(h=P.createElement("path",{fill:"url(#f)",d:"M11.565 12.89c-.25.564-.505 1.306-.813 2.275.613-.864 1.224-1.609 1.832-2.212a7 7 0 0 0-.27-.707q-.375.286-.75.643"})),u||(u=P.createElement("path",{fill:"#2B74B1",d:"M12.536 12.083a8 8 0 0 0-.221.163q.144.319.27.706.165-.162.33-.313a4.4 4.4 0 0 0-.38-.556"})),p||(p=P.createElement("path",{fill:"#125A9E",d:"M12.797 11.91a7 7 0 0 0-.262.174q.203.252.38.557a9 9 0 0 1 .29-.252 4 4 0 0 0-.408-.48"})),m||(m=P.createElement("path",{fill:"url(#g)",d:"M26.97 11.001c-1.175 4.532-3.63 8.173-5.687 9.09h-.004l-.111.048q-.008.004-.014.005l-.032.013q-.008.003-.014.005l-.051.019-.021.007-.026.008-.025.009-.022.007q-.022.006-.044.014-.009.001-.018.005l-.03.008q-.01.004-.02.005l-.032.009-.04.008q.139.052.295.052c1.951 0 3.919-3.497 7.174-9.313z"})),f||(f=P.createElement("path",{fill:"url(#h)",d:"m10.328 11.387.003-.003q.003 0 .005-.003h.002l.032-.013q.004 0 .006-.002.005-.002.008-.004l.034-.012h.002l.075-.026q.005-.002.011-.003l.032-.01q.008-.003.015-.005l.032-.01.013-.002q.053-.016.107-.028.008-.001.015-.004l.03-.006q.007-.003.016-.005.014-.003.032-.005h.007l.066-.012h.013q.015-.004.03-.006.008-.002.017-.003.015-.001.029-.004.008 0 .015-.003.035-.
2005.07-.006a2 2 0 0 0-.207-.011c-2.198 0-5.225 4.077-6.59 9.358h.263c.437-.778.829-1.515 1.188-2.206.955-3.74 2.9-6.291 4.629-6.967"})),g||(g=P.createElement("path",{fill:"#0D82CA",d:"M11.565 12.888q.375-.357.749-.642a4 4 0 0 0-.179-.345c-.2.244-.384.566-.57.987M11.746 11.417c.143.12.272.286.39.484a2 2 0 0 1 .113-.127 2.2 2.2 0 0 0-.503-.357"})),b||(b=P.createElement("path",{fill:"url(#i)",d:"M5.698 18.354c2.004-3.862 2.954-6.306 4.63-6.967-1.728.676-3.674 3.226-4.63 6.967"})),y||(y=P.createElement("path",{fill:"#127BCA",d:"M12.248 11.775q-.058.06-.113.127.094.158.178.345.112-.085.222-.163a3 3 0 0 0-.287-.309"})),x||(x=P.createElement("path",{fill:"url(#j)",d:"M6.608 20.542q-.02.003-.036.005h-.007l-.031.003h-.005q-.038.003-.074.005h-.008c2.029-.057 2.956-1.073 3.416-2.545.35-1.117.636-2.058.888-2.847-.85 1.196-1.703 2.621-2.56 4.218-.414.77-1.044 1.091-1.583 1.16"})),v||(v=P.createElement("path",{fill:"url(#k)",d:"M6.608 20.542c.54-.07 1.17-.39 1.583-1.16.858-1.597 1.712-3.022 2.56-4.218.31-.97.564-1.711.814-2.276-1.692 1.61-3.39 4.288-4.957 7.653"})),E||(E=P.createElement("path",{fill:"#05A1E6",d:"M5.698 18.354c-.358.691-.75 1.428-1.187 2.206h.765c.101-.773.245-1.51.422-2.206"})),w||(w=P.createElement("path",{fill:"url(#l)",d:"m10.975 11.22-.016.002q-.014.005-.028.005-.008 0-.017.003-.015.003-.03.005-.008 0-.014.003l-.065.011h-.007l-.032.006q-.007.005-.016.005l-.03.006q-.008.004-.015.003l-.107.028q-.006.001-.013.004l-.032.01-.015.004-.032.01-.011.002-.075.027-.034.011-.014.006q-.017.005-.032.012l-.01.005c-1.676.661-2.626 3.105-4.63 6.967a19 19 0 0 0-.422 2.206h.107c.302 0 .388-.003.735-.003h.337q.036-.003.074-.005h.005l.03-.003h.008q.017-.001.036-.005c1.567-3.365 3.265-6.042 4.957-7.652.186-.422.37-.744.57-.987a1.9 1.9 0 0 0-.39-.485s-.004 0-.004-.003l-.024-.011-.023-.012-.023-.012-.027-.011-.022-.01-.044-.018-.019-.007-.033-.013-.018-.006-.046-.016h-.004l-.053-.015q-.006-.003-.012-.004l-.045-.012-.01-.003a2 2 0 0 0-.112-.025q-.005-.001-.011-.003l-.049-.008q-.004-.004-.01-.003l-.056-.007h-.01q-.023-.003-.044-.005l-.07.006"})),j||(j=P.createElement("path",{fill:"url(#m)",d:"M22.38 13.51c-.385 1.236-.698 2.255-.97 3.093 1.059-1.456 2.1-3.287 3.093-5.4-1.157.363-1.775 1.195-2.123 2.308"})),C||(C=P.createElement("path",{fill:"url(#n)",d:"M21.444 20.015a3 3 0 0 1-.162.077c2.058-.918 4.513-4.558 5.688-9.09h-.238c-2.7 4.823-3.569 8.052-5.288 9.013"})),_||(_=P.createElement("path",{fill:"#079AE1",d:"M20.1 19.61c.448-.547.813-1.476 1.31-3.007-.574.79-1.152 1.467-1.73 2.02q.001.003-.004.005c.127.378.265.712.423.982"})),k||(k=P.createElement("path",{fill:"#1969BC",d:"M20.1 19.61a1.8 1.8 0 0 1-.613.497 1.7 1.7 0 0 0 .73.207h.007a.3.3 0 0 1 .05.003h.167q.01 0 .019-.003.018 0 .037-.003h.018q.02-.002.04-.005h.003l.013-.003.042-.006h.013l.048-.008h.008l.096-.02c-.265-.098-.488-.327-.68-.654"})),A||(A=P.createElement("path",{fill:"#1E5CB3",d:"M16.306 20.317q.289 0 .582-.057a3.6 3.6 0 0 0 .543-.146 2 2
20 0 0 .884.203zM18.314 20.316c.476 0 .853-.057 1.172-.21a1.7 1.7 0 0 0 .731.207h.006a.3.3 0 0 1 .05.003h.057-2.017z"})),N||(N=P.createElement("path",{fill:"#1D60B5",d:"M20.333 20.315h.109q.01 0 .02-.003.017 0 .037-.003h.018q.02-.001.04-.004h.003l.012-.003.043-.007q.006 0 .013-.003.024-.003.049-.008h.007q.049-.009.096-.02a.8.8 0 0 0 .295.052l-.742.003z"})),O||(O=P.createElement("path",{fill:"#175FAB",d:"M19.677 18.628v-.003a9 9 0 0 1-.634.556q-.165.13-.332.249.139.166.287.31.225.221.49.366.06-.03.119-.065a1.8 1.8 0 0 0 .493-.432 5.3 5.3 0 0 1-.422-.982"})),T||(T=P.createElement("path",{fill:"url(#o)",d:"M25.978 11.001H24.78l-.19.01-.089.189c-.992 2.113-2.034 3.945-3.092 5.4-.497 1.532-.863 2.46-1.31 3.007.191.327.414.556.678.654q.011-.003.021-.005h.005l.014-.003.034-.008q.01-.005.02-.006l.029-.008q.009-.004.019-.005l.043-.013.023-.008q.013-.004.024-.009.015-.003.026-.008l.02-.007.052-.019q.008-.002.015-.005l.031-.012q.006-.004.014-.005.054-.022.11-.048h.005q.08-.035.16-.077c1.72-.96 2.59-4.19 5.29-9.013z"})),I||(I=P.createElement("path",{fill:"#7DCBEC",d:"M11.046 11.212q.006 0 .012.003.016-.001.031.004h.01l.058.007q.006 0 .01.003l.048.008.012.003q.056.011.111.025.006.002.01.003l.045.013q.007.002.012.003l.057.019.046.015.018.006.033.014q.01.001.02.006.02.01.043.019l.022.01.026.01.024.012q.012.005.023.012.287.143.532.371.09-.095.188-.17a2.07 2.07 0 0 0-1.391-.391"})),R||(R=P.createElement("path",{fill:"#5EC5ED",d:"M12.249 11.775q.15.139.286.308.132-.092.262-.174a3 3 0 0 0-.36-.306 2 2 0 0 0-.188.172"})),B||(B=P.createElement("path",{fill:"url(#p)",d:"M11.046 11.213q.081-.007.162-.007c.467 0 .871.145 1.229.398.376-.298.832-.401 1.464-.401h-3.063q.106 0 .208.01"})),D||(D=P.createElement("path",{fill:"url(#q)",d:"M13.902 11.203c-.633 0-1.088.104-1.465.401q.188.133.36.305c.524-.333 1.044-.554 1.556-.65q.293-.056.582-.056z"})),S||(S=P.createElement("path",{fill:"url(#r)",d:"M21.41 16.604c.273-.84.584-1.858.97-3.093.348-1.113.965-1.946 2.122-2.309l.09-.189c-1.887.113-2.77 1.073-3.213 2.495-.777 2.481-1.247 4.09-1.7 5.115.579-.553 1.157-1.231 1.731-2.02"})),q||(q=P.createElement("path",{fill:"#000",d:"M24.179 19.655h-.214v.664h-.087v-.664h-.215v-.08h.516zM25.055 20.32h-.087v-.5q0-.06.007-.144a1 1 0 0 1-.023.072l-.254.571h-.042l-.254-.566a.4.4 0 0 1-.023-.077h-.003q.004.045.004.145v.498h-.083v-.743h.115l.228.519q.025.059.034.089h.003q.022-.062.036-.091l.233-.517h.11z"})),V||(V=P.createElement("defs",null,P.createElement("linearGradient",{id:"a",x1:14.736,x2:14.736,y1:11.142,y2:22.59,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#0994DC"}),P.createElement("stop",{offset:.35,stopColor:"#66CEF5"}),P.createElement("stop",{offset:.846,stopColor:"#127BCA"}),P.createElement("stop",{offset:1,stopColor:"#127BCA"})),P.createElement("linearGradient",{id:"b",x1:15.173,x2:15.173,y1:10.851,y2:22.591,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#0E76BC"}),P.createElement("stop",{offset:.36,stopColor:"#36AEE8"}),P.createElement("stop",{offset:.846,stopColor:"#00ADEF"}),P.createElement("stop",{offset:1,stopColor:"#00ADEF"})),P.createElement("linearGradient",{id:"c",x1:17.532,x2:17.532,y1:20.052,y2:10.711,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#1C63B7"}),P.createElement("stop",{offset:.5,stopColor:"#33BDF2"}),P.createElement("stop",{offset:1,stopColor:"#33BDF2",stopOpacity:.42})),P.createElement("linearGradient",{id:"d",x1:16.918,x2:16.918,y1:9.662,y2:21.851,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#166AB8"}),P.createElement("stop",{offset:.4,stopColor:"#36AEE8"}),P.createElement("stop",{offset:.846,stopColor:"#0798DD"}),P.createElement("stop",{offset:1,stopColor:"#0798DD"})),P.createElement("linearGradient",{id:"e",x1:15.957,x2:15.957,y1:9.726,y2:22.688,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#124379"}),P.createElement("stop",{offset:.39,stopColor:"#1487CB"}),P.createElement("stop",{offset:.78,stopColor:"#165197"}),P.createElement("stop",{offset:1,stopColor:"#165197"})),P.createElement("linearGradient",{id:"f",x1:10.752,x2:12.584,y1:13.706,y2:13.706,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#33BDF2",stopOpacity:.698}),P.createElement("stop",{offset:1,stopColor:"#1DACD8"})),P.createElement("linearGradient",{id:"g",x1:24.515,x2:24.515,y1:19.818,y2:10.718,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#136AB4"}),P.createElement("stop",{offset:.6,stopColor:"#59CAF5",stopOpacity:.549}),P.createElement("stop",{offset:1,stopColor:"#59CAF5",stopOpacity:.235})),P.createElement("linearGradient",{id:"h",x1:4.248,x2:11.046,y1:15.88,y2:15.88,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#05A1E6",stopOpacity:.247}),P.createElement("stop",{offset:1,stopColor:"#05A1E6"})),P.createElement("linearGradient",{id:"i",x1:8.013,x2:8.013,y1:20.047,y2:10.73,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#318ED5"}),P.createElement("stop",{offset:1,stopColor:"#38A7E4"})),P.createElement("linearGradient",{id:"j",x1:8.599,x2:8.599,y1:20.08,y2:11.023,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#05A1E6"}),P.createElement("stop",{offset:1,stopColor:"#05A1E6",stopOpacity:.549})),P.createElement("linearGradient",{id:"k",x1:9.087,x2:9.087,y1:20.542,y2:12.889,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#1959A6"}),P.createElement("stop",{offset:.5,stopColor:"#05A1E6"}),P.createElement("stop",{offset:.918,stopColor:"#7EC5EA"}),P.createElement("stop",{offset:1,stopColor:"#7EC5EA"})),P.createElement("linearGradient",{id:"l",x1:9.38,x2:6.785,y1:20.053,y2:12.125,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#165096"}),P.createElement("stop",{offset:1,stopColor:"#0D82CA"})),P.createElement("linearGradient",{id:"m",x1:22.957,x2:22.957,y1:15.361,y2:11.024,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#05A1E6"}),P.createElement("stop",{offset:.874,stopColor:"#0495D6"}),P.createElement("stop",{offset:1,stopColor:"#0495D6"})),P.createElement("linearGradient",{id:"n",x1:24.994,x2:20.953,y1:10.623,y2:19.597,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#38A7E4",stopOpacity:.329}),P.createElement("stop",{offset:.962,stopColor:"#0E88D3"}),P.createElement("stop",{offset:1,stopColor:"#0E88D3"})),P.createElement("linearGradient",{id:"o",x1:23.416,x2:23.416,y1:10.974,y2:20.435,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#168CD4"}),P.createElement("stop",{offset:.5,stopColor:"#1C87CC"}),P.createElement("stop",{offset:1,stopColor:"#154B8D"})),P.createElement("linearGradient",{id:"p",x1:11.349,x2:11.39,y1:10.779,y2:11.771,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#97D6EE"}),P.createElement("stop",{offset:.703,stopColor:"#55C1EA"}),P.createElement("stop",{offset:1,stopColor:"#55C1EA"})),P.createElement("linearGradient",{id:"q",x1:12.609,x2:12.794,y1:11.865,y2:10.814,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#7ACCEC"}),P.createElement("stop",{offset:1,stopColor:"#3FB7ED"})),P.createElement("linearGradient",{id:"r",x1:22.135,x2:22.135,y1:11.497,y2:20.751,gradientUnits:"userSpaceOnUse"},P.createElement("stop",{stopColor:"#1DA7E7"}),P.createElement("stop",{offset:1,stopColor:"#37ABE7",stopOpacity:0})))))}},78688:(e,n,t)=>{t.d(n,{A:()=>o});var r,a=t(96540);function i(){return i=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},i.apply(null,arguments)}const o=e=>{let{title:n,titleId:t,...o}=e;return a.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},o),n?a.createElement("title",{id:t},n):null,r||(r=a.createElement("path",{fill:"#00ACD7",d:"M14.27 11.145a5.6 5.6 0 0 1 1.624-.132A4.24 4.24 0 0 1 19 12.721c.207.281.37.592.509.91.035.091-.072.14-.143.158-.758.195-1.515.397-2.273.596-.054.013-.117.026-.166-.008-.074-.051-.126-.126-.188-.19a1.8 1.8 0 0 0-.424-.37 2.3 2.3 0 0 0-1.253-.317 2.44 2.44 0 0 0-1.088.339 3.2 3.2 0 0 0-.84.686 2.7 2.7 0 0 0-.617 1.381c-.061.433-.046.887.122 1.295.146.37.401.695.729.92.288.2.63.32.98.35.404.04.82-.016 1.191-.181.36-.158.673-.407.928-.703.122-.15.23-.312.343-.47h-2.524c-.095-.001-.206-.026-.254-.117-.048-.095-.013-.206.026-.298.203-.471.416-.939.652-1.394a.36.36 0 0 1 .33-.21l4.19-.001c.238-.755.664-1.439 1.179-2.035.444-.514.98-.951 1.586-1.26.691-.355 1.456-.546 2.224-.64.754-.089 1.534-.042 2.254.211a4.6 4.6 0 0 1 1.857 1.239A3.9 3.9 0 0 1 29 13.633c.23.505.341 1.057.37 1.608.048.803-.076 1.622-.408 2.358-.29.653-.73 1.232-1.244 1.727a5.9 5.9 0 0 1-2.154 1.322c-.41.14-.833.253-1.266.292q-.323.031-.645.06a5.3 5.3 0 0 1-2.032-.427 4.55 4.55 0 0 1-1.685-1.282c-.35-.43-.61-.933-.757-1.468a6 6 0 0 1-1.227 1.65 5.3 5.3 0 0 1-1.832 1.154 5.6 5.6 0 0 1-1.522.329 4.9 4.9 0 0 1-1.561-.117 4.54 4.54 0 0 1-2.26-1.36 4 4 0 0 1-.694-1.082c-.293-.683-.396-1.438-.35-2.177.05-.804.315-1.587.729-2.275a6.5 6.5 0 0 1 1.274-1.527 5.7 5.7 0 0 1 2.534-1.273m10.106 2.376c-.435.05-.86.19-1.24.405-.509.287-.91.748-1.141 1.282-.16.373-.276.773-.266 1.181.007.387.119.771.323 1.1.21.34.52.618.881.79.352.164.742.252 1.132.233.463-.02.91-.187 1.299-.433.308-.19.59-.427.813-.714.255-.323.43-.708.515-1.111.044-.223.084-.451.06-.68a2.2 2.2 0 0 0-.726-1.535 2.16 2.16 0 0 0-1.65-.518M4.95 13.558c.03-.011.064-.012.096-.012h4.578c.03.002.069-.008.092.018.015.032-.011.061-.026.087q-.1.153-.2.305a.19.19 0 0 1-.157.085q-2.28-.008-4.56-.013c-.06-.003-.122.01-.179-.012-.02-.021.007-.047.017-.067l.24-.309a.2.2 0 0 1 .099-.082M2.896 14.824c.04-.06.114-.082.184-.08h5.897c.043-.006.098.026.079.075q-.05.165-.11.33c-.02.054-.084.066-.136.065l-5.918.013c-.09 0-.182.004-.272-.01v-.031c.085-.126.185-.241.276-.363M6.053 15.954c.032-.013.066-.01.1-.011h2.53c.045-.006.097.02.097.07 0 .111-.016.222-.023.333 0 .058-.06.1-.114.093l-2.658-.012c-.064-.002-.13.007-.193-.008l-.02-.029c.029-.09.09-.166.131-.25.04-.069.07-.156.15-.187"})))}},11310:(e,n,t)=>{t.d(n,{A:()=>d});var r,a,i,o,l,s=t(96540);function c(){return c=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},c.apply(null,arguments)}const d=e=>{let{title:n,titleId:t,...d}=e;return s.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 -4 17 32","aria-labelledby":t},d),n?s.createElement("title",{id:t},n):null,r||(r=s.createElement("path",{fill:"#EC2025",d:"M9.135 10.52c1.061 1.223-.279 2.322-.279 2.322s2.695-1.391 1.457-3.133C9.157 8.084 8.271 7.277 13.07 4.494c0 0-7.532 1.882-3.934 6.027"})),a||(a=s.createElement("path",{fill:"#EC2025",d:"M10.315 0s2.286 2.287-2.168 5.803c-3.572 2.821-.814 4.43-.001 6.267C6.06 10.19 4.53 8.533 5.557 6.992c1.507-2.263 5.68-3.36 4.758-6.992"})),i||(i=s.createElement("path",{fill:"#0D8AC7",d:"M5.225 17.015s-.84.489.598.654c1.744.2 2.635.17 4.556-.193 0 0 .505.317 1.21.591-4.306 1.846-9.747-.107-6.364-1.052M4.7 14.606s-.944.698.497.847c1.862.192 3.333.208 5.878-.282 0 0 .352.357.905.552-5.207 1.522-11.007.12-7.28-1.117"})),o||(o=s.createElement("path",{fill:"#0D8AC7",d:"M14.833 18.795s.622.513-.685.91c-2.486.753-10.348.98-12.531.03-.785-.342.687-.816 1.15-.915.483-.105.759-.086.759-.086-.873-.615-5.643 1.208-2.423 1.73 8.781 1.424 16.008-.641 13.73-1.669M5.63 12.11s-3.998.95-1.416 1.295c1.09.146 3.265.113 5.29-.057a42 42 0 0 0 3.316-.436s-.584.25-1.006.538c-4.06 1.068-11.905.571-9.646-.521 1.91-.924 3.462-.819 3.462-.819M12.803 16.12c4.128-2.146 2.22-4.207.887-3.93-.326.069-.472.127-.472.127s.121-.19.353-.272c2.635-.926 4.662 2.733-.85 4.182 0 0 .063-.057.082-.108"})),l||(l=s.createElement("path",{fill:"#0D8AC7",d:"M6.036 21.93c3.962.254 10.046-.14 10.19-2.015 0 0-.276.71-3.274 1.275-3.382.637-7.553.562-10.027.154 0 0 .507.42 3.11.587"})))}},96019:(e,n,t)=>{t.d(n,{A:()=>l});var r,a,i=t(96540);function o(){return o=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},o.apply(null,arguments)}const l=e=>{let{title:n,titleId:t,...l}=e;return i.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},l),n?i.createElement("title",{id:t},n):null,r||(r=i.createElement("path",{fill:"#F7DF1E",d:"M7.88 8h16v16h-16zm11.844 7.28c-.616.062-1.227.37-1.565.902-.304.46-.36 1.045-.254 1.577.08.428.316.82.646 1.1.493.434 1.124.648 1.713.914.232.11.477.214.665.396.209.198.262.537.134.793-.107.21-.323.34-.544.399-.331.085-.69.066-1.01-.052-.386-.143-.672-.464-.88-.808q-.612.354-1.223.709c.135.262.309.506.52.712.425.422.995.681 1.583.774a3.8 3.8 0 0 0 1.588-.074c.498-.14.97-.433 1.245-.878.312-.491.351-1.11.235-1.668a1.9 1.9 0 0 0-.656-1.055c-.48-.405-1.072-.64-1.642-.886-.252-.113-.515-.219-.725-.402-.285-.246-.294-.752 0-.994.23-.192.56-.198.836-.12.294.085.49.341.635.597l1.17-.751c-.216-.382-.515-.728-.907-.935-.477-.252-1.035-.302-1.564-.25m-4.634.066q.001 2.578-.001 5.155c-.005.28-.052.61-.301.78-.23.142-.523.15-.777.082-.344-.105-.527-.441-.695-.732l-1.223.74c.17.36.42.686.744.92.424.315.958.45 1.48.452.527.
2005 1.077-.101 1.505-.424.369-.271.602-.694.698-1.136.094-.398.07-.81.073-1.215v-4.622z"})),a||(a=i.createElement("path",{fill:"#000",d:"M19.724 15.28c.529-.052 1.087-.002 1.564.25.392.207.691.553.908.935l-1.17.751c-.145-.256-.342-.512-.636-.598-.276-.077-.606-.071-.836.12-.294.243-.285.749 0 .994.21.184.473.29.725.403.57.246 1.162.481 1.642.886.325.27.567.64.656 1.055.116.558.077 1.176-.235 1.668-.276.445-.747.738-1.245.878a3.8 3.8 0 0 1-1.588.074c-.588-.093-1.158-.352-1.583-.774a2.8 2.8 0 0 1-.52-.712q.61-.355 1.223-.71c.208.345.494.666.88.809.32.117.679.137 1.01.052.22-.06.437-.19.544-.4a.69.69 0 0 0-.134-.792c-.188-.182-.433-.286-.665-.396-.59-.266-1.22-.48-1.713-.913a1.93 1.93 0 0 1-.646-1.101c-.106-.532-.05-1.116.254-1.578.338-.531.949-.84 1.565-.901M15.09 15.346h1.503v4.622c-.003.405.021.817-.073 1.215-.096.442-.33.864-.698 1.136-.428.323-.978.43-1.505.424-.522-.002-1.056-.137-1.48-.451a2.4 2.4 0 0 1-.744-.921l1.223-.74c.168.29.351.627.694.732.255.068.549.06.778-.081.25-.17.296-.5.3-.78q.002-2.58.002-5.156"})))}},7815:(e,n,t)=>{t.d(n,{A:()=>l});var r,a,i=t(96540);function o(){return o=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},o.apply(null,arguments)}const l=e=>{let{title:n,titleId:t,...l}=e;return i.createElement("svg",o({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},l),n?i.createElement("title",{id:t},n):null,r||(r=i.createElement("path",{fill:"#689F63",d:"M15.987 25c-.241 0-.48-.063-.692-.185l-2.202-1.304c-.329-.183-.168-.249-.06-.286.439-.154.528-.188.996-.454.049-.028.113-.018.164.011l1.691 1.004a.22.22 0 0 0 .205 0l6.596-3.807a.21.21 0 0 0 .1-.178v-7.612a.21.21 0 0 0-.102-.181L16.09 8.204a.2.2 0 0 0-.203 0l-6.592 3.804a.21.21 0 0 0-.105.18v7.611c0 .073.04.142.103.177l1.806 1.043c.98.49 1.58-.087 1.58-.668v-7.513c0-.107.084-.19.192-.19h.835c.104 0 .19.083.19.19v7.516c0 1.307-.713 2.059-1.953 2.059-.382 0-.682 0-1.52-.413l-1.731-.997A1.4 1.4 0 0 1 8 19.799v-7.611c0-.496.264-.958.692-1.202l6.602-3.81a1.45 1.45 0 0 1 1.387 0l6.595 3.811a1.39 1.39 0 0 1 .692 1.202v7.612c0 .493-.266.954-.692 1.202l-6.595 3.809a1.4 1.4 0 0 1-.695.185"})),a||(a=i.createElement("path",{fill:"#689F63",d:"M18.025 19.755c-2.886 0-3.49-1.325-3.49-2.436a.19.19 0 0 1 .19-.19h.852a.19.19 0 0 1 .188.161c.13.869.512 1.306 2.257 1.306 1.39 0 1.982-.314 1.982-1.05 0-.425-.169-.74-2.328-.952-1.807-.178-2.923-.576-2.923-2.02 0-1.332 1.123-2.124 3.003-2.124 2.112 0 3.159.733 3.291 2.308a.193.193 0 0 1-.191.208h-.857a.19.19 0 0 1-.185-.148c-.207-.913-.705-1.206-2.06-1.206-1.518 0-1.695.529-1.695.925 0 .48.208.62 2.256.891 2.027.27 2.99.65 2.99 2.074 0 1.437-1.199 2.26-3.29 2.26z"})))}},27828:(e,n,t)=>{t.d(n,{A:()=>s});var r,a,i,o=t(96540);function l(){return l=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},l.apply(null,arguments)}const s=e=>{let{title:n,titleId:t,...s}=e;return o.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},s),n?o.createElement("title",{id:t},n):null,r||(r=o.createElement("path",{fill:"url(#a)",d:"M15.893 7c-.742.004-1.451.067-2.075.177-1.837.325-2.17 1.004-2.17 2.257v1.655h4.341v.551h-5.971c-1.262 0-2.367.759-2.712 2.202-.399 1.653-.417 2.685 0 4.412.308 1.286 1.045 2.201 2.307 2.201h1.493v-1.983c0-1.433 1.24-2.697 2.712-2.697h4.337c1.207 0 2.17-.994 2.17-2.207V9.434c0-1.176-.992-2.06-2.17-2.257A13.5 13.5 0 0 0 15.893 7m-2.348 1.331c.448 0 .815.372.815.83a.82.82 0 0 1-.815.825.82.82 0 0 1-.815-.825c0-.458.365-.83.815-.83"})),a||(a=o.createElement("path",{fill:"url(#b)",d:"M20.866 11.643v1.928c0 1.494-1.267 2.752-2.712 2.752h-4.337c-1.187 0-2.17 1.017-2.17 2.207v4.134c0 1.177 1.023 1.869 2.17 2.206 1.375.404 2.693.477 4.337 0 1.093-.316 2.17-.953 2.17-2.206v-1.655h-4.336v-.551h6.508c1.262 0 1.732-.88 2.17-2.202.454-1.36.435-2.668 0-4.412-.311-1.256-.907-2.201-2.17-2.201zm-2.439 10.47a.82.82 0 0 1 .815.824c0 .458-.365.83-.815.83a.824.824 0 0 1-.814-.83.82.82 0 0 1 .814-.825"})),i||(i=o.createElement("defs",null,o.createElement("linearGradient",{id:"a",x1:7,x2:17.012,y1:7,y2:15.531,gradientUnits:"userSpaceOnUse"},o.createElement("stop",{stopColor:"#5A9FD4"}),o.createElement("stop",{offset:1,stopColor:"#306998"})),o.createElement("linearGradient",{id:"b",x1:18.323,x2:14.731,y1:22.798,y2:17.765,gradientUnits:"userSpaceOnUse"},o.createElement("stop",{stopColor:"#FFD43B"}),o.createElement("stop",{offset:1,stopColor:"#FFE873"})))))}},44791:(e,n,t)=>{t.d(n,{A:()=>o});var r,a=t(96540);function i(){return i=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},i.apply(null,arguments)}const o=e=>{let{title:n,titleId:t,...o}=e;return a.createElement("svg",i({xmlns:"http://www.w3.org/2000/svg",width:32,height:32,fill:"none",viewBox:"0 0 32 32","aria-labelledby":t},o),n?a.createElement("title",{id:t},n):null,r||(r=a.createElement("path",{fill:"#61DAFB",fillRule:"evenodd",d:"M14.255 12.821A24.6 24.6 0 0 0 12.42 16a24.6 24.6 0 0 0 1.835 3.179 24.6 24.6 0 0 0 3.67 0A25 25 0 0 0 19.762 16a25 25 0 0 0-1.835-3.179 24.6 24.6 0 0 0-3.67 0m-1.125.112a26 26 0 0 0-1.176 2.036 19 19 0 0 1-.635-1.724 19 19 0 0 1 1.81-.312m1.785-1.03a26 26 0 0 1 2.351 0 19 19 0 0 0-1.175-1.413c-.393.428-.788.9-1.176 1.413m.564-2.043a21 21 0 0 0-1.709 2.121c-.956.089-1.86.23-2.69.419q-.143-.562-.225-1.077c-.143-.892-.147-1.644-.024-2.216.122-.572.357-.915.653-1.086.296-.17.71-.203 1.267-.023s1.206.56 1.907 1.129q.405.329.82.733m1.224 0a21 21 0 0 1 1.708 2.121c.956.089 1.861.23 2.691.419q.143-.562.225-1.077c.143-.892.146-1.644.024-2.216-.123-.572-.358-.915-.654-1.086-.295-.17-.71-.203-1.267-.023s-1.206.56-1.907 1.129q-.406.329-.82.733m5.25 2.756q.15-.6.24-1.154c.153-.954.169-1.824.016-2.538-.153-.715-.487-1.325-1.073-1.663s-1.28-.323-1.976-.098-1.44.674-2.19 1.283q-.436.354-.88.785-.442-.43-.878-.785c-.75-.61-1.495-1.058-2.19-1.283-.696-.225-1.391-.24-1.977.098-.585.338-.92.948-1.072 1.663-.153.714-.138 1.584.015 2.538q.09.555.24 1.154-.594.168-1.119.368c-.902.345-1.663.766-2.206 1.256S6 15.324 6 16s.36 1.27.903 1.76 1.304.911 2.206 1.256q.525.2 1.12.369-.152.598-.24 1.153c-.154.954-.17 1.823-.016 2.538.152.715.487 1.325 1.072 1.663s1.28.323 1.976.098 1.44-.674 2.19-1.283q.437-.354.88-.785.442.43.879.785c.75.61 1.494 1.058 2.19 1.283s1.39.24 1.976-.098.92-.948 1.073-1.663.137-1.584-.016-2.538q-.09-.555-.24-1.154.594-.168 1.12-.368c.902-.345 1.662-.766 2.205-1.256s.903-1.084.903-1.76-.36-1.27-.903-1.76-1.303-.911-2.206-1.256q-.525-.2-1.12-.368m-1.09.63a19 19 0 0 0-1.811-.313 26 26 0 0 1 1.175 2.036 19 19 0 0 0 .635-1.724M20.73 16c.402-.873.731-1.727.983-2.54q.558.158 1.045.344c.844.322 1.497.695 1.931 1.087s.614.768.614 1.109-.18.717-.614 1.109-1.087.765-1.93 1.087q-.488.186-1.046.344a21 21 0 0 0-.983-2.54m-.504 1.03a26 26 0 0 1-1.175 2.037 19 19 0 0 0 1.81-.312 19 19 0 0 0-.635-1.724m.875 2.57c-.83.188-1.735.33-2.691.419a21 21 0 0 1-1.708 2.121q.415.405.82.733c.701.57 1.35.949 1.907 1.129s.972.148 1.267-.023c.296-.17.531-.514.654-1.086.122-.572.119-1.324-.024-2.216q-.082-.515-.225-1.077m-5.011 1.91q.591-.643 1.175-1.413a26 26 0 0 1-2.35 0c.387.513.782.985 1.175 1.413m-2.961-2.443a26 26 0 0 1-1.176-2.036 19 19 0 0 0-.635 1.724 19 19 0 0 0 1.81.312m-2.05.533c.83.188 1.734.33 2.69.419.555.784 1.13 1.496 1.709 2.121q-.416.405-.82.733c-.702.57-1.351.949-1.908 1.129s-.971.148-1.267-.023-.531-.514-.653-1.086c-.123-.572-.12-1.324.024-2.216q.082-.515.224-1.077m-.613-1.06a12 12 0 0 1-1.045-.344c-.844-.322-1.497-.695-1.93-1.087-.435-.392-.615-.768-.615-1.109s.18-.717.614-1.109 1.087-.765 1.931-1.087a12 12 0 0 1 1.045-.344c.252.813.582 1.667.983 2.54a21 21 0 0 0-.983 2.54m5.624-3.9a1.36 1.36 0 1 0 0 2.72 1.36 1.36 0 0 0 0-2.72M13.853 16a2.237 2.237 0 1 1 4.475 0 2.237 2.237 0 0 1-4.475 0",clipRule:"evenodd"})))}},21099:(e,n,t)=>{t.d(n,{A:()=>r});const r={container:"container_bfhl",card:"card_M5pr","card-body":"card-body_pWOC",step:"step_BHwS",sdks:"sdks_TNPO","sdks-container":"sdks-container_ADSs","sdk-column":"sdk-column_oRrG",sdk:"sdk_c4_7","logo-container":"logo-container_BH6D","explore-cards-container":"explore-cards-container_A7yt","explore-cards":"explore-cards_QF9y","explore-cards-image":"explore-cards-image_i9yl"}},21020:(e,n,t)=>{var r=t(96540),a=Symbol.for("react.element"),i=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,l=r.__SECRET_INT
2ERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function c(e,n,t){var r,i={},c=null,d=null;for(r in void 0!==t&&(c=""+t),void 0!==n.key&&(c=""+n.key),void 0!==n.ref&&(d=n.ref),n)o.call(n,r)&&!s.hasOwnProperty(r)&&(i[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===i[r]&&(i[r]=n[r]);return{$$typeof:a,type:e,key:c,ref:d,props:i,_owner:l.current}}n.Fragment=i,n.jsx=c,n.jsxs=c},74848:(e,n,t)=>{e.exports=t(21020)},83227:(e,n,t)=>{t.d(n,{A:()=>o});var r=t(96540),a=t(34164);const i={tabItem:"tabItem_Ymn6"};function o({children:e,hidden:n,className:t}){return r.createElement("div",{role:"tabpanel",className:(0,a.A)(i.tabItem,t),hidden:n},e)}},13187:(e,n,t)=>{t.d(n,{A:()=>k});var r=t(96540),a=t(34164),i=t(23575),o=t(56347),l=t(91648),s=t(62072),c=t(73353),d=t(85831);function h(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function u(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function p(e){var n,t;return null!==(t=null===(n=r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}
2)))||void 0===n?void 0:n.filter(Boolean))&&void 0!==t?t:[]}function m(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=null!=n?n:function(e){return p(e).map((({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r})))}(t);return function(e){const n=(0,c.XI)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[n,t])}function f({value:e,tabValues:n}){return n.some((n=>n.value===e))}function g({queryString:e=!1,groupId:n}){const t=(0,o.W6)(),a=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:e,groupId:n}),i=(0,s.aZ)(a),l=(0,r.useCallback)((e=>{if(!a)return;const n=new URLSearchParams(t.location.search);n.set(a,e),t.replace(u(function(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})))),r.forEach((function(n){h(e,n,t[n])}))}return e}({},t.location),{search:n.toString()}))}),[a,t]);return[i,l]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:a}=e,i=m(e),[o,s]=(0,r.useState)((()=>function({defaultValue:e,tabValues:n}){if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!f({value:e,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}var t;const r=null!==(t=n.find((e=>e.default)))&&void 0!==t?t:n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:i}))),[c,h]=g({queryString:t,groupId:a}),[u,p]=function({groupId:e}){const n=function(e){return e?`docusaurus.tab.${e}`:null}(e),[t,a]=(0,d.Dv)(n);return[t,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:a}),b=(()=>{const e=null!=c?c:u;return f({value:e,tabValues:i})?e:null})();(0,l.A)((()=>{b&&s(b)}),[b]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!f({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);s(e),h(e),p(e)}),[h,p,i]),tabValues:i}}var y=t(52700);const x={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function v(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function E(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})))),r.forEach((function(n){v(e,n,t[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function j({className:e,block:n,selectedValue:t,selectValue:o,tabValues:l}){const s=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.a_)(),d=e=>{const n=e.currentTarget,r=s.indexOf(n),a=l[r].value;a!==t&&(c(n),o(a))},h=e=>{let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=s.indexOf(e.currentTarget)+1;var t;n=null!==(t=s[r])&&void 0!==t?t:s[0];break}case"ArrowLeft":{const t=s.indexOf(e.currentTarget)-1;var r;n=null!==(r=s[t])&&void 0!==r?r:s[s.length-1];break}}null==n||n.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":n},e)},l.map((({value:e,label:n,attributes:i})=>r.createElement("li",w(E({role:"tab",tabIndex:t===e?0:-1,"aria-selected":t===e,key:e,ref:e=>{s.push(e)},onKeyDown:h,onClick:d},i),{className:(0,a.A)("tabs__item",x.tabItem,null==i?void 0:i.className,{"tabs__item--active":t===e})}),null!=n?n:e))))}function C({lazy:e,children:n,selectedValue:t}
2){const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(e){const e=i.find((e=>e.props.value===t));return e?(0,r.cloneElement)(e,{className:(0,a.A)("margin-top--md",e.props.className)}):null}return r.createElement("div",{className:"margin-top--md"},i.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==t}))))}function _(e){const n=b(e);return r.createElement("div",{className:(0,a.A)("tabs-container",x.tabList)},r.createElement(j,E({},n,e)),r.createElement(C,E({},n,e)))}function k(e){const n=(0,y.A)();return r.createElement(_,E({key:String(n)},e),p(e.children))}},49160:(e,n,t)=>{t.d(n,{W:()=>o});var r=t(96540),a=t(21867);const i="container_uGCt",o=()=>r.createElement("div",{className:i},r.createElement("div",null,r.createElement(a.$,{href:"https://portal.basistheory.com/register",target:"_blank"},"Sign Up")),r.createElement("div",null,r.createElement(a.$,{href:"https://portal.basistheory.com/",target:"_blank",variant:"secondary"},"Sign In")))},35785:(e,n,t)=>{t.d(n,{H:()=>g});var r=t(96540),a=t(73698),i=t(11330),o=t(45554),l=t(21099),s=t(96019),c=t(9075),d=t(44791),h=t(92972),u=t(78688),p=t(7815),m=t(27828),f=t(11310);const g=({type:e,sdks:n})=>{const t={dotnet:r.createElement(o.Z,{href:"/docs/sdks/server-side/dotnet/",img:r.createElement(h.A,null),className:l.A.sdk},".NET"),go:r.createElement(o.Z,{href:"/docs/sdks/server-side/go/",img:r.createElement(u.A,null),className:l.A.sdk},"Go"),node:r.createElement(o.Z,{href:"/docs/sdks/server-side/node/",img:r.createElement(p.A,null),className:l.A.sdk},"Node"),python:r.createElement(o.Z,{href:"/docs/sdks/server-side/python/",img:r.createElement(m.A,null),className:l.A.sdk},"Python"),java:r.createElement(o.Z,{href:"/docs/sdks/server-side/java/",img:r.createElement(f.A,null),className:l.A.sdk},"Java"),javascript:r.createElement(o.Z,{href:"/docs/sdks/web/web-elements/v3/",img:r.createElement(s.A,null),className:l.A.sdk},"Javascript"),react:r.createElement(o.Z,{href:"/docs/sdks/web/web-elements/v3/?implementation=react",img:r.createElement(d.A,null),className:l.A.sdk},"React"),ios:r.createElement(o.Z,{href:"/docs/sdks/mobile/ios/",img:r.createElement("div",{className:l.A["logo-container"]},r.createElement(i.A,{width:"100%",height:"100%",sources:{light:(0,a.Ay)("/img/sdk/logos/apple.svg"),dark:(0,a.Ay)("/img/sdk/logos/apple-dark.svg")}})),className:l.A.sdk},"iOS"),swift:r.createElement(o.Z,{href:"https://github.com/Basis-Theory/basistheory-swift",img:r.createElement("div",{className:l.A["logo-container"]},r.createElement(i.A,{width:"100%",height:"100%",sources:{light:(0,a.Ay)("/img/sdk/logos/apple.svg"),dark:(0,a.Ay)("/img/sdk/logos/apple-dark.svg")}})),className:l.A.sdk},"Swift"),android:r.createElement(o.Z,{href:"/docs/sdks/mobile/android/",img:r.createElement(c.A,null),className:l.A.sdk},"Android"),"react-native":r.createElement(o.Z,{href:"/docs/sdks/mobile/react-native/",img:r.createElement(d.A,null),className:l.A.sdk},"React Native")};return r.createElement("div",{className:l.A["sdk-column"]},e&&{server:["dotnet","go","java","node","python"],elements:["javascript","react","ios","android","react-native"],client:["javascript","react","swift","android","react-native"]}[e].map((e=>t[e])),n&&n.map((e=>t[e])))}},85202:(e,n,t)=>{t.d(n,{F:()=>T,W:()=>O});var r=t(34164),a=t(96540);const i="container_ygYU",o="title_KE4f",l="content_mpoX",s="error_YPD5",c="warning_Vv3u",d="info_XpSc",h="success_pFpA",u="neutral_bgLU",p="svg_xN_H";var m;function f(){return f=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},f.apply(null,arguments)}const g=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",f({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,m||(m=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 b,y;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 v=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,b||(b=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"})),y||(y=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 E,w;function j(){return j=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},j.apply(null,arguments)}const C=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",j({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,E||(E=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"})),w||(w=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;function A(){return A=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},A.apply(null,arguments)}const N=e=>{let{title:n,titleId:t,...r}=e;return a.createElement("svg",A({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,_||(_=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"})),k||(k=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 O=function(e){return e.ERROR="error",e.WARNING="warning",e.INFO="info",e.SUCCESS="success",e.NEUTRAL="neutral",e}({});const T=({type:e="info",title:n,content:t,children:m})=>
2{const f=(0,r.A)({[s]:"error"==e,[c]:"warning"==e,[d]:"info"==e,[h]:"success"==e,[u]:"neutral"==e}),b={error:g,warning:v,info:N,success:C}[e];return a.createElement("div",{className:(0,r.A)([i,f,"alert"])},b&&a.createElement("div",null,a.createElement(b,{className:p})),a.createElement("div",null,n&&a.createElement("div",{className:o},n),a.createElement("div",{className:l},null!=t?t:m)))}},45554:(e,n,t)=>{t.d(n,{Z:()=>E});var r=t(56347),a=t(34164),i=t(96540);const o="card-container_T_80",l="card_cJJn",s="clickable_B7IA",c="hoverable_e1RN",d="raised_ivpd",h="header_K5YF",u="primary-header_ArUc",p="secondary-header_n7xI",m="body_u4tb",f="img_n1lY",g="flex-direction_S0cP";function b(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function x(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}const v=({children:e})=>i.createElement("p",{className:(0,a.A)([h,p])},e),E=e=>{var{children:n,className:t,img:o,href:h,body:u,heading:p,cta:E,hoverable:w=!0,column:j=!1,openInNewWindow:C=!1,raised:_=!1}=e,k=x(e,["children","className","img","href","body","heading","cta","hoverable","column","openInNewWindow","raised"]);const A=(0,r.W6)(),N=h&&!E?e=>{e.preventDefault(),h.startsWith("https")||C?window.open(h,"_blank"):A.push(h)}:void 0,O=(0,a.A)({[g]:j,[s]:null!=h&&!E,[c]:w,[d]:_});return i.createElement("div",y(function(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})))),r.forEach((function(n){b(e,n,t[n])}))}return e}({onClick:N},k),{className:(0,a.A)([t,l,O])}),o&&i.createElement("div",{className:f},o),i.createElement("div",{className:m},i.createElement("div",null,i.createElement("div",null,"string"==typeof p?i.createElement(v,null,p):p),i.createElement("div",null,null!=u?u:n))),E&&i.createElement("div",null,E))};E.TwoColumnLayout=({children:e})=>i.createElement("div",{className:o},e),E.PrimaryHeader=({children:e})=>i.createElement("p",{className:(0,a.A)([h,u])},e)},28453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>l});var r=t(96540);const a={},i=r.createContext(a);function o(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);
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.