[{"data":1,"prerenderedAt":837},["ShallowReactive",2],{"navigation_docs":3,"-core-concepts-issuing-elements":102,"-core-concepts-issuing-elements-surround":832},[4,22,59,80,93],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","1.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","1.getting-started/2.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","1.getting-started/3.installation",{"title":19,"path":20,"stem":21},"Setup Application","/getting-started/setup-application","1.getting-started/3.setup-application",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Core Concepts","/core-concepts","2.core-concepts",[27,31,35,39,43,47,51,55],{"title":28,"path":29,"stem":30},"Elements","/core-concepts/elements","2.core-concepts/1.elements",{"title":32,"path":33,"stem":34},"Payment Element","/core-concepts/payment-element","2.core-concepts/2.payment-element",{"title":36,"path":37,"stem":38},"Express Checkout Element","/core-concepts/express-checkout-element","2.core-concepts/3.express-checkout-element",{"title":40,"path":41,"stem":42},"Link Authentication Element","/core-concepts/link-authentication-element","2.core-concepts/4.link-authentication-element",{"title":44,"path":45,"stem":46},"Address Element","/core-concepts/address-element","2.core-concepts/5.address-element",{"title":48,"path":49,"stem":50},"Card Elements","/core-concepts/card-elements","2.core-concepts/6.card-elements",{"title":52,"path":53,"stem":54},"Checkout","/core-concepts/checkout","2.core-concepts/7.checkout",{"title":56,"path":57,"stem":58},"Issuing Elements","/core-concepts/issuing-elements","2.core-concepts/8.issuing-elements",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Advance","/advance","3.advance",[64,68,72,76],{"title":65,"path":66,"stem":67},"Service","/advance/service","3.advance/1.service",{"title":69,"path":70,"stem":71},"Styling","/advance/styling","3.advance/2.styling",{"title":73,"path":74,"stem":75},"Reference & Instance","/advance/reference-instance","3.advance/3.reference-instance",{"title":77,"path":78,"stem":79},"Mount your Element","/advance/mount-your-element","3.advance/4.mount-your-element",{"title":81,"path":82,"stem":83,"children":84,"page":6},"Support","/support","4.support",[85,89],{"title":86,"path":87,"stem":88},"FAQs","/support/faqs","4.support/1.faqs",{"title":90,"path":91,"stem":92},"Examples","/support/examples","4.support/2.examples",{"title":94,"icon":6,"path":95,"stem":96,"children":97,"page":6},"Migration","/migration","5.migration",[98],{"title":99,"path":100,"stem":101},"v2 to v3","/migration/v2-to-v3","5.migration/1.v2-to-v3",{"id":103,"title":56,"body":104,"description":825,"extension":826,"links":827,"meta":828,"navigation":326,"path":57,"seo":829,"stem":58,"__hash__":831},"docs/2.core-concepts/8.issuing-elements.md",{"type":105,"value":106,"toc":818},"minimark",[107,111,115,118,123,194,198,621,637,641,654,814],[108,109,56],"h2",{"id":110},"issuing-elements",[112,113,114],"p",{},"Issuing Elements render sensitive card details without those details touching\nyour servers or your DOM. Each one needs an ephemeral key and the card ID.",[112,116,117],{},"These require a Stripe Issuing account.",[119,120,122],"h3",{"id":121},"available-elements","Available elements",[124,125,126,139],"table",{},[127,128,129],"thead",{},[130,131,132,136],"tr",{},[133,134,135],"th",{},"Component",[133,137,138],{},"Shows",[140,141,142,154,164,174,184],"tbody",{},[130,143,144,151],{},[145,146,147],"td",{},[148,149,150],"code",{},"IssuingCardNumberDisplayElement",[145,152,153],{},"Full card number",[130,155,156,161],{},[145,157,158],{},[148,159,160],{},"IssuingCardCvcDisplayElement",[145,162,163],{},"CVC",[130,165,166,171],{},[145,167,168],{},[148,169,170],{},"IssuingCardExpiryDisplayElement",[145,172,173],{},"Expiry date",[130,175,176,181],{},[145,177,178],{},[148,179,180],{},"IssuingCardPinDisplayElement",[145,182,183],{},"PIN",[130,185,186,191],{},[145,187,188],{},[148,189,190],{},"IssuingCardCopyButtonElement",[145,192,193],{},"Button that copies one of the above",[119,195,197],{"id":196},"usage","Usage",[199,200,205],"pre",{"className":201,"code":202,"language":203,"meta":204,"style":204},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { loadStripe } from '@stripe/stripe-js'\nimport {\n  Elements,\n  IssuingCardCopyButtonElement,\n  IssuingCardCvcDisplayElement,\n  IssuingCardExpiryDisplayElement,\n  IssuingCardNumberDisplayElement,\n} from 'vue-stripe'\n\nconst stripePromise = loadStripe('pk_test_xxx')\n\nconst cardOptions = {\n  issuingCard: 'ic_xxx',\n  nonce: 'nonce_xxx',\n  ephemeralKeySecret: 'ek_test_xxx',\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CElements :stripe=\"stripePromise\">\n    \u003CIssuingCardNumberDisplayElement :options=\"cardOptions\" />\n    \u003CIssuingCardCvcDisplayElement :options=\"cardOptions\" />\n    \u003CIssuingCardExpiryDisplayElement :options=\"cardOptions\" />\n    \u003CIssuingCardCopyButtonElement :options=\"{ toCopy: 'number' }\" @click=\"onCopied\" />\n  \u003C/Elements>\n\u003C/template>\n","vue","",[148,206,207,227,257,265,274,282,290,298,306,321,328,357,362,374,392,409,426,432,442,447,457,483,508,529,550,602,612],{"__ignoreMap":204},[208,209,212,216,220,224],"span",{"class":210,"line":211},"line",1,[208,213,215],{"class":214},"sMK4o","\u003C",[208,217,219],{"class":218},"swJcz","script",[208,221,223],{"class":222},"spNyl"," setup",[208,225,226],{"class":214},">\n",[208,228,230,234,237,241,244,247,250,254],{"class":210,"line":229},2,[208,231,233],{"class":232},"s7zQu","import",[208,235,236],{"class":214}," {",[208,238,240],{"class":239},"sTEyZ"," loadStripe",[208,242,243],{"class":214}," }",[208,245,246],{"class":232}," from",[208,248,249],{"class":214}," '",[208,251,253],{"class":252},"sfazB","@stripe/stripe-js",[208,255,256],{"class":214},"'\n",[208,258,260,262],{"class":210,"line":259},3,[208,261,233],{"class":232},[208,263,264],{"class":214}," {\n",[208,266,268,271],{"class":210,"line":267},4,[208,269,270],{"class":239},"  Elements",[208,272,273],{"class":214},",\n",[208,275,277,280],{"class":210,"line":276},5,[208,278,279],{"class":239},"  IssuingCardCopyButtonElement",[208,281,273],{"class":214},[208,283,285,288],{"class":210,"line":284},6,[208,286,287],{"class":239},"  IssuingCardCvcDisplayElement",[208,289,273],{"class":214},[208,291,293,296],{"class":210,"line":292},7,[208,294,295],{"class":239},"  IssuingCardExpiryDisplayElement",[208,297,273],{"class":214},[208,299,301,304],{"class":210,"line":300},8,[208,302,303],{"class":239},"  IssuingCardNumberDisplayElement",[208,305,273],{"class":214},[208,307,309,312,314,316,319],{"class":210,"line":308},9,[208,310,311],{"class":214},"}",[208,313,246],{"class":232},[208,315,249],{"class":214},[208,317,318],{"class":252},"vue-stripe",[208,320,256],{"class":214},[208,322,324],{"class":210,"line":323},10,[208,325,327],{"emptyLinePlaceholder":326},true,"\n",[208,329,331,334,337,340,343,346,349,352,354],{"class":210,"line":330},11,[208,332,333],{"class":222},"const",[208,335,336],{"class":239}," stripePromise ",[208,338,339],{"class":214},"=",[208,341,240],{"class":342},"s2Zo4",[208,344,345],{"class":239},"(",[208,347,348],{"class":214},"'",[208,350,351],{"class":252},"pk_test_xxx",[208,353,348],{"class":214},[208,355,356],{"class":239},")\n",[208,358,360],{"class":210,"line":359},12,[208,361,327],{"emptyLinePlaceholder":326},[208,363,365,367,370,372],{"class":210,"line":364},13,[208,366,333],{"class":222},[208,368,369],{"class":239}," cardOptions ",[208,371,339],{"class":214},[208,373,264],{"class":214},[208,375,377,380,383,385,388,390],{"class":210,"line":376},14,[208,378,379],{"class":218},"  issuingCard",[208,381,382],{"class":214},":",[208,384,249],{"class":214},[208,386,387],{"class":252},"ic_xxx",[208,389,348],{"class":214},[208,391,273],{"class":214},[208,393,395,398,400,402,405,407],{"class":210,"line":394},15,[208,396,397],{"class":218},"  nonce",[208,399,382],{"class":214},[208,401,249],{"class":214},[208,403,404],{"class":252},"nonce_xxx",[208,406,348],{"class":214},[208,408,273],{"class":214},[208,410,412,415,417,419,422,424],{"class":210,"line":411},16,[208,413,414],{"class":218},"  ephemeralKeySecret",[208,416,382],{"class":214},[208,418,249],{"class":214},[208,420,421],{"class":252},"ek_test_xxx",[208,423,348],{"class":214},[208,425,273],{"class":214},[208,427,429],{"class":210,"line":428},17,[208,430,431],{"class":214},"}\n",[208,433,435,438,440],{"class":210,"line":434},18,[208,436,437],{"class":214},"\u003C/",[208,439,219],{"class":218},[208,441,226],{"class":214},[208,443,445],{"class":210,"line":444},19,[208,446,327],{"emptyLinePlaceholder":326},[208,448,450,452,455],{"class":210,"line":449},20,[208,451,215],{"class":214},[208,453,454],{"class":218},"template",[208,456,226],{"class":214},[208,458,460,463,465,468,471,473,476,479,481],{"class":210,"line":459},21,[208,461,462],{"class":214},"  \u003C",[208,464,28],{"class":218},[208,466,467],{"class":214}," :",[208,469,470],{"class":222},"stripe",[208,472,339],{"class":214},[208,474,475],{"class":214},"\"",[208,477,478],{"class":239},"stripePromise",[208,480,475],{"class":214},[208,482,226],{"class":214},[208,484,486,489,491,493,496,498,500,503,505],{"class":210,"line":485},22,[208,487,488],{"class":214},"    \u003C",[208,490,150],{"class":218},[208,492,467],{"class":214},[208,494,495],{"class":222},"options",[208,497,339],{"class":214},[208,499,475],{"class":214},[208,501,502],{"class":239},"cardOptions",[208,504,475],{"class":214},[208,506,507],{"class":214}," />\n",[208,509,511,513,515,517,519,521,523,525,527],{"class":210,"line":510},23,[208,512,488],{"class":214},[208,514,160],{"class":218},[208,516,467],{"class":214},[208,518,495],{"class":222},[208,520,339],{"class":214},[208,522,475],{"class":214},[208,524,502],{"class":239},[208,526,475],{"class":214},[208,528,507],{"class":214},[208,530,532,534,536,538,540,542,544,546,548],{"class":210,"line":531},24,[208,533,488],{"class":214},[208,535,170],{"class":218},[208,537,467],{"class":214},[208,539,495],{"class":222},[208,541,339],{"class":214},[208,543,475],{"class":214},[208,545,502],{"class":239},[208,547,475],{"class":214},[208,549,507],{"class":214},[208,551,553,555,557,559,561,563,565,568,571,574,576,579,581,583,585,588,591,593,595,598,600],{"class":210,"line":552},25,[208,554,488],{"class":214},[208,556,190],{"class":218},[208,558,467],{"class":214},[208,560,495],{"class":222},[208,562,339],{"class":214},[208,564,475],{"class":214},[208,566,567],{"class":214},"{ ",[208,569,570],{"class":218},"toCopy",[208,572,573],{"class":214},": ",[208,575,348],{"class":214},[208,577,578],{"class":252},"number",[208,580,348],{"class":214},[208,582,243],{"class":214},[208,584,475],{"class":214},[208,586,587],{"class":214}," @",[208,589,590],{"class":222},"click",[208,592,339],{"class":214},[208,594,475],{"class":214},[208,596,597],{"class":239},"onCopied",[208,599,475],{"class":214},[208,601,507],{"class":214},[208,603,605,608,610],{"class":210,"line":604},26,[208,606,607],{"class":214},"  \u003C/",[208,609,28],{"class":218},[208,611,226],{"class":214},[208,613,615,617,619],{"class":210,"line":614},27,[208,616,437],{"class":214},[208,618,454],{"class":218},[208,620,226],{"class":214},[112,622,623,624,626,627,630,631,633,634,636],{},"Every Issuing element requires its ",[148,625,495],{}," prop. Each emits ",[148,628,629],{},"ready"," with the\nunderlying element instance, and ",[148,632,190],{}," also emits\n",[148,635,590],{},".",[119,638,640],{"id":639},"disclosures","Disclosures",[112,642,643,646,647,650,651,653],{},[148,644,645],{},"IssuingDisclosure"," and ",[148,648,649],{},"FinancialAccountDisclosure"," render Stripe's required\ndisclosure copy. They take the Stripe instance directly rather than sitting\ninside an ",[148,652,28],{}," provider.",[199,655,657],{"className":201,"code":656,"language":203,"meta":204,"style":204},"\u003Cscript setup>\nimport { loadStripe } from '@stripe/stripe-js'\nimport { IssuingDisclosure } from 'vue-stripe'\n\nconst stripePromise = loadStripe('pk_test_xxx')\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CIssuingDisclosure\n    :stripe=\"stripePromise\"\n    :options=\"{ publicCardProgramName: 'Acme Card' }\"\n  />\n\u003C/template>\n",[148,658,659,669,687,706,710,730,738,742,750,757,773,801,806],{"__ignoreMap":204},[208,660,661,663,665,667],{"class":210,"line":211},[208,662,215],{"class":214},[208,664,219],{"class":218},[208,666,223],{"class":222},[208,668,226],{"class":214},[208,670,671,673,675,677,679,681,683,685],{"class":210,"line":229},[208,672,233],{"class":232},[208,674,236],{"class":214},[208,676,240],{"class":239},[208,678,243],{"class":214},[208,680,246],{"class":232},[208,682,249],{"class":214},[208,684,253],{"class":252},[208,686,256],{"class":214},[208,688,689,691,693,696,698,700,702,704],{"class":210,"line":259},[208,690,233],{"class":232},[208,692,236],{"class":214},[208,694,695],{"class":239}," IssuingDisclosure",[208,697,243],{"class":214},[208,699,246],{"class":232},[208,701,249],{"class":214},[208,703,318],{"class":252},[208,705,256],{"class":214},[208,707,708],{"class":210,"line":267},[208,709,327],{"emptyLinePlaceholder":326},[208,711,712,714,716,718,720,722,724,726,728],{"class":210,"line":276},[208,713,333],{"class":222},[208,715,336],{"class":239},[208,717,339],{"class":214},[208,719,240],{"class":342},[208,721,345],{"class":239},[208,723,348],{"class":214},[208,725,351],{"class":252},[208,727,348],{"class":214},[208,729,356],{"class":239},[208,731,732,734,736],{"class":210,"line":284},[208,733,437],{"class":214},[208,735,219],{"class":218},[208,737,226],{"class":214},[208,739,740],{"class":210,"line":292},[208,741,327],{"emptyLinePlaceholder":326},[208,743,744,746,748],{"class":210,"line":300},[208,745,215],{"class":214},[208,747,454],{"class":218},[208,749,226],{"class":214},[208,751,752,754],{"class":210,"line":308},[208,753,462],{"class":214},[208,755,756],{"class":218},"IssuingDisclosure\n",[208,758,759,762,764,766,768,770],{"class":210,"line":323},[208,760,761],{"class":214},"    :",[208,763,470],{"class":222},[208,765,339],{"class":214},[208,767,475],{"class":214},[208,769,478],{"class":239},[208,771,772],{"class":214},"\"\n",[208,774,775,777,779,781,783,785,788,790,792,795,797,799],{"class":210,"line":330},[208,776,761],{"class":214},[208,778,495],{"class":222},[208,780,339],{"class":214},[208,782,475],{"class":214},[208,784,567],{"class":214},[208,786,787],{"class":218},"publicCardProgramName",[208,789,573],{"class":214},[208,791,348],{"class":214},[208,793,794],{"class":252},"Acme Card",[208,796,348],{"class":214},[208,798,243],{"class":214},[208,800,772],{"class":214},[208,802,803],{"class":210,"line":359},[208,804,805],{"class":214},"  />\n",[208,807,808,810,812],{"class":210,"line":364},[208,809,437],{"class":214},[208,811,454],{"class":218},[208,813,226],{"class":214},[815,816,817],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":204,"searchDepth":229,"depth":229,"links":819},[820],{"id":110,"depth":229,"text":56,"children":821},[822,823,824],{"id":121,"depth":259,"text":122},{"id":196,"depth":259,"text":197},{"id":639,"depth":259,"text":640},"Display card details securely with Stripe Issuing Elements","md",null,{},{"title":56,"description":830},"Render card number, CVC, expiry, and PIN details with Stripe Issuing Elements in Vue","RaWW-I0NaR6YpOTccy82EDy-gFfSyyeCotKGfXAS_wA",[833,835],{"title":52,"path":53,"stem":54,"description":834,"children":-1},"CheckoutElementsProvider, CheckoutFormProvider, and EmbeddedCheckout",{"title":65,"path":66,"stem":67,"description":836,"children":-1},"Composables for accessing Stripe, Elements, and Checkout instances",1787037122863]