refactor: remove ref, key doesn't change

Author: softbeehive

examples/CardElement.vue

@@ -34,7 +34,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const publishableKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
+const publishableKey = "pk_test_TYooMQauvdEDq54NiTphI7jx" // test key
 const stripeOptions = ref<StripeConstructorOptions>({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -56,7 +56,7 @@ const cardComponent = useTemplateRef("cardComponent")
 const stripe = ref<Stripe | null>(null)
 
 onBeforeMount(async () => {
-  stripe.value = await loadStripe(publishableKey.value)
+  stripe.value = await loadStripe(publishableKey)
   stripeLoaded.value = true
 })
 

examples/CardElementLegacy.vue

@@ -38,7 +38,7 @@ export default defineComponent({
   },
 
   setup() {
-    const stripeKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
+    const stripeKey = "pk_test_TYooMQauvdEDq54NiTphI7jx" // test key
     const stripeOptions = ref({
       // https://stripe.com/docs/js/initializing#init_stripe_js-options
     })
@@ -56,7 +56,7 @@ export default defineComponent({
     const elms = ref()
 
     onBeforeMount(() => {
-      const stripePromise = loadStripe(stripeKey.value)
+      const stripePromise = loadStripe(stripeKey)
       stripePromise.then(() => {
         stripeLoaded.value = true
       })

examples/ExpressCheckoutElement.vue

@@ -26,7 +26,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const publishableKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT") // test key
+const publishableKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT" // test key
 const stripeOptions = ref<StripeConstructorOptions>({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -42,7 +42,7 @@ const expressCheckoutOptions = ref<StripeExpressCheckoutElementOptions>({
 const stripeLoaded = ref(false)
 
 onBeforeMount(() => {
-  loadStripe(publishableKey.value).then(() => {
+  loadStripe(publishableKey).then(() => {
     stripeLoaded.value = true
   })
 })

examples/PaymentElementDeferred.vue

@@ -37,7 +37,7 @@ import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const stripeKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT")
+const stripeKey = "pk_test_f3duw0VsAEM2TJFMtWQ90QAT"
 const stripeOptions = ref({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -61,7 +61,7 @@ const elementsComponent = useTemplateRef("elementsComponent")
 const paymentComponent = useTemplateRef("paymentComponent")
 
 onBeforeMount(() => {
-  loadStripe(stripeKey.value).then(() => {
+  loadStripe(stripeKey).then(() => {
     stripeLoaded.value = true
 
     // Good place to call your backend to create PaymentIntent