<!-- (required) init script tag -->
<script
type="text/javscript"
id="ps_checkout"
src="https://checkout.paystand.co/v4/js/paystand.checkout.js"
ps-env="sandbox"
ps-publishableKey="{your_publishable_key}"
ps-containerId="{your_container_id}"
...
>
</script>
<!-- (optional) styled payment button -->
<button
class="ps-button ps-button-style"
ps-checkoutType="checkout_payment"
...
>
</button>
<!-- ADVANCED (optional) un-styled payment button -->
<!-- Use integration specific CSS to style the button -->
<button
class="ps-button"
ps-checkoutType="checkout_payment"
...
>
</button>
<!-- ADVANCED (optional) auto load payment checkout -->
<div
id="ps_checkout_load"
...
></div>
<!-- ADVANCED (optional) checkout container -->
<div id="{your_container_id}"></div>
Init script tag
The initialization script tag sets up the initial checkout environment. The tag must contain the id attribute (set to ps_checkout) and the src and ps-publishableKey attributes must be defined. It is recommended but optional to include the ps-env as well as the ps-containerId attributes.
Any other ps-* attributes that are added to the init script tag will be used as default values for the checkout experience. As such, when using multiple buttons on a page, it is also recommended to add all common attributes to the script tag so that they are defined only once.
Buttons
Buttons are the easiest way to add a checkout experience. When a website user clicks on a button, a checkout experience will appear with the settings determined from the button element that was clicked as well as any default settings that are found on the init script.
All buttons must contain the class "ps-button". We recommend the element be of type <button> but that is not strictly required. You could, for example use a standard <div> attribute if that fits your requirements better.
We recommend adding the class ps-button-style. This will add a default style to the button. Not adding this class will usually require the developer to add custom styling to the button.
Any other ps-* attributes that are added to the button will be used to configure the checkout that is rendered upon the button being clicked.
Auto loading (Embedded Experience)
The auto load tag is used to render a checkout experience immediately upon page load. The auto load tag must contain the id attribute set to ps_checkout_load.
The auto loading use-case is typically when the website or application design calls for a checkout experience embedded in the website or web application. Such as when checkout needs to be shown next to for instance the invoice that needs to be paid.
Any other ps-* attributes that are added to the auto load tag will be used to configure the checkout that is rendered upon page load.
Checkout container
The checkout container is an html element that a developer designates as a container for the checkout element. If a containerId is supplied, checkout will attempt to inject its markup inside of the element containing that id attribute.
This can be useful to tightly control how the checkout renders on the page.
ps-* attributes
Any checkout attribute (found in the Checkout Attributes reference section) can be added to the script/button elements by prefixing the attributes with ps-. Adding attributes to an element will configure the elements related checkout according to the attribute definition found in the reference section.
Checkout listener api
The checkout listener api allows your application's front-end JavaScript to listen to Checkout events, actions, updates, flows, and status changes. This can be useful for making changes on your page based upon things that are happening in the checkout environment. For example, you could set a button to disable the checkout receipt, listen for the checkout loaded status, and then use the checkout actions api to hide the checkout and to show your own receipt on the page.
Checkout listeners are no replacement for backend event listeners
Please note that checkout listeners are intended for streamlining the front-end user experience and are by no means a replacement for backend event listeners (i.e. webhooks). Backend events have a much more robust and reliable delivery mechanism as well as a means for 2-way authentication as they are intended to be used for business process integrations.
/**
* ADVANCED (optional) Checkout Listener API
*/
// consume raw events
psCheckout.checkoutEvent = function (data) {...};
psCheckout.checkoutAction = function (data) {...};
psCheckout.checkoutUpdated = function (data) {...};
psCheckout.checkoutFlow = function (data) {...};
// persistently react to specific checkout status events
psCheckout.onCssLoad(function(){...});
psCheckout.onLoaded(function(){...});
psCheckout.onLoading(function(){...});
psCheckout.onReady(function(){...});
psCheckout.onComplete(function(){...});
psCheckout.onError(function(){...});
// react to the next specific checkout status event
psCheckout.onceLoaded(function(){...});
psCheckout.onceLoading(function(){...});
psCheckout.onceComplete(function(){...});
Checkout actions api
The checkout actions api allows front-end JavaScript to modify the checkout experience in various ways. It can modify how a checkout is displayed such as whether it displays in a modal or an embed, set its width and height, and if its shown or hidden. It can also modify the content of a checkout itself by sending an update, reload, or reset command. The update, reload, and reset command accepts any checkout attribute, not prefixed with ps-.
/**
* ADVANCED (optional) Checkout Actions API
*/
// modify checkout display
psCheckout.showCheckout();
psCheckout.hideCheckout();
psCheckout.embed();
psCheckout.modal();
psCheckout.dimensions(width, height);
// modify checkout content
psCheckout.reboot({...});
psCheckout.liveUpdate({...});