Skip to content

Commit 3107336

Browse files
softbeehivesoftbeehive
committed
feat: add examples for Payment, Express Checkout, and Card
1 parent a5126fb commit 3107336

File tree

6 files changed

+279
-16
lines changed

6 files changed

+279
-16
lines changed

‎examples/CardElement.vue‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<template>
2+
<form @submit.prevent="handlePay">
3+
<StripeElements
4+
v-if="stripeLoaded"
5+
:stripe-key="publishableKey"
6+
:instance-options="instanceOptions"
7+
:elements-options="elementsOptions"
8+
ref="elementsComponent"
9+
>
10+
<StripeElement
11+
type="card"
12+
:options="cardOptions"
13+
ref="cardComponent"
14+
/>
15+
</StripeElements>
16+
<button>Pay now</button>
17+
</form>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { loadStripe } from "@stripe/stripe-js"
22+
import type {
23+
StripeCardElementOptions,
24+
StripeConstructorOptions,
25+
StripeElementsOptions,
26+
} from "@stripe/stripe-js"
27+
import { onBeforeMount, ref, useTemplateRef } from "vue"
28+
import StripeElement from "../src/components/StripeElement.vue"
29+
import StripeElements from "../src/components/StripeElements.vue"
30+
31+
const publishableKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
32+
const instanceOptions = ref<StripeConstructorOptions>({
33+
// https://stripe.com/docs/js/initializing#init_stripe_js-options
34+
})
35+
const elementsOptions = ref<StripeElementsOptions>({
36+
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
37+
})
38+
const cardOptions = ref<StripeCardElementOptions>({
39+
// https://stripe.com/docs/stripe.js#element-options
40+
})
41+
const stripeLoaded = ref(false)
42+
43+
const elementsComponent = useTemplateRef("elementsComponent")
44+
const cardComponent = useTemplateRef("cardComponent")
45+
46+
onBeforeMount(() => {
47+
loadStripe(publishableKey.value).then(() => {
48+
stripeLoaded.value = true
49+
})
50+
})
51+
52+
function handlePay() {
53+
// You need to implement backend for creating PaymentIntent
54+
// Learn more by reading https://docs.stripe.com/payments/card-element?lang=node
55+
const stripeInstance = elementsComponent.value?.instance
56+
const card = cardComponent.value?.stripeElement
57+
58+
// Let's skip to the point you got clientSecret
59+
const clientSecret = "i_was_created_on_server"
60+
61+
stripeInstance
62+
?.confirmCardPayment(clientSecret, {
63+
payment_method: {
64+
card,
65+
},
66+
})
67+
.then((payload) => {
68+
if (payload.error) {
69+
console.error(payload.error)
70+
} else {
71+
console.log("Great success!")
72+
}
73+
})
74+
75+
// if (payload.error) {
76+
// setError(`Payment failed ${payload.error.message}`);
77+
// setProcessing(false);
78+
// } else {
79+
// setError(null);
80+
// setProcessing(false);
81+
// setSucceeded(true);
82+
// }
83+
}
84+
</script>

examples/CardOnly.vue renamed to examples/CardElementLegacy.vue

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,41 @@
11
<template>
22
<StripeElements
33
v-if="stripeLoaded"
4-
v-slot="{ elements }"
5-
ref="elms"
64
:stripe-key="stripeKey"
75
:instance-options="instanceOptions"
86
:elements-options="elementsOptions"
7+
ref="elms"
98
>
10-
<StripeElement ref="card" :elements="elements" :options="cardOptions" />
9+
<StripeElement
10+
type="card"
11+
:options="cardOptions"
12+
ref="card"
13+
/>
1114
</StripeElements>
12-
<button type="button" @click="pay">Pay</button>
15+
<button
16+
type="button"
17+
@click="pay"
18+
>
19+
Pay
20+
</button>
1321
</template>
1422

1523
<script lang="ts">
16-
import { defineComponent, ref, onBeforeMount } from 'vue'
17-
import { loadStripe } from '@stripe/stripe-js'
18-
import StripeElements from '../src/components/StripeElements.vue'
19-
import StripeElement from '../src/components/StripeElement.vue'
24+
import { loadStripe } from "@stripe/stripe-js"
25+
import { defineComponent, onBeforeMount, ref } from "vue"
26+
import StripeElement from "../src/components/StripeElement.vue"
27+
import StripeElements from "../src/components/StripeElements.vue"
2028
2129
export default defineComponent({
22-
name: 'CardOnly',
30+
name: "CardElement",
2331
2432
components: {
2533
StripeElements,
2634
StripeElement,
2735
},
2836
2937
setup() {
30-
const stripeKey = ref('pk_test_TYooMQauvdEDq54NiTphI7jx') // test key
38+
const stripeKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
3139
const instanceOptions = ref({
3240
// https://stripe.com/docs/js/initializing#init_stripe_js-options
3341
})
@@ -37,7 +45,7 @@ export default defineComponent({
3745
const cardOptions = ref({
3846
// https://stripe.com/docs/stripe.js#element-options
3947
value: {
40-
postalCode: '12345',
48+
postalCode: "12345",
4149
},
4250
})
4351
const stripeLoaded = ref(false)
@@ -64,10 +72,16 @@ export default defineComponent({
6472
6573
methods: {
6674
pay() {
75+
/*
76+
WARNING:
77+
legacy way to implement card payments,
78+
for modern card example, see CardElement.vue
79+
*/
80+
6781
// Get stripe element
6882
const cardElement = this.card.stripeElement
6983
70-
// Access instance methods, e.g. createToken()
84+
// "instance" means Stripe Instance or Stripe object
7185
this.elms.instance.createToken(cardElement).then((result: object) => {
7286
// Handle result.error or result.token
7387
console.log(result)

‎examples/DemoApp.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<h1>vue-stripe-js demo</h1>
4+
5+
<section>
6+
<h2>Payment Element</h2>
7+
<p>Deferred flow - add guide link</p>
8+
<PaymentElement />
9+
</section>
10+
11+
<section>
12+
<h2>Card Element</h2>
13+
<p></p>
14+
<CardElement />
15+
</section>
16+
17+
<section>
18+
<h2>Card Element (Legacy)</h2>
19+
<p></p>
20+
<CardElementLegacy />
21+
</section>
22+
23+
<section>
24+
<h2>Express Checkout Element</h2>
25+
<ExpressCheckoutElement />
26+
</section>
27+
</div>
28+
</template>
29+
30+
<script setup lang="ts">
31+
import CardElement from "./CardElement.vue"
32+
import CardElementLegacy from "./CardElementLegacy.vue"
33+
import ExpressCheckoutElement from "./ExpressCheckoutElement.vue"
34+
import PaymentElement from "./PaymentElement.vue"
35+
</script>

‎examples/ExpressCheckoutElement.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<StripeElements
3+
v-if="stripeLoaded"
4+
:stripe-key="publishableKey"
5+
:instance-options="instanceOptions"
6+
:elements-options="elementsOptions"
7+
ref="elementsComponent"
8+
>
9+
<StripeElement
10+
type="expressCheckout"
11+
:options="expressCheckoutOptions"
12+
ref="expressCheckoutComponent"
13+
/>
14+
</StripeElements>
15+
</template>
16+
17+
<script setup lang="ts">
18+
import { loadStripe } from "@stripe/stripe-js"
19+
import type {
20+
StripeConstructorOptions,
21+
StripeElementsOptions,
22+
StripeExpressCheckoutElement,
23+
StripeExpressCheckoutElementOptions,
24+
} from "@stripe/stripe-js"
25+
import { onBeforeMount, ref, useTemplateRef } from "vue"
26+
import StripeElement from "../src/components/StripeElement.vue"
27+
import StripeElements from "../src/components/StripeElements.vue"
28+
29+
const publishableKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT") // test key
30+
const instanceOptions = ref<StripeConstructorOptions>({
31+
// https://stripe.com/docs/js/initializing#init_stripe_js-options
32+
})
33+
const elementsOptions = ref<StripeElementsOptions>({
34+
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
35+
mode: "payment",
36+
amount: 1099,
37+
currency: "eur",
38+
})
39+
const expressCheckoutOptions = ref<StripeExpressCheckoutElementOptions>({
40+
// https://stripe.com/docs/stripe.js#element-options
41+
})
42+
const stripeLoaded = ref(false)
43+
44+
onBeforeMount(() => {
45+
loadStripe(publishableKey.value).then(() => {
46+
stripeLoaded.value = true
47+
})
48+
})
49+
50+
const elementsComponent = useTemplateRef("elementsComponent")
51+
const expressCheckoutComponent = useTemplateRef("expressCheckoutComponent")
52+
53+
const handleSomething = () => {
54+
const stripeInstance = elementsComponent.value?.instance
55+
const expressCheckout: StripeExpressCheckoutElement =
56+
expressCheckoutComponent.value?.stripeElement
57+
58+
// do advanced stuff ...
59+
}
60+
/*
61+
The Express Checkout Element contains an iframe that securely sends the payment information to Stripe over an HTTPS connection. The checkout page address must also start with https://, rather than http://, for your integration to work.
62+
63+
https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?locale=en-GB&lang=node
64+
*/
65+
66+
// To get element rendered on localhost
67+
// 1. Use your publishableKey
68+
// 2. Stripe says you need https
69+
// 3. Add domains for Apple Pay, Google Pay, and Link
70+
// 4. I tested it by enabling PayPal in Dashboard > Settings > Payments > Payment Methods
71+
</script>

‎examples/PaymentElement.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<template>
2+
<form @submit.prevent="handleSubmit">
3+
<StripeElements
4+
v-if="stripeLoaded"
5+
:stripe-key="stripeKey"
6+
:instance-options="instanceOptions"
7+
:elements-options="elementsOptions"
8+
ref="elementsComponent"
9+
>
10+
<StripeElement
11+
type="payment"
12+
:options="paymentElementOptions"
13+
ref="paymentComponent"
14+
/>
15+
</StripeElements>
16+
<button>Submit</button>
17+
</form>
18+
</template>
19+
20+
<script setup lang="ts">
21+
import { type StripeElementsOptionsMode, loadStripe } from "@stripe/stripe-js"
22+
/**
23+
* DEFERRED PAYMENT
24+
* This Payment Element example is based on
25+
* https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment
26+
*/
27+
import { onBeforeMount, ref } from "vue"
28+
import StripeElement from "../src/components/StripeElement.vue"
29+
import StripeElements from "../src/components/StripeElements.vue"
30+
31+
const stripeKey = ref(
32+
"pk_test_51NH8GWJOvIxb7wA7NEsy1lurmkwPRypNibLx2Dhvq28h2VICCXViQ5UI85vrPDwRwitMCVQeQTEBQOFKcLhaAr7i00aEax8rAB",
33+
)
34+
const instanceOptions = ref({
35+
// https://stripe.com/docs/js/initializing#init_stripe_js-options
36+
})
37+
const elementsOptions = ref<StripeElementsOptionsMode>({
38+
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
39+
mode: "payment",
40+
amount: 1099,
41+
currency: "eur",
42+
})
43+
const paymentElementOptions = ref({
44+
// https://stripe.com/docs/stripe.js#element-options
45+
})
46+
const stripeLoaded = ref(false)
47+
48+
// Define component refs
49+
const elementsComponent = ref()
50+
const paymentComponent = ref()
51+
52+
function handleSubmit() {}
53+
54+
onBeforeMount(() => {
55+
loadStripe(stripeKey.value).then(() => {
56+
stripeLoaded.value = true
57+
})
58+
})
59+
</script>

‎examples/demo.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createApp } from 'vue'
2-
import CardOnly from './CardOnly.vue'
1+
import { createApp } from "vue"
2+
import DemoApp from "./DemoApp.vue"
33

4-
const app = createApp(CardOnly)
5-
app.mount('#app')
4+
const app = createApp(DemoApp)
5+
app.mount("#app")

0 commit comments

Comments
 (0)