[{"data":1,"prerenderedAt":648},["ShallowReactive",2],{"navigation_docs":3,"-migration-v2-to-v3":102,"-migration-v2-to-v3-surround":645},[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":99,"body":104,"description":638,"extension":639,"links":640,"meta":641,"navigation":490,"path":100,"seo":642,"stem":101,"__hash__":644},"docs/5.migration/1.v2-to-v3.md",{"type":105,"value":106,"toc":626},"minimark",[107,112,121,126,154,161,165,168,213,239,258,262,268,304,307,311,330,345,364,383,387,402,544,548,551,582,592,596,607,611,622],[108,109,111],"h2",{"id":110},"migrating-from-v2-to-v3","Migrating from v2 to v3",[113,114,115,116,120],"p",{},"v3 syncs Vue Stripe with ",[117,118,119],"code",{},"@stripe/react-stripe-js"," 6.8.1, which requires\nStripe.js v9.",[122,123,125],"h3",{"id":124},"upgrade-stripejs-first","Upgrade Stripe.js first",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install vue-stripe@^3 @stripe/stripe-js@^9.5.0\n","bash","",[117,134,135],{"__ignoreMap":132},[136,137,140,144,148,151],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sBMFI","npm",[136,145,147],{"class":146},"sfazB"," install",[136,149,150],{"class":146}," vue-stripe@^3",[136,152,153],{"class":146}," @stripe/stripe-js@^9.5.0\n",[113,155,156,157,160],{},"Stripe.js v9 removed ",[117,158,159],{},"stripe.initCheckout()"," and split it into two entry points.\nThat is what forces the checkout changes below. There is no way to keep the old\nAPI working on v9.",[122,162,164],{"id":163},"checkoutprovider-is-removed","CheckoutProvider is removed",[113,166,167],{},"Pick the provider that matches your integration.",[169,170,171,184],"table",{},[172,173,174],"thead",{},[175,176,177,181],"tr",{},[178,179,180],"th",{},"Before",[178,182,183],{},"After",[185,186,187,201],"tbody",{},[175,188,189,196],{},[190,191,192,195],"td",{},[117,193,194],{},"CheckoutProvider"," with individual Elements",[190,197,198],{},[117,199,200],{},"CheckoutElementsProvider",[175,202,203,208],{},[190,204,205,207],{},[117,206,194],{}," with a prebuilt form",[190,209,210],{},[117,211,212],{},"CheckoutFormProvider",[127,214,218],{"className":215,"code":216,"language":217,"meta":132,"style":132},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","-import { CheckoutProvider } from 'vue-stripe/checkout'\n+import { CheckoutElementsProvider } from 'vue-stripe/checkout'\n","diff",[117,219,220,230],{"__ignoreMap":132},[136,221,222,226],{"class":138,"line":139},[136,223,225],{"class":224},"sMK4o","-",[136,227,229],{"class":228},"swJcz","import { CheckoutProvider } from 'vue-stripe/checkout'\n",[136,231,233,236],{"class":138,"line":232},2,[136,234,235],{"class":224},"+",[136,237,238],{"class":146},"import { CheckoutElementsProvider } from 'vue-stripe/checkout'\n",[127,240,242],{"className":215,"code":241,"language":217,"meta":132,"style":132},"-\u003CCheckoutProvider :stripe=\"stripePromise\" :options=\"options\">\n+\u003CCheckoutElementsProvider :stripe=\"stripePromise\" :options=\"options\">\n",[117,243,244,251],{"__ignoreMap":132},[136,245,246,248],{"class":138,"line":139},[136,247,225],{"class":224},[136,249,250],{"class":228},"\u003CCheckoutProvider :stripe=\"stripePromise\" :options=\"options\">\n",[136,252,253,255],{"class":138,"line":232},[136,254,235],{"class":224},[136,256,257],{"class":146},"\u003CCheckoutElementsProvider :stripe=\"stripePromise\" :options=\"options\">\n",[122,259,261],{"id":260},"new-checkout-composables","New checkout composables",[113,263,264,267],{},[117,265,266],{},"useCheckout()"," still works under both providers and still returns the Elements\nshaped result, so existing code keeps running. It is deprecated. Move to the\nprovider-specific composable, which returns the exact actions its SDK exposes.",[169,269,270,280],{},[172,271,272],{},[175,273,274,277],{},[178,275,276],{},"Provider",[178,278,279],{},"Composable",[185,281,282,293],{},[175,283,284,288],{},[190,285,286],{},[117,287,200],{},[190,289,290],{},[117,291,292],{},"useCheckoutElements()",[175,294,295,299],{},[190,296,297],{},[117,298,212],{},[190,300,301],{},[117,302,303],{},"useCheckoutForm()",[113,305,306],{},"Calling the wrong one for your provider throws with a message telling you which\nto use instead.",[122,308,310],{"id":309},"paymentformelement-became-checkoutform","PaymentFormElement became CheckoutForm",[127,312,314],{"className":215,"code":313,"language":217,"meta":132,"style":132},"-import { PaymentFormElement } from 'vue-stripe'\n+import { CheckoutForm } from 'vue-stripe/checkout'\n",[117,315,316,323],{"__ignoreMap":132},[136,317,318,320],{"class":138,"line":139},[136,319,225],{"class":224},[136,321,322],{"class":228},"import { PaymentFormElement } from 'vue-stripe'\n",[136,324,325,327],{"class":138,"line":232},[136,326,235],{"class":224},[136,328,329],{"class":146},"import { CheckoutForm } from 'vue-stripe/checkout'\n",[113,331,332,333,336,337,340,341,344],{},"It also moved entry points, and its ",[117,334,335],{},"elementType"," is now reported as\n",[117,338,339],{},"checkoutForm"," rather than ",[117,342,343],{},"paymentForm",". Update any handler that reads it.",[127,346,348],{"className":215,"code":347,"language":217,"meta":132,"style":132},"-@loaderror=\"e => console.log(e.elementType) // 'paymentForm'\"\n+@loaderror=\"e => console.log(e.elementType) // 'checkoutForm'\"\n",[117,349,350,357],{"__ignoreMap":132},[136,351,352,354],{"class":138,"line":139},[136,353,225],{"class":224},[136,355,356],{"class":228},"@loaderror=\"e => console.log(e.elementType) // 'paymentForm'\"\n",[136,358,359,361],{"class":138,"line":232},[136,360,235],{"class":224},[136,362,363],{"class":146},"@loaderror=\"e => console.log(e.elementType) // 'checkoutForm'\"\n",[113,365,366,367,370,371,374,375,378,379,382],{},"The types renamed alongside it, from ",[117,368,369],{},"PaymentFormElementProps"," and\n",[117,372,373],{},"PaymentFormElementEmits"," to ",[117,376,377],{},"CheckoutFormProps"," and ",[117,380,381],{},"CheckoutFormEmits",".",[122,384,386],{"id":385},"appearance-options-moved-for-the-form-provider","Appearance options moved for the form provider",[113,388,389,391,392,395,396,398,399,401],{},[117,390,200],{}," keeps appearance and fonts under ",[117,393,394],{},"elementsOptions",",\nmatching the old ",[117,397,194],{},". ",[117,400,212],{}," takes them at the\ntop level.",[127,403,407],{"className":404,"code":405,"language":406,"meta":132,"style":132},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// CheckoutElementsProvider\nconst options = {\n  clientSecret,\n  elementsOptions: { appearance: { theme: 'night' } },\n}\n\n// CheckoutFormProvider\nconst formOptions = {\n  clientSecret,\n  appearance: { theme: 'night' },\n}\n","js",[117,408,409,415,431,440,479,485,492,498,510,517,539],{"__ignoreMap":132},[136,410,411],{"class":138,"line":139},[136,412,414],{"class":413},"sHwdD","// CheckoutElementsProvider\n",[136,416,417,421,425,428],{"class":138,"line":232},[136,418,420],{"class":419},"spNyl","const",[136,422,424],{"class":423},"sTEyZ"," options ",[136,426,427],{"class":224},"=",[136,429,430],{"class":224}," {\n",[136,432,434,437],{"class":138,"line":433},3,[136,435,436],{"class":423},"  clientSecret",[136,438,439],{"class":224},",\n",[136,441,443,446,449,452,455,457,459,462,464,467,470,473,476],{"class":138,"line":442},4,[136,444,445],{"class":228},"  elementsOptions",[136,447,448],{"class":224},":",[136,450,451],{"class":224}," {",[136,453,454],{"class":228}," appearance",[136,456,448],{"class":224},[136,458,451],{"class":224},[136,460,461],{"class":228}," theme",[136,463,448],{"class":224},[136,465,466],{"class":224}," '",[136,468,469],{"class":146},"night",[136,471,472],{"class":224},"'",[136,474,475],{"class":224}," }",[136,477,478],{"class":224}," },\n",[136,480,482],{"class":138,"line":481},5,[136,483,484],{"class":224},"}\n",[136,486,488],{"class":138,"line":487},6,[136,489,491],{"emptyLinePlaceholder":490},true,"\n",[136,493,495],{"class":138,"line":494},7,[136,496,497],{"class":413},"// CheckoutFormProvider\n",[136,499,501,503,506,508],{"class":138,"line":500},8,[136,502,420],{"class":419},[136,504,505],{"class":423}," formOptions ",[136,507,427],{"class":224},[136,509,430],{"class":224},[136,511,513,515],{"class":138,"line":512},9,[136,514,436],{"class":423},[136,516,439],{"class":224},[136,518,520,523,525,527,529,531,533,535,537],{"class":138,"line":519},10,[136,521,522],{"class":228},"  appearance",[136,524,448],{"class":224},[136,526,451],{"class":224},[136,528,461],{"class":228},[136,530,448],{"class":224},[136,532,466],{"class":224},[136,534,469],{"class":146},[136,536,472],{"class":224},[136,538,478],{"class":224},[136,540,542],{"class":138,"line":541},11,[136,543,484],{"class":224},[122,545,547],{"id":546},"new-components","New components",[113,549,550],{},"Nothing here is breaking. These simply did not exist in v2.",[113,552,553,554,557,558,439,561,557,564,557,567,439,570,557,573,439,576,557,579,382],{},"Root entry point: ",[117,555,556],{},"CurrencySelectorElement",", ",[117,559,560],{},"ContactDetailsElement",[117,562,563],{},"ShippingAddressElement",[117,565,566],{},"TermsElement",[117,568,569],{},"IssuingCardNumberDisplayElement",[117,571,572],{},"IssuingCardCvcDisplayElement",[117,574,575],{},"IssuingCardExpiryDisplayElement",[117,577,578],{},"IssuingCardPinDisplayElement",[117,580,581],{},"IssuingCardCopyButtonElement",[113,583,584,585,557,588,557,590,382],{},"Checkout entry point: ",[117,586,587],{},"CheckoutForm",[117,589,560],{},[117,591,566],{},[122,593,595],{"id":594},"new-event","New event",[113,597,598,599,602,603,606],{},"Elements now emit ",[117,600,601],{},"availablepaymentmethodschange",", matching\n",[117,604,605],{},"onAvailablePaymentMethodsChange"," in React Stripe.js.",[122,608,610],{"id":609},"fixed","Fixed",[113,612,613,614,617,618,621],{},"The checkout form element called ",[117,615,616],{},"createPaymentFormElement",", which Stripe.js v9\nrenamed to ",[117,619,620],{},"createForm",". If you were on a v9 prerelease, this was broken and now\nworks.",[623,624,625],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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}",{"title":132,"searchDepth":232,"depth":232,"links":627},[628],{"id":110,"depth":232,"text":111,"children":629},[630,631,632,633,634,635,636,637],{"id":124,"depth":433,"text":125},{"id":163,"depth":433,"text":164},{"id":260,"depth":433,"text":261},{"id":309,"depth":433,"text":310},{"id":385,"depth":433,"text":386},{"id":546,"depth":433,"text":547},{"id":594,"depth":433,"text":595},{"id":609,"depth":433,"text":610},"Upgrade Vue Stripe from v2 to v3","md",null,{},{"title":111,"description":643},"Every breaking change between Vue Stripe v2 and v3, with replacements","BybLTF77cr9vULzP200oBDcuHD98EcN2yKaGO--ag4I",[646,640],{"title":90,"path":91,"stem":92,"description":647,"children":-1},"CodeSandbox examples and common use cases",1787037123842]