Stripe with Vue.js

Question

I'm trying to get Stripe working with Vue but am having some difficulties.

So, I'm importing it in the head of my html file:

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

After a button is pressed, I run:

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

But I get a Stripe is not defined.

I also tried importing it from npm like Node.

import Stripe from 'stripe'

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

I don't get Stripe is not defined but I get a TypeError: stripe.redirectToCheckout is not a function

Answer 1

I'm trying to get Stripe working with Vue but am having some difficulties.

So, I'm importing it in the head of my html file:

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

After a button is pressed, I run:

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

But I get a Stripe is not defined.

I also tried importing it from npm like Node.

import Stripe from 'stripe'

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

I don't get Stripe is not defined but I get a TypeError: stripe.redirectToCheckout is not a function

Answer 2

I'm trying to get Stripe working with Vue but am having some difficulties.

So, I'm importing it in the head of my html file:

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

After a button is pressed, I run:

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

But I get a Stripe is not defined.

I also tried importing it from npm like Node.

import Stripe from 'stripe'

const stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxx');

stripe.redirectToCheckout({
    items: [{sku: 'sku_xxxxx', quantity: 1}],

    successUrl: 'http://localhost:5000/success',
    cancelUrl: 'http://localhost:5000/canceled',
})

I don't get Stripe is not defined but I get a TypeError: stripe.redirectToCheckout is not a function