binking

https://binking.io

by Sergey Dmitriev

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BinKing JS Plugin Demo</title>
  </head>
  <body>
    <div class="hint">
      <p>This is an example of a form that can be created with BinKing. The form works in test mode. You will not be charged.</p>
      <p>Enter your card number or choose one from of the examples: 4002750000000000, 4257100000000000 or 4045470000000004.
      </p>
      <p>To simulate a successful payment, enter 777. Enter any other number to see an error.
      </p>
      <p>Cards at top of the form imitates users saved cards.</p>
    </div>

    <div class="binking">
      <form class="binking__form">
        <div class="binking__saved-cards">
          <div class="binking__cards">
            <div class="binking__card binking__card_new binking__selected">
              <div class="binking__card-label">
                <span class="binking__card-label-plus">+</span>
                <span class="binking__card-label-text">New card</span>
              </div>
            </div>
          </div>
        </div>
        <div class="binking__new-card-form">
          <div class="binking__panels">
            <div class="binking__panel binking__front-panel">
              <img class="binking__form-bank-logo binking__hide">
              <img class="binking__form-brand-logo binking__hide">
              <div class="binking__front-fields">
                <input name="cardnumber" autocomplete="cc-number" inputmode="numeric" pattern="[0-9 ]*" class="binking__field binking__number-field" type="text" placeholder="0000 0000 0000 0000">
                <label class="binking__label binking__date-label">Valid through</label>
                <input name="ccmonth" autocomplete="cc-exp-month" inputmode="numeric" pattern="[0-9]*" class="binking__field binking__month-field binking__date-field" type="text" placeholder="MM">
                <input name="ccyear" autocomplete="cc-exp-year" inputmode="numeric" pattern="[0-9]*"...

CSS

body {
  margin: 10px;
  padding: 0;
  font-size: 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  outline: none;
}

.binking {
  font-size: 16px;
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 30px 0;
}


.binking__form {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.binking__form.binking__hide {
  display: none;
}

.binking__success {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.binking__success.binking__hide {
  display: none;
}

.binking__new-card-form {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.binking__new-card-form.binking__hide {
  display: none;
}

.binking__panels {
  width: 500px;
  height: 260px;
  position: relative;
}

.binking__panel {
  position: absolute;
  width: 370px;
  height: 230px;
  border-radius: 15px;
}

.binking__front-panel {
  background: #eeeeee;
  color: #000;
  top: 0;
  left: 0;
  z-index: 100;
  transition: background-color 150ms ease;
}

.binking__form-bank-logo {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 27px 0;
  width: 100%;
  height: 68px;
  object-fit: contain;
  object-position: 0 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.binking__form-bank-logo.binking__hide {
  opacity: 0;
  transform: scale(0.8);
}

.binking__form-brand-logo {
  position: absolute;
  bottom: 26px;
  right: 27px;
  text-align: right;
  height: 36px;
  transition: opacity 150ms ease, transform 150ms ease;
}

.binking__form-brand-logo.binking__hide {
  opacity: 0;
  transform: scale(0.8)
}

.binking__front-fields {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 26px;
}

.binking__number-field {
  width: 100%;
  margin-bottom: 15px;
}

.binking__date-label {
  margin-bottom: 6px;
  transition: color 150ms ease;
}

.binking__date-field {
  display: inline-block;
  width: 51px;
}

.binking__month-field {
  margin-right: 10px;
}

.binking__back-panel {
 ...

JavaScript

;
(function() {
  function initBinking() {
    // Choose strategy:

    // Api strategy examaple settings:
    binking.setDefaultOptions({
      strategy: 'api',
      apiKey: 'cbc67c2bdcead308498918a694bb8d77' // Replace it with your API key
      // sandbox: true
    })

    // Archive strategy example settings:
    // binking.setDefaultOptions({
    //   strategy: "archive",
    //   banksLogosPath: 'banks-logos/',
    //   brandsLogosPath: 'brands-logos/',
    // });
    // binking.addBanks({
    //   "ru-sberbank": {
    //     bankAlias: "ru-sberbank",
    //     bankName: "Sberbank",
    //     bankLocalName: "Сбербанк",
    //     bankColor: "#1a9f29",
    //     bankColors: ["#1a9f29"],
    //     bankCountry: "ru",
    //     bankSite: "https://www.sberbank.ru",
    //     bankPhone: "8 800 555-55-50",
    //     formBackgroundColor: "#1a9f29",
    //     formBackgroundColors: ["#1a9f29", "#0d7518"],
    //     formBackgroundLightness: "dark",
    //     formTextColor: "#ffffff",
    //     formLogoScheme: "inverted",
    //     formBorderColor: "#ffffff"
    //   },
    //   "ru-rosbank": {
    //     bankAlias: "ru-rosbank",
    //     bankName: "Rosbank",
    //     bankLocalName: "Росбанк",
    //     bankColor: "#ff0016",
    //     bankColors: ["#ff0016", "#000000"],
    //     bankCountry: "ru",
    //     bankSite: "https://www.rosbank.ru",
    //     bankPhone: "8 800 200-54-34",
    //     formBackgroundColor: "#f0f0f0",
    //     formBackgroundColors: ["#f0f0f0", "#d6d0d0"],
    //     formBackgroundLightness: "light",
    //     formTextColor: "#000000",
    //     formLogoScheme: "original",
    //     formBorderColor: "#d6d0d0"
    //   }
    // });
    // binking.addBins({
    //   "402333": "ru-sberbank",
    //   "546918": "ru-sberbank",
    //   "400812": "ru-rosbank",
    //   "677721": "ru-rosbank"
    // });
  }

  function initValidationTips() {
    tippy.setDefaultProps({
      trigger: 'manual',
      hideOnClick: false,
     ...