:arrow_left: [На Головну](/Mj2ZqCVpSq6A6Jzm6ladlw)

# Кастомізація SDK через CSS-файл

Налаштуйте платіжну форму SDK, щоб ідеально відповідати бренду вашої компанії. Платіжна форма SDK має встановлену тему за замовчуванням, яку можна налаштувати, виконавши наступні зміни у CSS-файлі.

**Видалити хедер сторінки:**

/* REMOVE PAGE HEADER */
div#hdr {
    display: none;
}


</br>

**Стилізувати хедер віджета:**

/* STYLE WIDGET HEADER */
div#bdy div.hdr {
    padding-top: 20px;
    color: #585F6D;
    font-size: 15px;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    border-bottom: none;
    background-color: #fff;
}


</br>

**Видалити кнопку хедера "Закрити":**

/* REMOVE CLOSE HEADER BUTTON */
div#bdy div.hdr div.cls a{
    display: none;
}


</br>

**Налаштувати фон віджета:**

body#widget {
    font-family: Montserrat,Helvetica,sans-serif;
    letter-spacing: normal;
    background: #000 !important;
}

</br>

**Налаштувати колір тексту при наведенні на посилання за замовчуванням:**

/* DEFAULT HOVER COLOR FOR LINK */
a:hover {
    color: #1cb2b2;
}

</br>

**Налаштувати відступи футера:**

/* FOOTER OFFSETS */
div#bdy div.ftr {
    margin-top: 100px;
    margin-bottom: 40px;
}

</br>

**Налаштувати колір тексту блоку суми оплати:**

/* FORCE CUSTOMIZE FIXED SUM BLOCK TEXT COLOR */
div#pmntInf div.pmntSum div.fixSum > div {
    color: #970099 !important;
}

</br>

**Налаштувати колір чекбоксів:**

/* START CUSTOMIZE AGREEMENT CHECKBOX */
.checkbox input[type="checkbox"] ~ label::before {
    background-color: red; 
}
.checkbox input[type="checkbox"]:checked ~ label::before {
    background-color: green;
}
input[type="checkbox"] {
    accent-color: greenyellow;
}


</br>

**Налаштувати розміри, колір текстку та відступи полів кредитної картки:**

/* START CUSTOMIZE FROM INPUTS STYLES*/
div.frmGrp input {
    width: 100%;
    padding: 12px 4px !important;
    font-size: 120%;
    letter-spacing: 1px;
    border: solid 1px transparent !important;
    border-bottom: solid 1px var(--c-brdr) !important;
    color: blue;
}
div.frmGrp input::placeholder {
    font-weight: bold;
    font-size: 80%;
    color: red;
}

</br>

**Розширені налаштування форми кредитної картки:**

/* CREDIT CARD FORM BLOCK CUSTOMIZING */
#pmnt-cc {
    border: solid 1px red !important;
    border-radius: 26px;
    width: 100%;
    padding: 18px 36px 38px 36px !important;
    margin: 10px 0 20px;
}

/* CUSTOMIZE CREDIT CARD INPUTS */
#pmnt-cc input {
    font-size:110% !important;
}

#pmnt-cc div.pmntCC {
    border-bottom: solid 1px red !important;
}

#pmnt-cc div.frmGrp input {
    border: none !important;
    border-radius: unset;
    padding: 12px 3px !important;
}

#pmnt-cc div.frmGrp label {
    font-size: 6px !important;
    color:rgba(255,255,255,.01) !important;
    display: inline-block;
}

/*  START CUSTOMIZE CARD EXPIRE AT INPUT*/
div#pmntCC div.pmntExp {
    height: auto;
    margin: 0 0 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20%;
    align-items: start;
}

div#pmntCC div.pmntExp > div.frmGrp {
    margin: 0 0;
    color: #e8ade9;
    border-bottom: solid 1px red;
}

div#pmntCC div.pmntExp div.bdy {
    border-bottom:none !important;
}

div#ccAdd input.card-exp-month, div#ccAdd input.card-exp-year {
    width: 25px;
    text-align: center;
}
 
div#ccAdd input.card-exp-month::placeholder, div#ccAdd input.card-exp-year::placeholder {
    color:#fff;
}


</br>

**Налаштувати додаткову платіжну інформацію:**

/* START CUSTOMIZE ADDITIONAL PAYMENT INFO */
div#pmntInf div.pmntInf {
    background-color: #f5f5f5;
    margin: 10px -55px;
    padding: 10px 40px 10px 40px;
    border: none;
    text-align: right;
}

div#pmntInf div.pmntInf a{
    color:red !important;
}

div#pmntInf div.pmntInfBdy {
    margin-top:20px;
    grid-template-columns: 50% 50%;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

div#pmntInf div.pmntInfBdy div.lbl {
    color: magenta;
}
/* END CUSTOMIZE ADDITIONAL PAYMENT INFO */

</br>

**Налаштувати кнопку "Оплата":**

/* START CUSTOMIZE PAY BUTTOM STYLES */
div.btnGrp {
    text-align: center;
    display: block;
    padding: 10px 10px;
}

div.btnGrp > button{
    width: 50%;
    height: 48px;
    border-radius: 10px;
    background: lightgrey;
    box-shadow: none;
    color:#fff !important;
    font-weight: 600;
}

div.btnGrp > button:hover{
    background: yellowgreen;
    color:black !important;
    font-weight: 700;
}
/* END CUSTOMIZE PAY BUTTOM STYLES */


:arrow_left: [На Головну](/Mj2ZqCVpSq6A6Jzm6ladlw)

<details>
<summary>Служба підтримки XPAY</summary>
</br>

Телефон: [phone]
Email: [e-mail]
Telegram: @xpaysupportbot
</details>