Lightbox

Take payment buttons to the next level! Lightbox is a beautifully designed, customizable, pre-built, and fully integrated hosted payment page.

Remove the friction from the online checkout experience. Lightbox seamlessly integrates with your website (so customers don’t leave your site) by embedding a short HTML snippet – no development required!

Implementing Lightbox

Lightbox can be added to your website by adding a small HTML code snippet.

Log into Stax Pay, click Apps, and then click Stax Checkout from the list of applications.
Launch the app and copy your unique code snippet.
Embed the code snippet onto your website.
Optional: Add any applicable customization options below to your snippet.
Your code snippet will look like the following:

<div id="pay_now">
<!-- HTML is dynamically placed here -->
</div>
<script
id="stax_checkout_script"
src="https://checkout.staxpayments.com/v1/checkout.min.js"
data-webpaymentstoken="your web payments token"
data-button="#pay_now"
>
</script>

Note: If you change the main div id, you must ensure that the data-button variable is identical with a # before the name. For example, the above code sample uses pay_now as the main div id. Therefore, the data-button field will be #pay_now.

Customization Options

Your business is unique. Lightbox makes it easy to select the best options for you, whether you want to keep the checkout flow short and simple for your customers or include additional fields such as Transaction Amount, Billing Address, and more.

You can add optional fields to customize the Checkout payment form.

Parameter	Description	Type
data-amount	The amount due in USD; do not include currency symbols or commas. If data-amount is omitted or is 0, the customer will be required to manually enter an amount.	?
data-name	Cardholder name that can be prefilled.	String
data-billingInclude	If true, the user will be requested but not required to enter their address, city, state, and zip code. If false or omitted, the billing fields will not be displayed.	Boolean
data-billingRequired	If true, the user must fill in all billing fields. Note that data-billingInclude must be true to display the billing fields.	Boolean
data-billingAddress1	Billing address associated with the card.	String
data-billingCity	The city associated with the card.	String
data-billingState	2-letter abbreviation for the state. Note that the state will be used to determine if surcharging, if applicable, can be applied.	Enum
data-billingZip	Zip code associated with the card.	String
data-billingEmail	Prefilled email address. This is where a payment receipt will be sent.	String
data-expDate	Card expiration date: MM/YY format required.	integer
data-openOnLoad	True or False. If true, Lightbox will be loaded and displayed as soon as the JavaScript is executed instead of when the button is clicked. Stax recommends using the Pay with Stax button whenever possible.	Boolean
data-displayConfirmation	Defaults to false. If true, it displays a confirmation modal after a successful transaction. The message displayed in the confirmation model is Payment Successful. Your payment was approved. Please check your email for transaction details.	Boolean