<!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&amp;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>