kosatyi/checkout.css

## checkout.css
.checkout-form {
  max-width:325px;
  margin:0 auto;
}
.checkout-form-container{
  border:1px solid #ccc;
}
.checkout-form .error-wrapper{
  padding:.7em;
  color:#000000;
}
.checkout-form input.input,
.checkout-form button.button{
  font-weight:bold;
  padding:.7em;
  border:1px solid #ccc;
  display:block;
  width:100%;
  box-sizing:border-box;
  outline:none;
  text-align:center;
}
.checkout-form input.input:focus,
.checkout-form button.button:focus{
  box-shadow:0px 0px 1px 1px #333;
  border-color:#333;
  position:relative;
  z-index:2;
}
.checkout-form .input-wrapper.stack-3 input.input{
  width:33.33333333%;
  float:left;
}

## checkout.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fondy Checkout Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://unpkg.com/ipsp-js-sdk@latest/dist/checkout.min.js"></script>
<link rel="stylesheet" type="text/css" href="checkout.css" />
</head>
<body>
<form class="checkout-form">
    <input type="hidden" name="payment_system" value="card">
    <input type="hidden" name="merchant_id" value="1396424">
    <input type="hidden" name="amount" value="100">
    <input type="hidden" name="currency" value="USD">
    <input type="hidden" name="email" value="client@example.com" />
    <input type="hidden" name="response_url" value="https://example.com/" />
    <div class="error-wrapper"></div>
    <div class="checkout-form-container">
    <div class="input-wrapper">
        <input type="tel" name="card_number" class="input" class=""
        pattern="\d{16}|\d{19}" placeholder="Card Number"/>
    </div>
    <div class="input-wrapper stack-3">
        <input type="tel" name="expiry_month" class="input" maxlength="2"
        pattern="\d{2}" class="form-control" placeholder="Expiry Month"/>
        <input type="tel" name="expiry_year" class="input" maxlength="4"
        pattern="\d{2}|\d{4}" class="form-control" placeholder="Expiry Year"/>
        <input type="tel" name="cvv2" class="input" maxlength="3" class="form-control" placeholder="CVV"/>
    </div>
    <div class="input-wrapper">
      <button type="submit" class="button">Pay</button>
    </div>
    </div>
  </form>
  <script src="checkout.js"></script>
  </body>
</html>

## checkout.js
$checkout('FormWidget', {
	element: '.checkout-form'
}).on('success', function (model){
	console.log('success',model);
}).on('error', function(model){
	document.querySelector('.checkout-form .error-wrapper').innerHTML = model.attr('error.message');
});
	.checkout-form {
	max-width:325px;
	margin:0 auto;
	}
	.checkout-form-container{
	border:1px solid #ccc;
	}
	.checkout-form .error-wrapper{
	padding:.7em;
	color:#000000;
	}
	.checkout-form input.input,
	.checkout-form button.button{
	font-weight:bold;
	padding:.7em;
	border:1px solid #ccc;
	display:block;
	width:100%;
	box-sizing:border-box;
	outline:none;
	text-align:center;
	}
	.checkout-form input.input:focus,
	.checkout-form button.button:focus{
	box-shadow:0px 0px 1px 1px #333;
	border-color:#333;
	position:relative;
	z-index:2;
	}
	.checkout-form .input-wrapper.stack-3 input.input{
	width:33.33333333%;
	float:left;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Fondy Checkout Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<script src="https://unpkg.com/ipsp-js-sdk@latest/dist/checkout.min.js"></script>
	<link rel="stylesheet" type="text/css" href="checkout.css" />
	</head>
	<body>
	<form class="checkout-form">
	<input type="hidden" name="payment_system" value="card">
	<input type="hidden" name="merchant_id" value="1396424">
	<input type="hidden" name="amount" value="100">
	<input type="hidden" name="currency" value="USD">
	<input type="hidden" name="email" value="client@example.com" />
	<input type="hidden" name="response_url" value="https://example.com/" />
	<div class="error-wrapper"></div>
	<div class="checkout-form-container">
	<div class="input-wrapper">
	<input type="tel" name="card_number" class="input" class=""
	pattern="\d{16}\|\d{19}" placeholder="Card Number"/>
	</div>
	<div class="input-wrapper stack-3">
	<input type="tel" name="expiry_month" class="input" maxlength="2"
	pattern="\d{2}" class="form-control" placeholder="Expiry Month"/>
	<input type="tel" name="expiry_year" class="input" maxlength="4"
	pattern="\d{2}\|\d{4}" class="form-control" placeholder="Expiry Year"/>
	<input type="tel" name="cvv2" class="input" maxlength="3" class="form-control" placeholder="CVV"/>
	</div>
	<div class="input-wrapper">
	<button type="submit" class="button">Pay</button>
	</div>
	</div>
	</form>
	<script src="checkout.js"></script>
	</body>
	</html>
	$checkout('FormWidget', {
	element: '.checkout-form'
	}).on('success', function (model){
	console.log('success',model);
	}).on('error', function(model){
	document.querySelector('.checkout-form .error-wrapper').innerHTML = model.attr('error.message');
	});