Worldpay MCP Server
by simonwfarrow
- templates
- code
body {
font: 11px/22px sans-serif;
text-transform: uppercase;
background-color: #f7f7f7;
color: black;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
position: relative;
background: white;
padding: 40px 30px;
top: -30px;
width: 100%;
max-width: 300px;
border-radius: 12px;
box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.card .checkout .col-2 {
display: flex;
}
.card .checkout .col-2 .col:first-child {
margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
margin-left: 15px;
}
.card .checkout .label .type {
color: green;
}
.card .checkout.visa .label .type:before {
content: "(visa)";
}
.card .checkout.mastercard .label .type:before {
content: "(master card)";
}
.card .checkout.amex .label .type:before {
content: "(american express)";
}
.card .checkout .field {
height: 40px;
border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
margin-bottom: 30px;
}
.card .checkout .field.is-onfocus {
border-color: black;
}
.card .checkout .field.is-empty {
border-color: orange;
}
.card .checkout .field.is-invalid {
border-color: red;
}
.card .checkout .field.is-valid {
border-color: green;
}
.card .checkout .submit {
background: red;
position: absolute;
cursor: pointer;
left: 50%;
bottom: -60px;
width: 200px;
margin-left: -100px;
color: white;
outline: 0;
font-size: 14px;
border: 0;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 15px 0;
transition: background 0.3s ease;
}
.card .checkout.is-valid .submit {
background: green;
}
.clear {
background: grey;
position: absolute;
cursor: pointer;
left: 50%;
bottom: -120px;
width: 200px;
margin-left: -100px;
color: white;
outline: 0;
font-size: 14px;
border: 0;
border-radius: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 15px 0;
transition: background 0.3s ease;
}