Файл: payment/form/index.php
Строк: 186
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Платежная форма :: wordpay.ru — cервис для приема платежей на сайте с низкой комиссией.</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=cyrillic,cyrillic-ext" rel="stylesheet">
<style>
* {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
color: #68727e;
}
::-webkit-input-placeholder { /* Chrome */
color: #333;
opacity: .2;
font-family: 'Open Sans', sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
color: #333;
opacity: .2;
font-family: 'Open Sans', sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
color: #333;
opacity: .2;
font-family: 'Open Sans', sans-serif;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: #333;
opacity: .2;
font-family: 'Open Sans', sans-serif;
}
body {
padding: 20px;
}
.currency-label {
background: #e1e8f1;
position: absolute;
bottom: 1px;
right: 1px;
height: 32px;
padding: 0 12px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
}
.widget {
width: 510px;
padding: 15px;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
position: relative;
}
label {
display: block;
text-transform: uppercase;
font-size: 11px;
font-weight: 600;
color: #1b1b1b;
margin-bottom: 3px;
}
.widget-body__row {
margin-bottom: 9px;
position: relative;
}
input, textarea {
width: 100%;
border: 1px solid #d9e1eb;
padding: 7px 10px;
border-radius: 2px;
background: #dfe8f5;
max-width: 100%;
font-weight: 500;
}
input[data-value="cost"] {
padding-right: 58px;
}
textarea {
height: 56px;
}
button {
background-image: radial-gradient(circle farthest-side at center bottom,#7867a7,#553e94 125%);
color: #ffffff;
border: none;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
.widget-body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.widget-info, .widget-payment {
width: 98%;
}
.widget-payments {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.widget-payments__pay {
background: rgba(225, 232, 241, .7);
border: 1px solid rgba(211, 220, 231, .6);
width: calc(100% / 4 - 4px);
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 2px;
margin-bottom: 4px;
cursor: pointer;
position: relative;
}
.widget-payments__pay.active {
border-color: #58b737;
background: rgba(88, 183, 55, .2);
}
.widget-payments__pay img {
max-width: 100%;
max-height: 100%;
}
.more-currencies-wrapper {
width: 250px;
position: absolute;
top: -2px;
left: -255px;
opacity: 0;
visibility: hidden;
transition: all .3s ease-in-out;
box-sizing: content-box;
}
.more-currencies {
width: 100%;
background: #F7F7F7;
padding: 15px;
border-radius: 5px;
border: 2px solid #e1e8f1;
}
.widget-payments__pay-more {
position: relative;
}
.widget-payments__pay-more:hover .more-currencies-wrapper {
opacity: 1;
visibility: visible;
}
.descr {
font-size: 9px;
position: absolute;
bottom: -10px;
left: 0;
color: rgba(0,0,0,.5);
}
.descr a {
color: #cf0047;
}
.tooltip, .tooltip--more {
position: absolute;
background: rgba(0,0,0,.85);
color: #ffffff;
text-transform: uppercase;
font-size: 11px;
text-align: center;
padding: 8px 12px;
top: -35px;
left: -40px;
font-weight: 700;
min-width: 110px;
box-sizing: content-box;
visibility: hidden;
opacity: 0;
transition: all .3s ease-in-out 0s;
}
.widget-payments__pay:hover .tooltip,
.widget-payments__pay--more:hover .tooltip--more {
opacity: 1;
visibility: visible;
}
.tooltip:hover,
.tooltip--more:hover {
visibility: hidden !important;
opacity: 0 !important;
}
</style>
</head>
<body>
<div class="f-w-v3 widget">
<form class="widget-body" method="post" target="_parent" action="http://wordpay.ru/api/payment?comm=on">
<div style="background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 3px 4px -3px rgba(0,0,0,.3);
position: relative;
box-shadow: none;
border: none;font-size: .8125rem;">Назначение перевода</div>
<input value="<?=trim(htmlspecialchars($_GET['MNM_COM'], ENT_QUOTES, 'UTF-8'));?>" type="text" disabled>
<div class="widget-info">
<div class="widget-body__row">
<div style="background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 3px 4px -3px rgba(0,0,0,.3);
position: relative;
box-shadow: none;
border: none;font-size: .8125rem;">Сумма платежа</div>
<input value="10" name="WP_PAYMENT_AMOUNT" data-value="cost" type="text" id="payment-cost" name="oa">
<span class="currency-label">RUB</span>
</div>
<div class="widget-body__row">
<textarea name="MNM_COM" placeholder="Комментарий к оплате"></textarea>
<span class="descr">Платежи проходят через <a href="https://wordpay.ru" target="_parent">WordPay.Ru</a></span>
</div>
</div>
<input type="hidden" name="WP_PAYMENT_COMM" value="<?=trim(htmlspecialchars($_GET['MNM_COM'], ENT_QUOTES, 'UTF-8'));?>">
<input type="hidden" name="WP_PAYMENT_SITE" value="<?=intval($_GET['MNM_PLATFORM'])?>">
<button class="pbtn" type="submit">
Оплатить </button>
</form>
</div>
</body>
</html>