-
-
Save ianhalpern/5093a9d4398206157c7b3ee06572263d to your computer and use it in GitHub Desktop.
Payload Simple Checkout Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> | |
<style> | |
.form-control.pl-input.pl-focus { | |
color: #495057; | |
background-color: #fff; | |
border-color: #80bdff; | |
outline: 0; | |
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); | |
outline:none; | |
} | |
.form-control.pl-input.pl-focus.is-invalid { | |
border-color: #dc3545; | |
box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25); | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<main role="main" class="mt-4"> | |
<div class="jumbotron"> | |
<div class="col-sm-8 mx-auto"> | |
<h1 class="text-center">Simple Checkout</h1> | |
</div> | |
</div> | |
<div class="alert alert-danger" role="alert"> | |
Set the client key in the code to get started | |
</div> | |
<form id="checkout-form" class="my-2 container w-50 px-5" pl-form="payment"> | |
<!-- Uncomment below lines and update value= with id if desired --> | |
<!-- | |
<input type="hidden" pl-input="processing_id" value="<UPDATE ME>"> | |
<input type="hidden" pl-input="customer_id" value="<UPDATE ME>"> | |
--> | |
<div class="row"> | |
<div class="form-group col-4 px-1"> | |
<label>Amount</label> | |
<div class="input-group"> | |
<div class="input-group-prepend"> | |
<span class="input-group-text" id="basic-addon1">$</span> | |
</div> | |
<input class="form-control" pl-input="amount" type="text" name="amount" placeholder="Amount"/> | |
</div> | |
</div> | |
<div class="form-group col-8 px-1"> | |
<label>Cardholder Name</label> | |
<input class="form-control w-100" pl-input="account_holder" type="text" placeholder="First Last" /> | |
</div> | |
</div> | |
<div class="row pt-2"> | |
<div class="form-group col-7 px-1"> | |
<label>Card Number</label> | |
<div class="form-control" pl-input="card_number"></div> | |
</div> | |
<div class="form-group col-3 px-1"> | |
<label>Expiration</label> | |
<div class="form-control" pl-input="expiry"></div> | |
</div> | |
<div class="form-group col-2 px-1"> | |
<label>CVC</label> | |
<div class="form-control" pl-input="cvc"></div> | |
</div> | |
</div> | |
<div class="row pt-2"> | |
<button class="btn btn-primary" type="submit">Pay Now</button> | |
</div> | |
</form> | |
</main> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | |
<script src="https://payload.co/Payload.js"></script> | |
<script> | |
var pl = Payload('UPDATE WITH YOUR test_client_key_....') | |
var checkout_form = new pl.Form({ | |
form:$('#checkout-form').get(0), | |
styles:{invalid:'is-invalid'} | |
}) | |
checkout_form.on('error', function(error) { | |
console.log(error) | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment