Vue Stripe
Home
GitHub
Twitter
OSSPHP
Searchβ¦
Vue 2 Version
π
Welcome!
π³
Stripe Checkout
Getting Started
One-time Payment
Subscriptions
Sessions
Sessions Generator
Google & Apple Pay
πΈ
Stripe Elements
π
Vue Stripe Plugin
π«
Community
Others
π
Partners
Powered By
GitBook
Sessions Generator
Interactive session generator to demo checkout using sessions.
Take note that
Session
ids are generated from the backend. To know more about sessions visit the documentation.
Demo
β
Session Generator Demo
β
1. Prepare checkout data
[frontend]
Prerequisite:
Enable Checkout, and Create Products
β
1
{
2
"success_url"
:
"https://vuestripe.com/stripe-checkout/sessions-generator?state=success"
,
3
"cancel_url"
:
"https://vuestripe.com/stripe-checkout/sessions-generator?state=cancel"
,
4
"payment_method_types"
:
[
5
"card"
6
],
7
"line_items"
:
[
8
{
9
"price"
:
"price_1I1xv3EfCmJMLhhrJ5vdGxy6"
,
10
"quantity"
:
1
11
}
12
],
13
"mode"
:
"payment"
14
}
Copied!
2. Create a Session
[backend]
Create a session using the data from Step 1. Note that the
"mode"="payment"
means that you are creating a one-time payment session.
Node.js sample here
.
3. Checkout using Session id
[frontend]
Follow this sample code below:
1
<
template
>
2
<
div
>
3
<
stripe-checkout
4
ref
=
"
checkoutRef
"
5
:pk
=
"
publishableKey
"
6
:session-id
=
"
sessionId
"
7
/>
8
<
button
@click
=
"
submit
"
>
Checkout!
</
button
>
9
</
div
>
10
</
template
>
11
β
12
<
script
>
13
import
{
StripeCheckout
}
from
'@vue-stripe/vue-stripe'
;
14
export
default
{
15
components
:
{
16
StripeCheckout
,
17
},
18
data
()
{
19
this
.
publishableKey
=
process
.
env
.
STRIPE_PUBLISHABLE_KEY
;
20
return
{
21
loading
:
false
,
22
sessionId
:
'session-id'
,
// session id from backend
23
};
24
},
25
methods
:
{
26
submit
()
{
27
// You will be redirected to Stripe's secure checkout page
28
this
.
$refs
.
checkoutRef
.
redirectToCheckout
();
29
},
30
},
31
};
32
</
script
>
Copied!
Previous
Sessions
Next
Google & Apple Pay
Last modified
3mo ago
Export as PDF
Copy link
Edit on GitHub
Contents
Demo
1. Prepare checkout data [frontend]
2. Create a Session [backend]
3. Checkout using Session id [frontend]