1

I am creating a vue3 application with stripe payment gateway. I just included my js file in the public/index.html file

<script src="https://js.stripe.com/v3"></script>

And created a component for the checkout like below

<template>
  <div>
    <stripe-element-payment
      ref="paymentRef"
      :pk="pk"
      :elements-options="elementsOptions"
      :confirm-params="confirmParams"
    />
    <button @click="pay">Pay Now</button>
  </div>
</template>

<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';

export default {
  name:'CheckoutPage',
  components: {
    StripeElementPayment,
  },
  data () {
    return {
      pk: 'my_key',
      elementsOptions: {
        appearance: {},
        clientSecret: ''
      },
      confirmParams: {
        return_url: 'http://localhost:8080/success',
      },
    };
  },
  methods: {
    async generatePaymentIntent () {
      const paymentIntent = await this.apiCallToGeneratePaymentIntent(); // api call for payment intent
      this.elementsOptions.clientSecret = paymentIntent.client_secret;
    },
    pay () {
      this.$refs.paymentRef.submit();
    }
  },
};
</script>

And when i run this , i am getting a console error and the screen is totally blank

index.js?5447:1054 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.__vue_render__$1 (index.js?5447:1054:1)
    at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5580:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
    at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
    at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5708:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:5490:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:5448:1)
    at patch (runtime-core.esm-bundler.js?d2dd:5038:1)
    at mountChildren (runtime-core.esm-bundler.js?d2dd:5234:1)

This is the console error, iam getting

Emzyn pvt ltd
  • 45
  • 1
  • 7

1 Answers1

0

you must implement this fuction apiCallToGeneratePaymentIntent .

hung
  • 1