| Server IP : 14.225.204.176 / Your IP : 216.73.216.252 Web Server : nginx/1.24.0 System : Linux nodejs-ybgk 6.8.0-40-generic #40-Ubuntu SMP PREEMPT_DYNAMIC Fri Jul 5 10:34:03 UTC 2024 x86_64 User : root ( 0) PHP Version : 8.1.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/html/php/home-services/resources/views/payment_methods/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-tid="elements_examples.meta.title">Stripe Elements: Build beautiful, smart checkout flows</title>
<meta data-tid="elements_examples.meta.description" name="description" content="Build beautiful, smart checkout flows.">
<script src="https://js.stripe.com/v3/"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600" rel="stylesheet">
<!-- CSS for each example: -->
<style>
* {
box-sizing: border-box;
}
blockquote,
body,
button,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
pre,
ul {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
}
button,
select {
border: none;
outline: none;
background: none;
font-family: inherit;
}
a,
button,
input,
select,
textarea {
-webkit-tap-highlight-color: transparent;
}
:root {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
min-height: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
font-size: 62.5%;
font-family: Poppins, Open Sans, Segoe UI, sans-serif;
font-weight: 400;
font-style: normal;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "pnum";
font-variant-numeric: proportional-nums;
}
.globalContent {
-ms-flex-positive: 1;
flex-grow: 1;
}
@font-face {
font-family: StripeIcons;
src: url(data:application/octet-stream;base64,d09GRk9UVE8AAAZUAAoAAAAAB6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADKAAAAx8AAAOKkWuAp0dTVUIAAAZIAAAACgAAAAoAAQAAT1MvMgAAAXAAAABJAAAAYGcdjVZjbWFwAAACvAAAAFYAAACUKEhKfWhlYWQAAAD8AAAAMAAAADYJAklYaGhlYQAAAVAAAAAgAAAAJAYoAa5obXR4AAABLAAAACQAAAAoEOAAWW1heHAAAAD0AAAABgAAAAYAClAAbmFtZQAAAbwAAAD%2FAAABuXejDuxwb3N0AAADFAAAABMAAAAg%2F7gAMgAAUAAACgAAeNpjYGRgYABifeaSpHh%2Bm68MzMwHgCIMl08yqyDo%2F95Mkcy8QC4zAxNIFAD8tAiweNpjfMAQyfiAgYEpgoGBcQmQlmFgYPgAZOtAcQZEDgCHaQVGeNpjYGRgYD7z34eBgSmCgeH%2Ff6ZIBqAICuACAHpYBNp42mNgZtzAOIGBlYGDqYDJgYGBwQNCMwYwGDEcA%2FKBUthBqHe4H4MDg4L6Imae%2Fz4MB5jPMGwBCjOC5Bi9mKYAKQUGBgAFHgteAAAAeNplkMFqwkAURU9itBVKF6XLLrLsxiGKMYH0B4IgoqjdRokajAmNUfolhX5Df7IvZhBt5zHMeffduQwDPPCFQbWM81mzyZ3uocEz95qtK0%2BTN140t2jzLk7DaotiEmk2eWSlucErH5otnvjW3OSTH82tSg8n8eaYRkVXOY4TzIaLURB2tDaPi0OSZ3Y9G09tx6lxm5erPDtVA%2BX7wT7axXm5Vmmy7ClXDfqe515CCJkQs%2BFIKk8t6KJwzhUwY8iCkVBI54%2FvvzKXruBAQk6GfZM0ZipKxdfqVpylfErlP11uKHypgL2k7iSz8qxFTSV5SU%2FIlT2gjyfl%2FgKN9EDsAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAHEEACj8QNOBhYGOyDNAYRMQFpBcZL6ov%2F%2Foaw5%2F%2F%2F%2Ff3kvH8iD2McCxExAO1kYWIE2cjCwAwAgUQwvAAB42mNgZgCD%2F1sZjBiwAAAswgHqAHjaNVFbbxNHGN2JMmtlNnIoZFFx1F2nDoTWgJLIhRQqWlRowyXiUkqE1IZLVW0dJzHYjpAhxnbYi8HXdWxsEKCIi0DdqjxVyhOKkBBS%2FdAX%2FkJfmiCe0Gz4orbjLNFo5uj79B19Z85BXGsLhxAiB7ef%2BFmZGj8XaVb9dgdn%2B5Dd02J%2F2JqFIXtpeQ5Lc6h1YzKbXcN2F%2F2qg373wZ3ly%2Bs5gpCwfpO3d8dnXwyfOheJhC9FgsovsanJ4MCuzw84sN%2BBb1Zh34ADfU7za6fq%2Fyl8Ib7K9E4Eo9HgpHLQu6aL45CB8ug6yqAbKIeyqMAhjjD1nM49596hbqQgHf2B%2Fm5xt3S8sqXlORFe%2FHuSvuD3vesUQ4eVxjgEfm08PWK5%2FoF14lBjDAJvXI0xMRS0%2BMVjbGLIbzV%2BP2y5aOC46IfAb7TzT5cFbSJwEKCc9eXifGgqtOBahN3vWy7aOS76f1zkrVNiaNw1NIpfhyBg8X%2FN428t3v2KJl6KtVqxWpXpCD2Bq5XZW3XPrWv1dMVHEmZy9pr8dhsGdQuhKt%2FTh9Mz6nTCE34Yeyy56byfUHMzqaWrEpRpHldmrpqJrosXPyV0N%2BzAsMJYKzwMwjacTmtXGe9%2B7InkrtPz3aRoaIWPSUEtGjL1wUcYFnoJXeChG7qwpmfUHkI30XsvRdMsmKZMs9TwEsjR67ik6%2Fk14hk4jVcGe4k9yMMojGDNyKiqRy1opi5phUrG7HLDnkfdxOHktZIu072wB9jFhpHReoj3UXNF3lmReb%2FC0eaMx%2BESO1NY1w2myfuMuXW7VKvJ9CQ9im9Wy3XmllpLVX0kWUzNpmW6E%2FrY8ePkjLaV%2FPCMWVTeTJidTYtyuJpuWhSOMYsuwBhMgNK0dCtxS3O7%2Fmtvy7YL9lKn7RfvbODaEerw%2BXfuPfT92WDkiopLpaJZ9pQNUy9JAlNdyjVVH6PDTDV7saB2TadSCVWQYIQeZ2F8QgTVM30zdZtFlcOVSmU1WYFXolFFeRB9Kgt8PJmMx2vJu7IwvZoOS9XRFwsLsXCylKjMyGxXrV5kXxb%2BBxsddR0AAAEAAAAAAAAAAAAA) format("woff");
}
.container,
.container-fluid,
.container-lg,
.container-wide,
.container-xl {
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
.container,
.container-lg {
max-width: 1040px;
}
.container-wide,
.container-xl {
max-width: 1160px;
}
.common-SuperTitle {
font-weight: 300;
font-size: 45px;
line-height: 60px;
color: #32325d;
letter-spacing: -.01em;
}
@media (min-width: 670px) {
.common-SuperTitle {
font-size: 50px;
line-height: 70px;
}
}
.common-IntroText {
font-weight: 400;
font-size: 21px;
line-height: 31px;
color: #525f7f;
}
@media (min-width: 670px) {
.common-IntroText {
font-size: 24px;
line-height: 36px;
}
}
.common-BodyText {
font-weight: 400;
font-size: 17px;
line-height: 26px;
color: #6b7c93;
}
.common-Link {
color: #6772e5;
font-weight: 500;
transition: color 0.1s ease;
cursor: pointer;
}
.common-Link:hover {
color: #32325d;
}
.common-Link:active {
color: #000;
}
.common-Link--arrow:after {
font: normal 16px StripeIcons;
content: "\2192";
padding-left: 5px;
}
.common-Button {
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
background: #fff;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
color: #6772e5;
text-decoration: none;
transition: all 0.15s ease;
}
.common-Button:hover {
color: #7795f8;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.common-Button:active {
color: #555abf;
background-color: #f6f9fc;
transform: translateY(1px);
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.common-Button--default {
color: #fff;
background: #6772e5;
}
.common-Button--default:hover {
color: #fff;
background-color: #7795f8;
}
.common-Button--default:active {
color: #e6ebf1;
background-color: #555abf;
}
.common-Button--dark {
color: #fff;
background: #32325d;
}
.common-Button--dark:hover {
color: #fff;
background-color: #43458b;
}
.common-Button--dark:active {
color: #e6ebf1;
background-color: #32325d;
}
.common-Button--disabled {
color: #fff;
background: #aab7c4;
pointer-events: none;
}
.common-ButtonIcon {
display: inline;
margin: 0 5px 0 0;
position: relative;
}
.common-ButtonGroup {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -10px;
}
.common-ButtonGroup .common-Button {
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 10px;
}
/** Page-specific styles */
@keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
@keyframes void-animation-out {
0%,
to {
opacity: 1;
}
}
body {
overflow-x: hidden;
background-color: #f6f9fc;
}
main {
position: relative;
display: block;
z-index: 1;
}
.stripes {
position: absolute;
width: 100%;
transform: skewY(-12deg);
height: 950px;
top: -350px;
background: linear-gradient(180deg, #e6ebf1 350px, rgba(230, 235, 241, 0));
}
.stripes .stripe {
position: absolute;
height: 190px;
}
.stripes .s1 {
height: 380px;
top: 0;
left: 0;
width: 24%;
background: linear-gradient(90deg, #e6ebf1, rgba(230, 235, 241, 0));
}
.stripes .s2 {
top: 380px;
left: 4%;
width: 35%;
background: linear-gradient(
90deg,
hsla(0, 0%, 100%, 0.65),
hsla(0, 0%, 100%, 0)
);
}
.stripes .s3 {
top: 380px;
right: 0;
width: 38%;
background: linear-gradient(90deg, #e4e9f0, rgba(228, 233, 240, 0));
}
main > .container-lg {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
max-width: 750px;
padding: 110px 20px 110px;
}
main > .container-lg .cell {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-ms-flex: auto;
flex: auto;
min-width: 100%;
min-height: 500px;
padding: 0 40px;
}
main > .container-lg .cell + .cell {
margin-top: 70px;
}
main > .container-lg .cell.intro {
padding: 0;
}
@media (min-width: 670px) {
main > .container-lg .cell.intro {
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.optionList {
margin-left: 13px;
}
}
main > .container-lg .cell.intro > * {
width: 100%;
max-width: 700px;
}
main > .container-lg .cell.intro .common-IntroText {
margin-top: 10px;
}
main > .container-lg .cell.intro .common-BodyText {
margin-top: 15px;
}
main > .container-lg .cell.intro .common-ButtonGroup {
width: auto;
margin-top: 20px;
}
main > .container-lg .example {
-ms-flex-align: center;
align-items: center;
border-radius: 4px;
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
padding: 80px 0px;
margin-left: -20px;
margin-right: -20px;
}
@media (min-width: 670px) {
main > .container-lg .example {
padding: 40px;
}
}
main > .container-lg .example.submitted form,
main > .container-lg .example.submitting form {
opacity: 0;
transform: scale(0.9);
pointer-events: none;
}
main > .container-lg .example.submitted .success,
main > .container-lg .example.submitting .success {
pointer-events: all;
}
main > .container-lg .example.submitting .success .icon {
opacity: 1;
}
main > .container-lg .example.submitted .success > * {
opacity: 1;
transform: none !important;
}
main > .container-lg .example.submitted .success > :nth-child(2) {
transition-delay: 0.1s;
}
main > .container-lg .example.submitted .success > :nth-child(3) {
transition-delay: 0.2s;
}
main > .container-lg .example.submitted .success > :nth-child(4) {
transition-delay: 0.3s;
}
main > .container-lg .example.submitted .success .icon .border,
main > .container-lg .example.submitted .success .icon .checkmark {
opacity: 1;
stroke-dashoffset: 0 !important;
}
main > .container-lg .example * {
margin: 0;
padding: 0;
}
main > .container-lg .example .caption {
display: flex;
justify-content: space-between;
position: absolute;
width: 100%;
top: 100%;
left: 0;
padding: 15px 10px 0;
color: #aab7c4;
font-family: Poppins, "Open Sans", "Segoe UI", sans-serif;
font-size: 15px;
font-weight: 500;
}
main > .container-lg .example .caption * {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
main > .container-lg .example .caption .no-charge {
color: #cfd7df;
margin-right: 10px;
}
main > .container-lg .example .caption a.source {
text-align: right;
color: inherit;
transition: color 0.1s ease-in-out;
margin-left: 10px;
}
main > .container-lg .example .caption a.source:hover {
color: #6772e5;
}
main > .container-lg .example .caption a.source:active {
color: #43458b;
}
main > .container-lg .example .caption a.source svg {
margin-right: 10px;
}
main > .container-lg .example .caption a.source svg path {
fill: currentColor;
}
main > .container-lg .example form {
position: relative;
width: 100%;
max-width: 500px;
transition-property: opacity, transform;
transition-duration: 0.35s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
main > .container-lg .example form input::-webkit-input-placeholder {
opacity: 1;
}
main > .container-lg .example form input::-moz-placeholder {
opacity: 1;
}
main > .container-lg .example form input:-ms-input-placeholder {
opacity: 1;
}
main > .container-lg .example .error {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
width: 100%;
top: 100%;
margin-top: 20px;
left: 0;
padding: 0 15px;
font-size: 13px !important;
opacity: 0;
transform: translateY(10px);
transition-property: opacity, transform;
transition-duration: 0.35s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
main > .container-lg .example .error.visible {
opacity: 1;
transform: none;
}
main > .container-lg .example .error .message {
font-size: inherit;
}
main > .container-lg .example .error svg {
-ms-flex-negative: 0;
flex-shrink: 0;
margin-top: -1px;
margin-right: 10px;
}
main > .container-lg .example .success {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
text-align: center;
pointer-events: none;
overflow: hidden;
}
@media (min-width: 670px) {
main > .container-lg .example .success {
padding: 40px;
}
}
main > .container-lg .example .success > * {
transition-property: opacity, transform;
transition-duration: 0.35s;
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
opacity: 0;
transform: translateY(50px);
}
main > .container-lg .example .success .icon {
margin: 15px 0 30px;
transform: translateY(70px) scale(0.75);
}
main > .container-lg .example .success .icon svg {
will-change: transform;
}
main > .container-lg .example .success .icon .border {
stroke-dasharray: 251;
stroke-dashoffset: 62.75;
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
animation: spin 1s linear infinite;
}
main > .container-lg .example .success .icon .checkmark {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
}
main > .container-lg .example .success .title {
font-size: 17px;
font-weight: 500;
margin-bottom: 8px;
}
main > .container-lg .example .success .message {
font-size: 14px;
font-weight: 400;
margin-bottom: 25px;
line-height: 1.6em;
}
main > .container-lg .example .success .message span {
font-size: inherit;
}
main > .container-lg .example .success .reset:active {
transition-duration: 0.15s;
transition-delay: 0s;
opacity: 0.65;
}
main > .container-lg .example .success .reset svg {
will-change: transform;
}
footer {
position: relative;
max-width: 750px;
padding: 50px 20px;
margin: 0 auto;
}
.optionList {
margin: 6px 0;
}
.optionList li {
display: inline-block;
margin-right: 13px;
}
.optionList a {
color: #aab7c4;
transition: color 0.1s ease-in-out;
cursor: pointer;
font-size: 15px;
line-height: 26px;
}
.optionList a.selected {
color: #6772e5;
font-weight: 600;
}
.optionList a:hover {
color: #32325d;
}
.optionList a.selected:hover {
cursor: default;
color: #6772e5;
}
.example.example1 {
background-color: #6772e5;
}
.example.example1 * {
font-family: Poppins, Open Sans, Segoe UI, sans-serif;
font-size: 16px;
font-weight: 500;
}
.example.example1 fieldset {
margin: 0 15px 20px;
padding: 0;
border-style: none;
background-color: #7795f8;
box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08),
inset 0 1px 0 #829fff;
border-radius: 4px;
}
.example.example1 .row {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
margin-left: 15px;
}
.example.example1 .row + .row {
border-top: 1px solid #819efc;
}
.example.example1 label {
width: 15%;
min-width: 70px;
padding: 11px 0;
color: #c4f0ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.example.example1 input, .example.example1 button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border-style: none;
}
.example.example1 input:-webkit-autofill {
-webkit-text-fill-color: #fce883;
transition: background-color 100000000s;
-webkit-animation: 1ms void-animation-out;
}
.example.example1 .StripeElement--webkit-autofill {
background: transparent !important;
}
.example.example1 .StripeElement {
width: 100%;
padding: 11px 15px 11px 0;
}
.example.example1 input {
width: 100%;
padding: 11px 15px 11px 0;
color: #fff;
background-color: transparent;
-webkit-animation: 1ms void-animation-out;
}
.example.example1 input::-webkit-input-placeholder {
color: #87bbfd;
}
.example.example1 input::-moz-placeholder {
color: #87bbfd;
}
.example.example1 input:-ms-input-placeholder {
color: #87bbfd;
}
.example.example1 button {
display: block;
width: calc(100% - 30px);
height: 40px;
margin: 40px 15px 0;
background-color: #3e2569;
box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
border-radius: 4px;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.example.example1 button:active {
background-color: #3e2569;
box-shadow: 0 6px 9px rgba(50, 50, 93, 0.06), 0 2px 5px rgba(0, 0, 0, 0.08);
}
.example.example1 .error svg .base {
fill: #fff;
}
.example.example1 .error svg .glyph {
fill: #6772e5;
}
.example.example1 .error .message {
color: #fff;
}
.example.example1 .success .icon .border {
stroke: #87bbfd;
}
.example.example1 .success .icon .checkmark {
stroke: #fff;
}
.example.example1 .success .title {
color: #fff;
}
.example.example1 .success .message {
color: #9cdbff;
}
.example.example1 .success .reset path {
fill: #fff;
}
</style>
</head>
<body>
<div class="globalContent">
<main>
<section class="container-lg">
<div class="cell example example1" id="example-1">
<form>
<fieldset>
<div class="row">
<label for="example1-name" data-tid="elements_examples.form.name_label">Name</label>
<input id="example1-name" data-tid="elements_examples.form.name_placeholder" type="text" placeholder="Jane Doe" required="" autocomplete="name">
</div>
<div class="row">
<label for="example1-email" data-tid="elements_examples.form.email_label">Email</label>
<input id="example1-email" data-tid="elements_examples.form.email_placeholder" type="email" placeholder="janedoe@gmail.com" required="" autocomplete="email">
</div>
<div class="row">
<label for="example1-phone" data-tid="elements_examples.form.phone_label">Phone</label>
<input id="example1-phone" data-tid="elements_examples.form.phone_placeholder" type="tel" placeholder="(941) 555-0123" required="" autocomplete="tel">
</div>
</fieldset>
<fieldset>
<div class="row">
<div id="example1-card"></div>
</div>
</fieldset>
<button type="submit" data-tid="elements_examples.form.pay_button">Pay {!! getPrice($booking->getTotal()) !!} </button>
<div class="error" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
<path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
<path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
</svg>
<span class="message"></span></div>
</form>
<div class="success">
<div class="icon">
<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="border" cx="42" cy="42" r="40" stroke-linecap="round" stroke-width="4" stroke="#000" fill="none"></circle>
<path class="checkmark" stroke-linecap="round" stroke-linejoin="round" d="M23.375 42.5488281 36.8840688 56.0578969 64.891932 28.0500338" stroke-width="4" stroke="#000" fill="none"></path>
</svg>
</div>
<h3 class="title" data-tid="elements_examples.success.title">Payment successful</h3>
<a class="reset" href="#">
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M15,7.05492878 C10.5000495,7.55237307 7,11.3674463 7,16 C7,20.9705627 11.0294373,25 16,25 C20.9705627,25 25,20.9705627 25,16 C25,15.3627484 24.4834055,14.8461538 23.8461538,14.8461538 C23.2089022,14.8461538 22.6923077,15.3627484 22.6923077,16 C22.6923077,19.6960595 19.6960595,22.6923077 16,22.6923077 C12.3039405,22.6923077 9.30769231,19.6960595 9.30769231,16 C9.30769231,12.3039405 12.3039405,9.30769231 16,9.30769231 L16,12.0841673 C16,12.1800431 16.0275652,12.2738974 16.0794108,12.354546 C16.2287368,12.5868311 16.5380938,12.6540826 16.7703788,12.5047565 L22.3457501,8.92058924 L22.3457501,8.92058924 C22.4060014,8.88185624 22.4572275,8.83063012 22.4959605,8.7703788 C22.6452866,8.53809377 22.5780351,8.22873685 22.3457501,8.07941076 L22.3457501,8.07941076 L16.7703788,4.49524351 C16.6897301,4.44339794 16.5958758,4.41583275 16.5,4.41583275 C16.2238576,4.41583275 16,4.63969037 16,4.91583275 L16,7 L15,7 L15,7.05492878 Z M16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 Z"></path>
</svg>
</a>
</div>
</div>
</section>
</main>
</div>
<!-- jQuery -->
<script src="{{asset('vendor/jquery/jquery.min.js')}}"></script>
<script type="application/javascript">
var stripe = Stripe(' {{setting('stripe_key')}} ');
function registerElements(elements, exampleName) {
var formClass = '.' + exampleName;
var example = document.querySelector(formClass);
var form = example.querySelector('form');
var resetButton = example.querySelector('a.reset');
var error = form.querySelector('.error');
var errorMessage = error.querySelector('.message');
function enableInputs() {
Array.prototype.forEach.call(
form.querySelectorAll(
"input[type='text'], input[type='email'], input[type='tel']"
),
function (input) {
input.removeAttribute('disabled');
}
);
}
function disableInputs() {
Array.prototype.forEach.call(
form.querySelectorAll(
"input[type='text'], input[type='email'], input[type='tel']"
),
function (input) {
input.setAttribute('disabled', 'true');
}
);
}
// Listen for errors from each Element, and show error messages in the UI.
elements.forEach(function (element) {
element.on('change', function (event) {
if (event.error) {
error.classList.add('visible');
errorMessage.innerText = event.error.message;
} else {
error.classList.remove('visible');
}
});
});
// Listen on the form's 'submit' handler...
form.addEventListener('submit', function (e) {
e.preventDefault();
// Show a loading screen...
example.classList.add('submitting');
// Disable all inputs.
disableInputs();
// Gather additional customer data we may have collected in our form.
var name = form.querySelector('#' + exampleName + '-name');
var address1 = form.querySelector('#' + exampleName + '-address');
var city = form.querySelector('#' + exampleName + '-city');
var state = form.querySelector('#' + exampleName + '-state');
var zip = form.querySelector('#' + exampleName + '-zip');
var additionalData = {
name: name ? name.value : undefined,
address_line1: address1 ? address1.value : undefined,
address_city: city ? city.value : undefined,
address_state: state ? state.value : undefined,
address_zip: zip ? zip.value : undefined,
};
// Use Stripe.js to create a token. We only need to pass in one Element
// from the Element group in order to create a token. We can also pass
// in the additional customer data we collected in our form.
stripe.createPaymentMethod({type: 'card', card: elements[0], 'billing_details': additionalData}).then(function (result) {
// Stop loading!
console.log(result);
if (result.paymentMethod) {
$.ajax({
type: 'GET',
url: "{!! url('payments/stripe/pay-success',['booking_id' => $booking->id]) !!}/" + result.paymentMethod.id,
success: function (result) {
console.log(result);
window.location.href = "{!! url('payments/stripe') !!}";
example.classList.remove('submitting');
example.classList.add('submitted');
},
error: function (err) {
enableInputs();
}
});
} else {
// Otherwise, un-disable inputs.
enableInputs();
}
});
});
resetButton.addEventListener('click', function (e) {
e.preventDefault();
// Resetting the form (instead of setting the value to `''` for each input)
// helps us clear webkit autofill styles.
form.reset();
// Clear each Element.
elements.forEach(function (element) {
element.clear();
});
// Reset error state as well.
error.classList.remove('visible');
// Resetting the form does not un-disable inputs, so we need to do it separately:
enableInputs();
example.classList.remove('submitted');
});
}
(function () {
'use strict';
var elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Poppins',
},
],
// Stripe's examples are localized to specific languages, but if
// you wish to have Elements automatically detect your user's locale,
// use `locale: 'auto'` instead.
locale: 'auto'
});
var card = elements.create('card', {
iconStyle: 'solid',
style: {
base: {
iconColor: '#c4f0ff',
color: '#fff',
fontWeight: 500,
fontFamily: 'Poppins, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
':-webkit-autofill': {
color: '#fce883',
},
'::placeholder': {
color: '#87BBFD',
},
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
},
});
card.mount('#example1-card');
registerElements([card], 'example1');
})();
</script>
</body>
</html>