#Serquand

1 messages · Page 1 of 1 (latest)

sweet arrowBOT
wet needle
#

Hi there, can you describe the problem or share some screenshots?

potent monolith
#

Ok, so I will share my code in a first time

# 
<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 {
    components: {
        StripeElementPayment,
    },

    props: {
        clientSecret: {
            type: String, 
            required: true
        }
    },

    data () {
        return {
            pk: "pk_test_51LaAHZAZxKtqwNR7XnOs0oOYheHdcM9ObheTPluzIcXIdj9C7LsAzcV8XFYihYgcrMlY5Yoh0bfL5hqsnu0Bu3wW005JiCSHKe",
            
            elementsOptions: {},

            confirmParams: {
                return_url: 'http://localhost:8080/success', // success url
            },
        };
    },
    
    mounted () {
        this.generatePaymentIntent();
    },
    
    methods: {
        pay () {
            this.$refs.paymentRef.submit();
        },

        generatePaymentIntent() {
            this.elementsOptions.clientSecret = this.$props.clientSecret;
        }
    },
};
</script>
#

And I've got those errors

wet needle
#

What errors?

potent monolith
#

This is the console of my Vue app

wet needle
#

There's only one error and it's about undefined type error

potent monolith
#

Yes but a lot of different warning and I can't understand all of those..
And I can't understand what's wrong..

wet needle
#

Did you pass a clientSecret to your custom component?

potent monolith
#

No but in the documentation I can't found it so I thought it was not important...

#

And here is the code used

wet needle
#

It's important, without a client_secret, the PaymentElement won't be rendered.

potent monolith
#

So the name of the props is just client_secret ?

#

And why the docs doesn't talk about it ?

wet needle
#

Vue-stripe is a community library, not officially supported by Stripe.

potent monolith
#

Oh okk

#

Sorry

wet needle
potent monolith
#

Yeah but I only found about React and Next... But not Vue...

wet needle
#

Vue is not officially supported I'm afraid.

potent monolith
#

Oh.. Do you know how can I could do so ?

#

Do you know others wrappers or something ?

wet needle