1/*! For license information please see 62c5b771.2023b0ce.js.LICENSE.txt */ 2"use strict";(self.webpackChunkdevelopers_basistheory_com=self.webpackChunkdevelopers_basistheory_com||[]).push([[5246],{20728:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>u,frontMatter:()=>l,metadata:()=>r,toc:()=>h});const r=JSON.parse('{"id":"blueprints/cards/issue-and-display-cards","title":"Issue and Display Credit Cards","description":"This blueprint provides a complete end-to-end guide on how to issue and reveal credit card data securely using Basis Theory and a third-party card issuer without touching the data.","source":"@site/docs/blueprints/cards/issue-and-display-cards.mdx","sourceDirName":"blueprints/cards","slug":"/blueprints/cards/issue-and-display-cards","permalink":"/docs/blueprints/cards/issue-and-display-cards","draft":false,"unlisted":false,"tags":[],"version":"current","lastUpdatedAt":1790618629000,"frontMatter":{"toc_max_heading_level":2}}');var i=t(74848),a=t(28453),o=t(85202),s=t(49160);const l={toc_max_heading_level:2},d="Issue and Display Credit Cards",c={},h=[{value:"Getting Started",id:"getting-started",level:2},{value:"Creating a Public Application",id:"creating-a-public-application",level:3},{value:"Vault Newly Created Cards",id:"vault-newly-created-cards",level:2},{value:"Setting Up the Project",id:"setting-up-the-project",level:2},{value:"Installing the iOS Elements SDK",id:"installing-the-ios-elements-sdk",level:2},{value:"Adding Your Form Components",id:"adding-your-form-components",level:2},{value:"Styling Your Form Components",id:"styling-your-form-components",level:2},{value:"Creating a Session",id:"creating-a-session",level:2},{value:"Authorizing a Session",id:"authorizing-a-session",level:2},{value:"Creating a Private Application",id:"creating-a-private-application",level:3},{value:"Authorizing in the Backend",id:"authorizing-in-the-backend",level:3},{value:"Calling the Authorization Endpoint",id:"calling-the-authorization-endpoint",level:3},{value:"Revealing a Card Token",id:"revealing-a-card-token",level:2},{value:"Revealing CVC from Issuer",id:"revealing-cvc-from-issuer",level:2},{value:"Creating a Management Application",id:"creating-a-management-application",level:3},{value:"Creating a Proxy to Lithic",id:"creating-a-proxy-to-lithic",level:3},{value:"Retrieving and Revealing CVC Value from Lithic",id:"retrieving-and-revealing-cvc-value-from-lithic",level:3},{value:"Conclusion",id:"conclusion",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",ul:"ul",...(0,a.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,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"issue-and-display-credit-cards",children:"Issue and Display Credit Cards"})}),"\n",(0,i.jsx)(n.p,{children:"This blueprint provides a complete end-to-end guide on how to issue and reveal credit card data securely using Basis Theory and a third-party card issuer without touching the data."}),"\n",(0,i.jsxs)(n.p,{children:["For this blueprint, we are going to use iOS as our client application and ",(0,i.jsx)(n.a,{href:"https://expressjs.com/",children:"Express.Js"})," for our backend, but\nthe blueprint can be modified for your specific framework or language by leveraging any one of our many language-specific ",(0,i.jsx)(n.a,{href:"/docs/sdks",children:"SDKs"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"This blueprint is a more end-to-end version of the following two guides:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/guides/share/reveal-tokenized-data",children:"Reveal Tokenized Data"})," - For revealing tokenized data such as the card PAN and expiration date."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.a,{href:"/docs/guides/share/reveal-data-from-third-party",children:"Reveal Data from Third Party"})," - For revealing the CVC from a card issue such as ",(0,i.jsx)(n.a,{href:"https://www.lithic.com/",children:"Lithic"})," or ",(0,i.jsx)(n.a,{href:"https://www.marqeta.com/",children:"Marqeta"}),"."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"You can find examples for other languages and frameworks inside those guides."}),"\n",(0,i.jsxs)(o.F,{children:["Don't want to complete this blueprint? View the completed example application ",(0,i.jsx)("a",{href:"https://github.com/Basis-Theory-Labs/display-virtual-cards-blueprint",children:"here"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"getting-started",children:"Getting Started"}
2),"\n",(0,i.jsxs)(o.F,{children:["If you are already familar with the Basis Theory platform and already created your first token, feel free to jump to the ",(0,i.jsx)("a",{href:"/docs/blueprints/cards/issue-and-display-cards#setting-up-the-project",children:"Setting Up the Project"})," section of this blueprint."]}),"\n",(0,i.jsx)(n.p,{children:"To get started, you will need a Basis Theory account."}),"\n",(0,i.jsx)(s.W,{}),"\n",(0,i.jsx)(n.h3,{id:"creating-a-public-application",children:"Creating a Public Application"}),"\n",(0,i.jsxs)(n.p,{children:["Next you will need a ",(0,i.jsx)(n.a,{href:"/docs/api/applications#application-types",children:"Public Application"})," in order to create tokens, sessions and initialize our Elements libraries."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://portal.basistheory.com/applications/create?permissions=token%3Acreate&type=public&name=Collect%20Data%20from%20Web%20Guide",children:"Click here"})," to create a Public Application or ",(0,i.jsx)(n.a,{href:"https://portal.basistheory.com/applications",children:"login to your Basis Theory account"})," and create a new application with the following settings:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Name - Public App"}),"\n",(0,i.jsx)(n.li,{children:"Application Type - Public"}),"\n",(0,i.jsxs)(n.li,{children:["Permissions - ",(0,i.jsx)(n.code,{children:"token:create"})]}),"\n"]}),"\n",(0,i.jsx)(o.F,{children:"Save the API Key from the created Public Application as it will be used later in this guide."}),"\n",(0,i.jsx)(n.h2,{id:"vault-newly-created-cards",children:"Vault Newly Created Cards"}),"\n",(0,i.jsx)(n.p,{children:"When a new card is issued with your system, you'll want to vault this with Basis Theory to later reveal it and perhaps process or share it."}),"\n",(0,i.jsxs)(n.p,{children:["In order to vault these newly created cards, follow ",(0,i.jsx)(n.a,{href:"/docs/guides/collect/collect-inbound-sensitive-data",children:"this guide"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"setting-up-the-project",children:"Setting Up the Project"}),"\n",(0,i.jsx)(n.p,{children:"We will create a new iOS application through Xcode. If you don't have Xcode, download it through the Mac App Store."}),"\n",(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:'Launch Xcode, then click \u201cCreate a new Xcode project\u201d. In the window that appears, select "iOS" for the target operating system and the "App" template under Application, then click Next.'}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:'For the Product Name enter "Reveal iOS Guide", and for the Organization enter your own name. Ensure StoryBoard and Swift are selected for the Interface and Language, then click Next.'}),"\n"]}),"\n",(0,i.jsxs)(n.li,{children:["\n",(0,i.jsx)(n.p,{children:"On the next screen save the project, wherever you'd like."}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"This will launch Xcode with the newly created project."}),"\n",(0,i.jsx)(n.h2,{id:"installing-the-ios-elements-sdk",children:"Installing the iOS Elements SDK"}),"\n",(0,i.jsxs)(n.p,{children:["We will need to install Basis Theory's ",(0,i.jsx)(n.a,{href:"/docs/sdks/mobile/ios",children:"iOS Elements SDK"}),", which will render secure ",(0,i.jsx)(n.code,{children:"UITextFields"})," for revealing the card data."]}),"\n",(0,i.jsxs)(n.p,{children:["With the Xcode window in focus, select File > Add Packages. In the dialog that appears, enter ",(0,i.jsx)(n.code,{children:"https://github.com/Basis-Theory/ios-elements"})," in the search field on the top right, then click Add Package on this screen and the next prompts."]}),"\n",(0,i.jsx)(n.h2,{id:"adding-your-form-components",children:"Adding Your Form Components"}),"\n",(0,i.jsx)(n.p,{children:"For a complete card, we will need to add three iOS elements to our app:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["A ",(0,i.jsx)(n.a,{href:"/docs/sdks/mobile/ios/types#cardnumberuitextfield",children:"CardNumberUITextField"})]}),"\n",(0,i.jsxs)(n.li,{children:["A ",(0,i.jsx)(n.a,{href:"/docs/sdks/mobile/ios/types#cardexpirationdateuitextfield",children:"CardExpirationDateUITextField"})]}),"\n",(0,i.jsxs)(n.li,{children:["A ",(0,i.jsx)(n.a,{href:"/docs/sdks/mobile/ios/types#cardverificationcodeuitextfield",children:"CardVerificationCodeUITextField"})]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["The easiest way to add any of our iOS elements is to first drop a ",(0,i.jsx)(n.code,{children:"UITextField"})," onto your ",(0,i.jsx)(n.code,{children:"Main.storyboard"})," file. To do this open the ",(0,i.jsx)(n.code,{children:"Main.storyboard"}),' file, and click on plus button on the top right and search for "UITextField" in\nthe dialog that appears. Now drag and drop the Text Field component anywhere on the iPhone screen. Feel free to size the ',(0,i.jsx)(n.code,{children:"UITextField"})," to your liking."]}),"\n",(0,i.jsxs)(n.p,{children:["With the new ",(0,i.jsx)(n.code,{children:"UITextField"})," selected, open up the Identity Inspector on the right and select ",(0,i.jsx)(n.code,{children:"CardNumberUITextField"}),", ",(0,i.jsx)(n.code,{children:"CardExpirationDateUITextField"})," or ",(0,i.jsx)(n.code,{children:"CardVerificationCodeUITextField"})," accordingly from the class drop down, similar to the image below.\nRepeat this process until you have a form component for each of the three iOS card elements."]}),"\n",(0,i.jsx)(t,{src:"/img/iOS/ios-reveal-initialization.png",alt:"iOS Reveal Initialization"}),"\n",(0,i.jsx)(n.h2,{id:"styling-your-form-components",children:"Styling Your Form Components"}),"\n",(0,i.jsx)(n.p,{children:"Now it's time to style our new card text fields. We'll be styling our elements programmatically, but feel free to style it through the GUI on Xcode, or even try implementing your own styles!"}),"\n",(0,i.jsxs)(n.p,{children:["First we need to add an outlet to our ",(0,i.jsx)(n.code,{children:"ViewController.swift"})," for each field so that we're able to manipulate them programmatically. To do this, ensure your ",(0,i.jsx)(n.code,{children:"Main.storyboard"}
2),' file is open and click on the "Add Editor to the Right" button\non the top right. Here\'s a helpful image below:']}),"\n",(0,i.jsx)(t,{src:"/img/iOS/ios-reveal-add-editor-to-the-right.png",alt:"Add Editor to the Right"}),"\n",(0,i.jsxs)(n.p,{children:["Clicking on the button above will open the ",(0,i.jsx)(n.code,{children:"Main.storyboard"})," on a new pane on the right. Now in the Project Navigator on the left, click on the ",(0,i.jsx)(n.code,{children:"ViewController.swift"})," file. This should replace the ",(0,i.jsx)(n.code,{children:"Main.storyboard"})," file on the right pane."]}),"\n",(0,i.jsxs)(n.p,{children:["Next, we control-drag from each of ",(0,i.jsx)(n.code,{children:"CardNumberUITextField"}),", ",(0,i.jsx)(n.code,{children:"CardExpirationDateUITextField"})," and ",(0,i.jsx)(n.code,{children:"CardVerificationCodeUITextField"})," in ",(0,i.jsx)(n.code,{children:"Main.storyboard"})," to the top of our ",(0,i.jsx)(n.code,{children:"ViewController"})," class in the ",(0,i.jsx)(n.code,{children:"ViewController.swift"}),' file on the right.\nIn the window that appears, type in "cardNumberElement", "cardExpirationDateElement" and "cardVerificationCodeElement" respectively for the Name of each element and click Connect. Then Xcode should suggest you import BasisTheoryElements, so let\'s go ahead and do that now.']}),"\n",(0,i.jsxs)(n.p,{children:["You should have something similar to the following for ",(0,i.jsx)(n.code,{children:"ViewController.swift"})," after these steps."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:"import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n }\n}\n"})}),"\n",(0,i.jsxs)(n.p,{children:["We'll use the new ",(0,i.jsx)(n.code,{children:"cardNumberElement"}),", ",(0,i.jsx)(n.code,{children:"cardExpirationDateElement"})," and ",(0,i.jsx)(n.code,{children:"cardVerificationCodeElement"})," outlets to style our new elements. Let's write some statements to style our form."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:'import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n\n // highlight-start\n cardNumberElement.layer.borderWidth = 1.0\n cardNumberElement.placeholder = "Card Number"\n cardNumberElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardExpirationDateElement.layer.borderWidth = 1.0\n cardExpirationDateElement.placeholder = "Expiration Date"\n cardExpirationDateElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardVerificationCodeElement.layer.borderWidth = 1.0\n cardVerificationCodeElement.placeholder = "CVC"\n cardVerificationCodeElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n // highlight-end\n }\n}\n'})}),"\n",(0,i.jsxs)(n.p,{children:["As you can see above, we take advantage of the existing ",(0,i.jsx)(n.a,{href:"https://developer.apple.com/documentation/uikit/uitextfield",children:"UITextField"})," API to style our component. All of our iOS elements extend\n",(0,i.jsx)(n.a,{href:"https://developer.apple.com/documentation/uikit/uitextfield",children:"UITextField"})," for ease of use and speed to production."]}),"\n",(0,i.jsx)(n.h2,{id:"creating-a-session",children:"Creating a Session"}),"\n",(0,i.jsxs)(n.p,{children:["Next, we'll create a ",(0,i.jsx)(n.a,{href:"/docs/api/applications/sessions",children:"Session"}),". Sessions provide temporary elevated access to your public applications, and we'll use it to safely retrieve the data from the token and to invoke a proxy to an issuer."]}),"\n",(0,i.jsxs)(n.p,{children:["As creating a session is part of the lifecycle of revealing a token value safely, we need to add a reveal ",(0,i.jsx)(n.code,{children:"UIButton"})," and a function to handle all steps for revealing, including creating the session.\nOpen the ",(0,i.jsx)(n.code,{children:"Main.storyboard"}),' file, and click on the plus button on the top right and search for "UIButton" in the dialog that appears and drag\nand drop the Filled Button component anywhere under our form elements. Let\'s change the name of this button to "Reveal" by double-clicking on the new UIButton.']}),"\n",(0,i.jsxs)(n.p,{children:["Now we need to add an action for this new button. Follow the previous steps from ",(0,i.jsx)(n.a,{href:"#styling-your-form-components",children:"Styling Your Form Components"})," to get ",(0,i.jsx)(n.code,{children:"Main.storyboard"})," and ",(0,i.jsx)(n.code,{children:"ViewController.swift"}
2),' files side-by-side. Control-drag\nthe "Reveal" UIButton into ',(0,i.jsx)(n.code,{children:"ViewController.swift"}),', then choose Action for the Connection and "reveal" for the Name.']}),"\n",(0,i.jsxs)(n.p,{children:["Now we'll add the following code to our iOS app to create a session and retrieve the ",(0,i.jsx)(n.code,{children:"sessionKey"})," and ",(0,i.jsx)(n.code,{children:"nonce"})," from it."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:'import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n @IBAction func reveal(_ sender: Any) {\n // highlight-start\n BasisTheoryElements.createSession(apiKey: "<API_KEY>") { data, error in\n let sessionKey = data!.sessionKey!\n let nonce = data!.nonce!\n\n }\n // highlight-end\n }\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n\n cardNumberElement.layer.borderWidth = 1.0\n cardNumberElement.placeholder = "Card Number"\n cardNumberElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardExpirationDateElement.layer.borderWidth = 1.0\n cardExpirationDateElement.placeholder = "Expiration Date"\n cardExpirationDateElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardVerificationCodeElement.layer.borderWidth = 1.0\n cardVerificationCodeElement.placeholder = "CVC"\n cardVerificationCodeElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n }\n}\n'})}),"\n",(0,i.jsxs)(o.F,{children:["Be sure to replace ",(0,i.jsx)("code",{children:"<API_KEY>"})," with the Public API Key you created in the ",(0,i.jsx)("a",{href:"#getting-started",children:"Getting Started"})," step."]}),"\n",(0,i.jsx)(n.h2,{id:"authorizing-a-session",children:"Authorizing a Session"}),"\n",(0,i.jsx)(n.p,{children:"In order to use the session to retrieve data, we need to authorize it with a Private Application."}),"\n",(0,i.jsx)(n.h3,{id:"creating-a-private-application",children:"Creating a Private Application"}),"\n",(0,i.jsxs)(n.p,{children:["First, lets create the ",(0,i.jsx)(n.a,{href:"/docs/api/applications#application-types",children:"Private Application"}),". To do so, ",(0,i.jsx)(n.a,{href:"https://portal.basistheory.com/applications",children:"Login to your Basis Theory account"})," and create a new application with the following settings:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Name - Reveal Cards"}),"\n",(0,i.jsx)(n.li,{children:"Application Type - Private"}),"\n",(0,i.jsxs)(n.li,{children:["Access Rule (Use the ",(0,i.jsx)(n.code,{children:"Advanced Rule Builder"})," option)","\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Description - Reveal Cards"}),"\n",(0,i.jsxs)(n.li,{children:["Container - ",(0,i.jsx)(n.code,{children:"/pci/"})]}),"\n",(0,i.jsxs)(n.li,{children:["Permissions - ",(0,i.jsx)(n.code,{children:"token:read"})," and ",(0,i.jsx)(n.code,{children:"token:use"})]}),"\n",(0,i.jsxs)(n.li,{children:["Transform - ",(0,i.jsx)(n.code,{children:"reveal"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,i.jsxs)(o.F,{children:["The Private Application must be in the same ",(0,i.jsx)("a",{href:"/docs/concepts/access-controls#what-are-tenants",children:"Tenant"})," as the token to be revealed."]}),"\n",(0,i.jsx)(o.F,{children:"Save the API Key from the created Private Application as it will be used later in this guide."}),"\n",(0,i.jsx)(n.h3,{id:"authorizing-in-the-backend",children:"Authorizing in the Backend"}),"\n",(0,i.jsxs)(n.p,{children:["A session needs to be authorized by a Private Application first before usage.\nUsing the Private Application API Key, the ",(0,i.jsx)(n.code,{children:"nonce"})," from our session, and ",(0,i.jsx)(n.a,{href:"/docs/concepts/access-controls#conditions",children:"Condition"})," we ensure we are only granting authorization for the desired token."]}),"\n",(0,i.jsxs)(o.F,{type:o.W.WARNING,children:["The ",(0,i.jsx)("b",{children:"only way"})," to ensure your private API keys are not publicly accessible is for this step to execute in your backend service."]}),"\n",(0,i.jsxs)(n.p,{children:["For this example, we will use ",(0,i.jsx)(n.a,{href:"https://expressjs.com/",children:"Express.js"})," as our backend and the ",(0,i.jsx)(n.a,{href:"/docs/sdks/server-side/node",children:"Node.js SDK"})," to authorize the session.\nWe'll create a ",(0,i.jsx)(n.code,{children:"backend.js"})," file and add the following code to start the Express.js backend and authorize an incoming session."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'showLineNumbers title="backend.js"',children:'const express = require("express");\nconst { BasisTheoryClient } = require("@basis-theory/node-sdk");\n\nconst app = express();\nconst port = 4242;\n\napp.post("/authorize", async (request, response) => {\n const bt = await new BasisTheoryClient({ apiKey: "<PRIVATE_API_KEY>", environment: BasisTheoryEnvironment.Test });\n const { nonce } = request.body;\n // authorizing a session returns an empty 200 response\n await bt.sessions.authorize({\n nonce: nonce,\n rules: [\n {\n description: "Reveal only our Card Token",\n priority: 1,\n conditions: [\n {\n attribute: "id",\n operator: "equals",\n value: "token_id_1234567890",\n },\n ],\n permissions: ["token:read", "token:use"],\n transform: "reveal",\n },\n ],\n });\n // this response is arbitrary and not required\n response.json({\n result: "success",\n });\n});\napp.listen(port, () => {\n console.log(`Example app listening on port ${port}`);\n});\n'})}),"\n",(0,i.jsxs)(n.p,{children:["Now we can start the server with the following command (from the same directory as ",(0,i.jsx)(n.code,{children:"backend.js"}),")."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"node backend.js\n"})}),"\n",(0,i.jsxs)(o.F,{children:["Be sure to replace ",(0,i.jsx)("code",{children:"<PRIVATE_API_KEY>"})," with the Private API Key you created in ",(0,i.jsx)("a",{href:"#creating-a-private-application",children:"Creating a Private Application"})," and ",(0,i.jsx)("code",{children:"token_id_1234567890"})," with the ",(0,i.jsx)("code",{children:"id"})," for the card token you wish to reveal."]}),"\n",(0,i.jsx)(n.h3,{id:"calling-the-authorization-endpoint",children:"Calling the Authorization Endpoint"}),"\n",(0,i.jsxs)(n.p,{children:["Now with our backend running, we'll add the following code to call the authorization endpoint, passing our created session ",(0,i.jsx)(n.code,{children:"nonce"})," to it:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:'import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n //highlight-start\n func authorizeSession(nonce: String, completion: @escaping ([String: Any]?, Error?) -> Void) {\n let parameters = ["nonce": nonce]\n\n let url = URL(string: "http://localhost:4242/authorize")!\n let session = URLSession.shared\n\n var request = URLRequest(url: url)\n request.httpMethod = "POST"\n\n do {\n request.httpBody = try JSONSerialization.data(withJSONObject: parameters, options: .prettyPrinted)\n } catch let error {\n completion(nil, error)\n }\n\n request.addValue("application/json", forHTTPHeaderField: "Content-Type")\n request.addValue("application/json", forHTTPHeaderField: "Accept")\n\n let task = session.dataTask(with: request, completionHandler: { data, response, error in\n guard error == nil else {\n completion(nil, error)\n return\n }\n\n do {\n let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers
2) as? [String: Any]\n completion(json, nil)\n } catch let error {\n completion(nil, error)\n }\n })\n\n task.resume()\n }\n //highlight-end\n\n @IBAction func reveal(_ sender: Any) {\n BasisTheoryElements.createSession(apiKey: "<API_KEY>") { data, error in\n let sessionKey = data!.sessionKey!\n let nonce = data!.nonce!\n\n //highlight-start\n self.authorizeSession(nonce: nonce) { result, error in\n\n }\n //highlight-end\n }\n }\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n\n cardNumberElement.layer.borderWidth = 1.0\n cardNumberElement.placeholder = "Card Number"\n cardNumberElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardExpirationDateElement.layer.borderWidth = 1.0\n cardExpirationDateElement.placeholder = "Expiration Date"\n cardExpirationDateElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardVerificationCodeElement.layer.borderWidth = 1.0\n cardVerificationCodeElement.placeholder = "CVC"\n cardVerificationCodeElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n }\n}\n'})}),"\n",(0,i.jsx)(o.F,{type:o.W.WARNING,children:"On a production environment, your endpoint to authorize session should be behind your own authorization scheme."}),"\n",(0,i.jsx)(n.h2,{id:"revealing-a-card-token",children:"Revealing a Card Token"}),"\n",(0,i.jsxs)(n.p,{children:["With the authorized session, we can now use the ",(0,i.jsx)(n.code,{children:"sessionKey"})," to retrieve the card token from the Basis Theory backend."]}),"\n",(0,i.jsx)(n.p,{children:"We'll add the following code to retrieve the token and set its values to the individual card elements."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:'import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n func authorizeSession(nonce: String, completion: @escaping ([String: Any]?, Error?) -> Void) {\n let parameters = ["nonce": nonce]\n\n let url = URL(string: "http://localhost:4242/authorize")!\n let session = URLSession.shared\n\n var request = URLRequest(url: url)\n request.httpMethod = "POST"\n\n do {\n request.httpBody = try JSONSerialization.data(withJSONObject: parameters, options: .prettyPrinted)\n } catch let error {\n completion(nil, error)\n }\n\n request.addValue("application/json", forHTTPHeaderField: "Content-Type")\n request.addValue("application/json", forHTTPHeaderField: "Accept")\n\n let task = session.dataTask(with: request, completionHandler: { data, response, error in\n guard error == nil else {\n completion(nil, error)\n return\n }\n\n do {\n let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers) as? [String: Any]\n completion(json, nil)\n } catch let error {\n completion(nil, error)\n }\n })\n\n task.resume()\n }\n\n @IBAction func reveal(_ sender: Any) {\n BasisTheoryElements.createSession(apiKey: "<API_KEY>") { data, error in\n let sessionKey = data!.sessionKey!\n let nonce = data!.nonce!\n\n self.authorizeSession(nonce: nonce) { result, error in\n //highlight-start\n BasisTheoryElements.getTokenById(id: "card_token_id", apiKey: sessionKey) { data, error in\n DispatchQueue.main.async {\n self.cardNumberElement.setValue(elementValueReference: data!.data!.number!.elementValueReference)\n\n self.cardExpirationDateElement.setValue(\n month: data!.data!.expiration_month!.elementValueReference,\n year: data!.data!.expiration_year!.elementValueReference\n )\n }\n }\n //highlight-end\n }\n }\n }\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n\n cardNumberElement.layer.borderWidth = 1.0\n cardNumberElement.placeholder = "Card Number"\n cardNumberElement.backgroundColor = UIColor
2( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardExpirationDateElement.layer.borderWidth = 1.0\n cardExpirationDateElement.placeholder = "Expiration Date"\n cardExpirationDateElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardVerificationCodeElement.layer.borderWidth = 1.0\n cardVerificationCodeElement.placeholder = "CVC"\n cardVerificationCodeElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n }\n}\n'})}),"\n",(0,i.jsx)(n.h2,{id:"revealing-cvc-from-issuer",children:"Revealing CVC from Issuer"}),"\n",(0,i.jsxs)(n.p,{children:["Card verification codes collected with Basis Theory are expunged from the platform 1 hour after its creation due to security and compliance reasons.\nIn order to show the CVC number to a customer, we can use the Basis Theory Proxy to proxy a call to the card issuer (in this blueprint, ",(0,i.jsx)(n.a,{href:"https://www.lithic.com/",children:"Lithic"}),") and retrieve the CVC safely and in compliance."]}),"\n",(0,i.jsx)(n.h3,{id:"creating-a-management-application",children:"Creating a Management Application"}),"\n",(0,i.jsxs)(n.p,{children:["To create a proxy, you will need a ",(0,i.jsx)(n.a,{href:"/docs/api/applications#application-types",children:"Management Application"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://portal.basistheory.com/applications/create?permissions=proxy%3Acreate&type=management&name=Create%20Proxy%20from%20iOS%20Guide",children:"Click here"})," to create a Management Application or ",(0,i.jsx)(n.a,{href:"https://portal.basistheory.com/applications",children:"login to your Basis Theory account"})," and create a new application with the following settings:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Name - Create Proxy"}),"\n",(0,i.jsx)(n.li,{children:"Application Type - Management"}),"\n",(0,i.jsxs)(n.li,{children:["Permissions: ",(0,i.jsx)(n.code,{children:"proxy:create"})]}),"\n"]}),"\n",(0,i.jsx)(n.h3,{id:"creating-a-proxy-to-lithic",children:"Creating a Proxy to Lithic"}),"\n",(0,i.jsxs)(n.p,{children:["A proxy can be created ",(0,i.jsx)(n.a,{href:"/docs/api/proxies/pre-configured-proxies",children:"using one of our SDKs or through our API"}),". In the example below we'll continue to use our Express.js backend.\nNotice that we are using a ",(0,i.jsx)(n.a,{href:"/docs/concepts/proxies/transforms#request-transforms",children:"request transform"})," to add our Lithic API key to the header on every proxy request."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'showLineNumbers title="backend.js"',children:'const express = require("express");\nconst { BasisTheoryClient } = require("@basis-theory/node-sdk");\n\nconst app = express();\nconst port = 4242;\n\napp.post("/authorize", async (request, response) => {\n const bt = await new BasisTheoryClient({ apiKey: "<PRIVATE_API_KEY>", environment: BasisTheoryEnvironment.Test });\n const { nonce } = request.body;\n // authorizing a session returns an empty 200 response\n await bt.sessions.authorize({\n nonce: nonce,\n rules: [\n {\n description: "Reveal only our Card Token",\n priority: 1,\n conditions: [\n {\n attribute: "id",\n operator: "equals",\n value: "token_id_1234567890",\n },\n ],\n permissions: ["token:read", "token:use"],\n transform: "reveal",\n },\n ],\n });\n // this response is arbitrary and not required\n response.json({\n result: "success",\n });\n});\n\n// highlight-start\n// TODO - CONFIGURATION\napp.post("/create-proxy", async (request, response) => {\n const bt = await new BasisTheoryClient({ apiKey: "<MANAGEMENT_API_KEY>" });\n const proxy = await bt.proxies.create(\n {\n name: "Reveal Cards Proxy",\n destinationUrl: "https://sandbox.lithic.com/v1/cards",\n requestTransform: {\n code: `module.exports = async function (req) {\n let { args: { body, headers }, bt } = req;\n\n return {\n body,\n headers: {\n ...headers,\n "Authorization": "lithic_key_123456789"\n },\n }\n };`,\n },\n requireAuth: true,\n }\n );\n\n response.send(proxy);\n});\n// highlight-end\n\napp.listen(port, () => {\n console.log(`Example app listening on port ${port}`);\n});\n'})}),"\n",(0,i.jsxs)(n.p,{children:["You can now use your favorite API client or just run the following ",(0,i.jsx)(n.code,{children:"curl"})," command from your terminal:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-shell",children:"curl -X POST http://localhost:4242/create-proxy\n"})}),"\n",(0,i.jsxs)(o.F,{children:["Be sure to replace ",(0,i.jsx)("code",{children:"<MANAGEMENT_API_KEY>"})," with the Management API Key you created in ",(0,i.jsx)("a",{href:"#creating-a-management-application",children:"Creating a Management Application"}),", and ",(0,i.jsx)("code",{children:"lithic_key_123456789"})," with your Lithic API Key."]}),"\n",(0,i.jsxs)(o.F,{children:["Write down the ",(0,i.jsx)("code",{children:"key"})," value returned from the proxy as its going to be used in the next step."]}),"\n",(0,i.jsxs)(o.F,{children:["If using Lithic in production, make sure to change the ",(0,i.jsx)("code",{children:"destinationUrl"})," to the production url: ",(0,i.jsx)("code",{children:(0,i.jsx)(n.a,{href:"https://api.lithic.com/v1/cards",children:"https://api.lithic.com/v1/cards"})})]}),"\n",(0,i.jsx)(n.h3,{id:"retrieving-and-revealing-cvc-value-from-lithic",children:"Retrieving and Revealing CVC Value from Lithic"}),"\n",(0,i.jsxs)(n.p,{children:["With the proxy created, we'll add the following code to call it using our previously authorized ",(0,i.jsx)(n.code,{children:"sessionKey"}),", retrieve the CVC number, and then set it onto our element."]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-swift",metastring:'showLineNumbers title="ViewController.swift"',children:'import UIKit\nimport BasisTheoryElements\n\nclass ViewController: UIViewController {\n @IBOutlet weak var cardNumberElement: CardNumberUITextField!\n @IBOutlet weak var cardExpirationDateElement: CardExpirationDateUITextField!\n @IBOutlet weak var cardVerificationCodeElement: CardVerificationCodeUITextField!\n\n func authorizeSession(nonce: String, completion: @escaping ([String: Any]?, Error?) -> Void) {\n let parameters = ["nonce": nonce]\n\n let url = URL(string: "http://localhost:4242/authorize")!\n let session = URLSession.shared\n\n var request = URLRequest(url: url)\n request.httpMethod = "POST"\n\n do {\n request.httpBody = try JSONSerialization.data(withJSONObject: parameters, options: .prettyPrinted)\n } catch let error {\n completion(nil, error)\n }\n\n request.addValue("application/json", forHTTPHeaderField: "Content-Type")\n request.addValue("application/json", forHTTPHeaderField: "Accept")\n\n let task = session.dataTask(with: request, completionHandler: { data, response, error in\n guard error == nil else {\n completion(nil, error)\n return\n }\n\n do {\n let json = try JSONSerialization.jsonObject(with: data!, options: .mutableContainers
2) as? [String: Any]\n completion(json, nil)\n } catch let error {\n completion(nil, error)\n }\n })\n\n task.resume()\n }\n\n @IBAction func reveal(_ sender: Any) {\n BasisTheoryElements.createSession(apiKey: "<API_KEY>") { data, error in\n let sessionKey = data!.sessionKey!\n let nonce = data!.nonce!\n\n self.authorizeSession(nonce: nonce) { result, error in\n BasisTheoryElements.getTokenById(id: "card_token_id", apiKey: sessionKey) { data, error in\n DispatchQueue.main.async {\n self.cardNumberElement.setValue(elementValueReference: data!.data!.number!.elementValueReference)\n\n self.cardExpirationDateElement.setValue(\n month: data!.data!.expiration_month!.elementValueReference,\n year: data!.data!.expiration_year!.elementValueReference\n )\n }\n\n //highlight-start\n let lithicCardTokenPath = "/lithic_token_id"\n let proxyKey = "test_proxy_123456789"\n let proxyHttpRequest = ProxyHttpRequest(method: .get, path: lithicCardTokenPath)\n BasisTheoryElements.proxy(\n apiKey: sessionKey,\n proxyKey: proxyKey,\n proxyHttpRequest: proxyHttpRequest)\n { response, data, error in\n DispatchQueue.main.async {\n self.cvcTextField.setValue(elementValueReference: data!.cvv!.elementValueReference)\n }\n }\n //highlight-end\n }\n }\n }\n }\n\n override func viewDidLoad() {\n super.viewDidLoad()\n // Do any additional setup after loading the view.\n\n cardNumberElement.layer.borderWidth = 1.0\n cardNumberElement.placeholder = "Card Number"\n cardNumberElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardExpirationDateElement.layer.borderWidth = 1.0\n cardExpirationDateElement.placeholder = "Expiration Date"\n cardExpirationDateElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n\n cardVerificationCodeElement.layer.borderWidth = 1.0\n cardVerificationCodeElement.placeholder = "CVC"\n cardVerificationCodeElement.backgroundColor = UIColor( red: 200/255, green: 200/255, blue: 200/255, alpha: 1.0 )\n }\n}\n'})}),"\n",(0,i.jsxs)(o.F,{children:["Be sure to replace ",(0,i.jsx)("code",{children:"lithic_token_id"})," with the ID for the Lithic card ",(0,i.jsx)("code",{children:"id"}),", ",(0,i.jsx)("code",{children:"test_proxy_123456789"})," with the proxy ",(0,i.jsx)("code",{children:"key"})," created in the ",(0,i.jsx)("a",{href:"#creating-a-proxy-to-lithic",children:"Creating a Proxy to Lithic"})," step and ",(0,i.jsx)("code",{children:"card_token_id"})," with your Basis Theory card token ",(0,i.jsx)("code",{children:"id"}),"."]}),"\n",(0,i.jsx)(n.p,{children:"\ud83c\udf89 The code above is the last bit that we need to reveal a full credit card! Now let's run the app by clicking on the play button on the top left. The screen should look something like this:"}),"\n",(0,i.jsx)(t,{src:"/img/iOS/ios-reveal-data-iphone-screenshot.png",alt:"iOS Reveal Data"}),"\n",(0,i.jsx)(n.h2,{id:"conclusion",children:"Conclusion"}),"\n",(0,i.jsx)(n.p,{children:"You can now reveal any data to a customer without your iOS app accessing the underlying value, reducing compliance and regulatory scope."}),"\n",(0,i.jsx)(n.p,{children:"Try to tap the Reveal button and watch the card values appear on screen."}),"\n",(0,i.jsxs)(n.p,{children:["Have feedback or questions? Join us in our ",(0,i.jsx)(n.a,{href:"https://community.basistheory.com",children:"Slack community"}),"."]})]})}function u(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},21020:(e,n,t)=>{var r=t(96540),i=Symbol.for("react.element"),a=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,s=r.__SECRET_INT
2ERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};function d(e,n,t){var r,a={},d=null,c=null;for(r in void 0!==t&&(d=""+t),void 0!==n.key&&(d=""+n.key),void 0!==n.ref&&(c=n.ref),n)o.call(n,r)&&!l.hasOwnProperty(r)&&(a[r]=n[r]);if(e&&e.defaultProps)for(r in n=e.defaultProps)void 0===a[r]&&(a[r]=n[r]);return{$$typeof:i,type:e,key:d,ref:c,props:a,_owner:s.current}}n.Fragment=a,n.jsx=d,n.jsxs=d},74848:(e,n,t)=>{e.exports=t(21020)},49160:(e,n,t)=>{t.d(n,{W:()=>o});var r=t(96540),i=t(21867);const a="container_uGCt",o=()=>r.createElement("div",{className:a},r.createElement("div",null,r.createElement(i.$,{href:"https://portal.basistheory.com/register",target:"_blank"},"Sign Up")),r.createElement("div",null,r.createElement(i.$,{href:"https://portal.basistheory.com/",target:"_blank",variant:"secondary"},"Sign In")))},85202:(e,n,t)=>{t.d(n,{F:()=>V,W:()=>N});var r=t(34164),i=t(96540);const a="container_ygYU",o="title_KE4f",s="content_mpoX",l="error_YPD5",d="warning_Vv3u",c="info_XpSc",h="success_pFpA",p="neutral_bgLU",u="svg_xN_H";var m;function x(){return x=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},x.apply(null,arguments)}const g=e=>{let{title:n,titleId:t,...r}=e;return i.createElement("svg",x({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?i.createElement("title",{id:t},n):null,m||(m=i.createElement("path",{fill:"#F56C9D",fillRule:"evenodd",d:"M9 1.438A7.557 7.557 0 0 0 1.438 9 7.557 7.557 0 0 0 9 16.563 7.56 7.56 0 0 0 16.563 9 7.56 7.56 0 0 0 9 1.438M.063 9A8.93 8.93 0 0 1 9 .063 8.937 8.937 0 0 1 17.938 9 8.937 8.937 0 0 1 9 17.938 8.93 8.93 0 0 1 .063 9M9 4.188c.38 0 .688.307.688.687v4.583a.687.687 0 1 1-1.376 0V4.875c0-.38.308-.687.688-.687m-.006 7.791H9q.034 0 .067.003c.444.038.85.4.85.914 0 .27-.122.496-.272.645a.92.92 0 0 1-.645.271.92.92 0 0 1-.917-.916.914.914 0 0 1 .908-.917z",clipRule:"evenodd"})))};var y,f;function v(){return v=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},v.apply(null,arguments)}const j=e=>{let{title:n,titleId:t,...r}=e;return i.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",width:20,height:18,fill:"none",viewBox:"0 0 20 18","aria-labelledby":t},r),n?i.createElement("title",{id:t},n):null,y||(y=i.createElement("path",{fill:"#FFA726",fillRule:"evenodd",d:"M7.656 1.614c1.04-1.809 3.649-1.809 4.689 0l7.055 12.27c1.037 1.803-.264 4.053-2.344 4.053H2.945c-2.08 0-3.381-2.25-2.345-4.052zm3.497.685a1.33 1.33 0 0 0-2.305 0L1.792 14.57a1.33 1.33 0 0 0 1.153 1.992h14.111a1.33 1.33 0 0 0 1.152-1.992z",clipRule:"evenodd"})),f||(f=i.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 w,b;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 E=e=>{let{title:n,titleId:t,...r}=e;return i.createElement("svg",C({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?i.createElement("title",{id:t},n):null,w||(w=i.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"})),b||(b=i.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,I;function T(){return T=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},T.apply(null,arguments)}const A=e=>{let{title:n,titleId:t,...r}=e;return i.createElement("svg",T({xmlns:"http://www.w3.org/2000/svg",width:18,height:18,fill:"none",viewBox:"0 0 18 18","aria-labelledby":t},r),n?i.createElement("title",{id:t},n):null,k||(k=i.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"})),I||(I=i.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 N=function(e){return e.ERROR="error",e.WARNING="warning",e.INFO="info",e.SUCCESS="success",e.NEUTRAL="neutral",e}({});const V=({type:e="info",title:n,content:t,children:m})=>{const x=(0,r.A)({[l]:"error"==e,[d]:"warning"==e,[c]:"info"==e,[h]:"success"==e,[p]:"neutral"==e}),y={error:g,warning:j,info:A,success:E}[e];return i.createElement("div",{className:(0,r.A)([a,x,"alert"])},y&&i.createElement("div",null,i.createElement(y,{className:u})),i.createElement("div",null,n&&i.createElement("div",{className:o},n),i.createElement("div",{className:s},null!=t?t:m)))}},28453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>s});var r=t(96540);const i={},a=r.createContext(i);function o(e){const n=r.useContext(a);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),r.createElement(a.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.