Skip to content

Commit 24b9911

Browse files
w3bdesignw3bdesign
committed
Add Stripe card test details
1 parent 3e28dd0 commit 24b9911

File tree

2 files changed

+36
-51
lines changed

2 files changed

+36
-51
lines changed

‎public/js/app.js‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17995,26 +17995,7 @@ var _hoisted_22 = {
1799517995
"class": "flex justify-center w-full align-center"
1799617996
};
1799717997

17998-
var _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", {
17999-
"class": "h-6 p-4 text-xl font-bold text-center"
18000-
}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Use the following card details for testing: "), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br"), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("4242424242424242 "), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br"), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Visa "), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br"), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("CVC any 3 digits "), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br"), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)("Any future date "), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br")], -1
18001-
/* HOISTED */
18002-
);
18003-
18004-
var _hoisted_24 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("h2", {
18005-
"class": "h-10 p-4 text-2xl font-bold text-center"
18006-
}, " Stripe payment ", -1
18007-
/* HOISTED */
18008-
);
18009-
18010-
var _hoisted_25 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
18011-
"class": "flex justify-center w-full p-4 align-center"
18012-
}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br"), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", {
18013-
id: "card-element",
18014-
"class": "w-full h-16 mt-4 lg:w-5/12 xl:w-5/12"
18015-
}, " Stripe ")], -1
18016-
/* HOISTED */
18017-
);
17998+
var _hoisted_23 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createStaticVNode)("<div class=\"flex justify-center w-full align-center\" data-v-67966e56><span class=\"h-10 p-4 text-lg font-bold text-center text-red-500\" data-v-67966e56>Use the following card details for testing: <br data-v-67966e56>4242424242424242 <br data-v-67966e56>Visa <br data-v-67966e56>CVC any 3 digits <br data-v-67966e56>Any future date <br data-v-67966e56></span></div><h2 class=\"h-10 p-4 mt-32 text-2xl font-bold text-center\" data-v-67966e56> Stripe payment </h2><div class=\"flex justify-center w-full p-4 align-center\" data-v-67966e56><br data-v-67966e56><div id=\"card-element\" class=\"w-full h-16 mt-4 lg:w-5/12 xl:w-5/12\" data-v-67966e56> Stripe </div></div>", 3);
1801817999

1801918000
var _hoisted_26 = {
1802018001
"class": "flex justify-center w-full align-center"
@@ -18056,7 +18037,7 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
1805618037
name: "fade"
1805718038
}, {
1805818039
"default": _withId(function () {
18059-
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [_hoisted_23, _hoisted_24, _hoisted_25, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_26, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
18040+
return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", null, [_hoisted_23, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_26, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
1806018041
"class": ["checkoutButton", {
1806118042
disabledButton: _ctx.paymentIsProcessing
1806218043
}],

‎resources/js/pages/Checkout/Checkout.vue‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
v-if="orderError"
99
class="h-10 p-4"
1010
>
11-
<span class="text-lg text-center text-red-500">Error during order. Please retry</span>
11+
<span
12+
class="text-lg text-center text-red-500"
13+
>Error during order. Please retry</span>
1214
</div>
1315
<div
1416
v-for="products in cartContent"
@@ -80,14 +82,16 @@
8082
</div>
8183
<transition name="fade">
8284
<div v-show="customerDetails.firstName || checkoutFormIsValid">
83-
<span class="h-6 p-4 text-xl font-bold text-center">Use the following card details for testing:
84-
<br>4242424242424242
85-
<br>Visa
86-
<br>CVC any 3 digits
87-
<br>Any future date
88-
<br>
89-
</span>
90-
<h2 class="h-10 p-4 text-2xl font-bold text-center">
85+
<div class="flex justify-center w-full align-center">
86+
<span
87+
class="h-10 p-4 text-lg font-bold text-center text-red-500"
88+
>Use the following card details for testing:
89+
<br>4242424242424242 <br>Visa <br>CVC any 3
90+
digits <br>Any future date
91+
<br>
92+
</span>
93+
</div>
94+
<h2 class="h-10 p-4 mt-32 text-2xl font-bold text-center">
9195
Stripe payment
9296
</h2>
9397
<div class="flex justify-center w-full p-4 align-center">
@@ -241,52 +245,52 @@ export default defineComponent({
241245

242246
<style scoped>
243247
.disabledButton {
244-
@apply cursor-not-allowed opacity-50;
248+
@apply cursor-not-allowed opacity-50;
245249
}
246250
247251
.checkoutButton {
248-
@apply p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
252+
@apply p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
249253
}
250254
251255
.flex-container {
252-
flex-wrap: wrap;
253-
flex-direction: row;
254-
justify-content: space-around;
255-
align-items: center;
256-
align-content: center;
257-
max-width: 1380px;
258-
@apply flex border border-gray-300 rounded-lg shadow;
256+
flex-wrap: wrap;
257+
flex-direction: row;
258+
justify-content: space-around;
259+
align-items: center;
260+
align-content: center;
261+
max-width: 1380px;
262+
@apply flex border border-gray-300 rounded-lg shadow;
259263
}
260264
261265
.flex-container-total {
262-
flex-wrap: wrap;
263-
flex-direction: row;
264-
justify-content: flex-end;
265-
align-items: flex-end;
266-
align-content: center;
267-
max-width: 1380px;
268-
@apply flex;
266+
flex-wrap: wrap;
267+
flex-direction: row;
268+
justify-content: flex-end;
269+
align-items: flex-end;
270+
align-content: center;
271+
max-width: 1380px;
272+
@apply flex;
269273
}
270274
271275
.item {
272-
@apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;
276+
@apply lg:m-2 xl:m-4 xl:w-1/6 lg:w-1/6 sm:m-2 w-auto;
273277
}
274278
275279
.item-content {
276-
@apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;
280+
@apply inline-block mt-4 lg:h-12 h-20 w-32 md:w-full lg:w-full xl:w-full;
277281
}
278282
279283
.removing {
280-
@apply animate-spin cursor-not-allowed;
284+
@apply animate-spin cursor-not-allowed;
281285
}
282286
283287
.fade-enter-active,
284288
.fade-leave-active {
285-
transition: all 0.5s ease;
289+
transition: all 0.5s ease;
286290
}
287291
288292
.fade-enter-from,
289293
.fade-leave-to {
290-
opacity: 0;
294+
opacity: 0;
291295
}
292296
</style>

0 commit comments

Comments
 (0)