<div style="height: 303px; background: url('https://checkout.paystand.co/v2/demo/oneup-demo-hdr-bkg.jpg') center repeat-x;"></div>

<div style="text-align: center;">
  <div style="max-width: 800px; margin: 0 auto;">

    <div class="ps-chkout">
      <!-- Drop these script to add checkout widget -->
      <script type="text/javascript" id="paystand_checkout" src="https://checkout.paystand.co/v2/js/paystand.checkout.js"></script>
    </div>
    <img src="https://checkout.paystand.co/v2/demo/oneup_left-side.jpg" alt="left-img" class="img-responsive"></p>
</div>
</div>

<div>
  <p>&nbsp;</p>
  <hr>
  <p>&nbsp;</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12">

      <h2>Docs:</h2>
      <p><a target="_blank" href="http://developers.paystand.com/docs/checkout-object">http://developers.paystand.com/docs/checkout-object</a>
      </p>
    </div>
  </div>
</div>

body {
  background: #f2f2f2;
}

.ps-chkout #paystand_checkout_div,
.ps-chkout #paystand_checkout_div #paystand_checkout_iframe {
  height: 500px !important;
}

@media (max-width: 767px) {
  .ps-chkout #paystand_checkout_div,
  .ps-chkout #paystand_checkout_div #paystand_checkout_iframe {
    height: 950px !important;
  }
}

PayStandCheckout.checkoutComplete = function (data) {
  console.log("custom checkout complete:", data);
  alert("Thank you for payment");
};
PayStandCheckout.checkoutFailed = function (data) {
  console.log("custom checkout failed:", data);
  alert("We are sorry for the technical difficulties")
};
PayStandCheckout.init({
  "publishableKey": "eml9jvz7dsbglwtx53xtu9tl",
  "checkout_domain": "https://checkout.paystand.co/v2/",
  "domain": "https://api.paystand.co",
  "total": "10.00",
  "currency": "USD",
  "features": {
    "cards": true,
    "echeck": {
      "enabled": true
    }
  },
  "ui": {
    "billing": {
      "show": true,
      "autoFill": {
        "email": "[email protected]",
        "fullName": "Test User",
        "street1": "123 Test St",
        "street2": "Apt 3G",
        "city": "Test",
        "postalCode": "95060",
        "state": "CA",
        "country": "USA"
      }
    }
  },
  "meta": {
    "invoice" : {
      "number": "#CIN-001",
      "amount" : 10.00,
      "date" : "2015-09-10T04:00:00+00:00",
      "customer": "Matt Ouellette"
    },
    "demo": "https://codepen.io/paystand/pen/BKoxWK"
  }
});
hljs.initHighlightingOnLoad();