<a href='https://api.paystand.co/v3/plugins/paystand/checkout?data={"publishableKey":"eml9jvz7dsbglwtx53xtu9tl","amount":5.55,"currency":"usd"}'>
  This is an email link to pay your bill
</a>

<a href='https://api.paystand.co/v3/plugins/paystand/checkout?data={"publishableKey":"eml9jvz7dsbglwtx53xtu9tl","amount":12.12,"currency":"usd"}'>
	<div style="background-image: url(https://dashboard.paystand.co/v2/images/integrations/ps-paynow.png); height: 100px; width: 200px; background-position:center;);"></div>
</a>

<style>
.btn {
  background: #6fc3fc;
  background-image: -webkit-linear-gradient(top, #6fc3fc, #1b79b3);
  background-image: -moz-linear-gradient(top, #6fc3fc, #1b79b3);
  background-image: -ms-linear-gradient(top, #6fc3fc, #1b79b3);
  background-image: -o-linear-gradient(top, #6fc3fc, #1b79b3);
  background-image: linear-gradient(to bottom, #6fc3fc, #1b79b3);
  -webkit-border-radius: 16;
  -moz-border-radius: 16;
  border-radius: 16px;
  text-shadow: 1px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 35px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #2a76a6;
  background-image: -webkit-linear-gradient(top, #2a76a6, #3498db);
  background-image: -moz-linear-gradient(top, #2a76a6, #3498db);
  background-image: -ms-linear-gradient(top, #2a76a6, #3498db);
  background-image: -o-linear-gradient(top, #2a76a6, #3498db);
  background-image: linear-gradient(to bottom, #2a76a6, #3498db);
  text-decoration: none;
}
</style>
<a class="btn" href='https://api.paystand.co/v3/plugins/paystand/checkout?data={"publishableKey":"eml9jvz7dsbglwtx53xtu9tl","amount":23.23,"currency":"usd"}'>
  Pay $23.23
</a>