same as #23 but i don't understand what should i do

[frederic117]

please help :) i use NUXT

TypeError: document.querySelector(...).parentElement.submit is not a function at VueComponent. (StripeCheckout.vue:165) at Array. (vue.js:661) at nextTickHandler (vue.js:608) at handleError @ vue.js:529 (anonymous) @ vue.js:663 nextTickHandler @ vue.js:608

My template:

 <div class="message-body contentAdd">
                    <form action="/process-payment" method="POST">
                        <div class="field loggiin">
                            <b-radio v-model="productId" native-value=1>
                                 <strong>5 €</strong>
                            </b-radio>
                            <br><br>
                            <b-radio v-model="productId" native-value=2>
                              <strong>10 €</strong>
                            </b-radio><br>
                            <br>
                            <b-radio v-model="productId" native-value=3>
                               <strong>15 €</strong>
                            </b-radio>
                        </div><br>
                        <div class="loggiin3">
                            <stripe-checkout
                                :buttonClass="buttonClass"
                                :button="button"
                                stripe-key="µµµ************µµµ"
                                :products="products"
                                :product-id="productId"
                                :options="options"
                                formId="vue-stripe"	
                                >
                            </stripe-checkout>
                        </div>
                    </form>
                </div>

[i-m-Shahbaj]

I'm also facing the same issue and still dont know what to do.

[JonasMunck]

I also use nuxt and this solution worked for me:

One way of avoiding the TypeError: document.querySelector(...).parentElement.submit is not a function-problem is to configure vue-stripe to use the on-success="broadcast" option to handle the submission yourself (with the good side-effect that you avoid the document.querySelector('#'+this.formId).parentElement.submit() call to be executed)

The code that explains why it works: https://github.com/matfish2/vue-stripe/blob/master/src/StripeCheckout.vue#L168-L176

[raul93611]

I also was having the same issue and this issue is really easy to solve. parentElement is looking for the immediate parent of stripe-checkout in your case you have a div, that's why the error is displayed, because submit function cannot work with a div so the easy way to solve that is deleting that div or setting your stripe-checkout inside the form immediately.