Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Fondy Checkout Example #1
.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');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment