POP ("Pay on Page") Checkout is a simple way to start taking orders from your website and offers a seamless checkout experience for your customers. Integrating POP Checkout is easy!
To see an example, you must first add a product to your account. Then reload this page to see the demo.
POP Checkout allows you to place buttons and links wherever you want customers to make a purchase. Click the button below to see an example.
To place a test order with the demo below, you can use the following details:
For security, we limit the websites that can embed your POP Checkout to those that you specify.
https://www.mysite.com, you would only enter www.mysite.com
You need to include a JavaScript snippet on every page where you want to provide the option for customers to buy.
Paste the following script reference near the bottom of your HTML page, just above the </body> tag.
<script src="{{data.src}}/dist/js/popup.min.js" id="_popup_script" type="text/javascript"></script>To configure a button or link to generate the popup when clicked, do the following:
popup-buy-now
data-product_id="your-product-id-here"
Here's the button code for product_id {{data.product.product_id}}. Try it!
<button class="popup-buy-now" data-product_id="{{data.product.product_id}}">Buy Now</button>Here's the link code for product_id {{data.product.product_id}}. Try it!
<a href="#" class="popup-buy-now" data-product_id="{{data.product.product_id}}">Buy Now</a>You can specify additional parameters to customize the behavior.
data-quantity: Indicate the quantity of the item
data-email: Pre-fill the customer's email address with the supplied value
data-name: Pre-fill the customer's name with the supplied value
data-currency: Set the cart currency
data-promotion_code: Provide a promo code
data-meta-*: Replace * with any value and the supplied value will be stored on the order's meta data
For example, here's a button that specifies the quantity, currency, promo code and a meta value:
<button class="popup-buy-now" data-product_id="{{data.product.product_id}}" data-quantity="1" data-currency="EUR" data-promotion_code="half-off" data-meta-ref="homepage">Buy Now</button>
The basic integration allows you to send in basic data about the cart. You can send in a full cart object adding the data-cart attribute to your button or link and include the full cart object as a JSON string.
<button class="popup-buy-now" data-cart='{"promotion_code": "half-price", "items":[{"product_id":"1001", "quantity":1 }], "customer": {"name": "Joe Blow", "email": "joe@example.com", "billing_address": {"address_1": "123 Main St.", "city": "Ville", "state_prov": "OH", "postal_code": "43081", "country": "US"}}}'>Buy Now</button>
When POP Checkout is initialized, a variable _popup is set on the page. This variable contains a function that can be used to trigger POP Checkout from JavaScript, as seen in the example below.
var cart = {items: [{product_id:"1001"}]};
_popup.open(cart);
Note that this variable is not set until POP Checkout has fully initialized. Therefore, it is best to use Asynchronous Loading (described below) and use the _popup.open(cart) function within the loadApp() function callback, thereby ensuring that POP Checkout is ready before you call the open function.
Note: Most browsers include automated popup blockers by default. Since POP Checkout is loaded in a new tab on mobile devices, you should invoke the _popup.open() function in response to a user "click" to prevent the new tab from being blocked by the browser.
For example, if you attempt to launch POP Checkout automatically on page load (without a user click event), it will launch successfully on desktop devices because POP Checkout loads in an overlay and not a new tab. However, it will most likely be blocked on mobile devices which attempt to load POP Checkout in a new tab. If you choose to launch POP Checkout using the _popup.open() function, make certain you test your implementation from a mobile device (or emulating a mobile device) to ensure POP Checkout is not blocked.
It is possible to load POP Checkout asynchronously, which provides some additional features such as
subscribing to events when the popup is opened or closed, and allows you to include the code within the <head></head> section
of your website without a performance penalty.
To load POP Checkout asynchronously, include the snippet below in your page (usually within the <head></head> tags). You'll notice
two events in the example below that you can listen to; if you don't intend to use the onLoad and onClose events, don't include these optional lines in your code.
<script>
function loadApp(s,a,l,e){var i=document.getElementsByTagName("head")[0],n=!1,d=document.createElement("script");
d.src=s,d.id="_popup_script",d.type="text/javascript",d.async=1,d.setAttribute("data-popup-type", a),d.setAttribute("data-popup-ui", l),d.setAttribute("data-self-init", 1),d.onload=d.onreadystatechange=function()
{n||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState||(n=!0,_popup.initialize(function(){"function"==typeof e&&e()}))},i.appendChild(d)}
// loadApp(script_url, type_of_popup, ui, callback).
loadApp("{{data.src}}/dist/js/popup.min.js", "simple", "basic", function() {
// Optional, listen for the when the popup is opened. See the Callback Functions documentation below for details.
_popup.onLoad = function(data) {
// console.log(data)
}
// Optional, listen for when the popup is closed. See the Callback Functions documentation below for details.
_popup.onClose = function(data) {
// console.log(data)
}
// Want to open POP Checkout programatically? Below is a code sample.
// Note that on mobile devices POP Checkout loads in a new tab. To prevent issues with popup blockers, make sure to run this function in response to a user click event.
// var cart = { items: [{ product_id: "1001" }] }
// _popup.open(cart);
});
</script>// The below code is the same as the example above, just uncompressed for easier review.
// For increased performance, the compressed version is generally used in production environments.
<script>
function loadApp(url, type, ui, callback) {
var head = document.getElementsByTagName("head")[0], done = false;
var script = document.createElement("script");
script.src = url;
script.id = "_popup_script";
script.type = "text/javascript";
script.async = 1;
script.setAttribute("data-popup-type", type);
script.setAttribute("data-popup-ui", ui);
script.setAttribute("data-self-init", 1);
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function () {
if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
done = true;
// Initialize
_popup.initialize(function() {
if (typeof callback === 'function') callback();
});
}
};
head.appendChild(script);
}
// loadApp(script_url, type_of_popup, ui, callback).
loadApp("{{data.src}}/dist/js/popup.min.js", "simple", "basic", function() {
// Optional, listen for the when the popup is opened. See the Callback Functions documentation below for details.
_popup.onLoad = function(data) {
// console.log(data)
}
// Optional, listen for when the popup is closed. See the Callback Functions documentation below for details.
_popup.onClose = function(data) {
// console.log(data)
}
// Want to open POP Checkout programatically? Below is a code sample.
// Note that on mobile devices POP Checkout loads in a new tab. To prevent issues with popup blockers, make sure to run this function in response to a user click event.
// var cart = { items: [{ product_id: "1001" }] }
// _popup.open(cart);
});
</script>When using aynchronous loading, you have access to callback functions.
_popup.onLoad(data) A function that is called when POP Checkout is initially loaded and displayed to the user. The data paramter includes a property cart that provides a copy of the cart at the time POP Checkout is initially loaded.
_popup.onClose(data) A function that is called when POP Checkout is closed. The data paramter includes a property cart that provides a copy of the cart and a property order that provides a copy of the order at the time POP Checkout is closed. Note that if the customer did not complete a payment before POP Checkout was closed, order will be null.
If there is an error creating the cart when POP Checkout is launched (perhaps an invalid payload is provided, a timeout or other system error), data.cart property will return as undefined. To prevent exceptions in your code, it is recommended that you confirm that data.cart is defined before attempting to use it.
Note: In the case of mobile devices, POP Checkout is loaded in a new tab rather than a modal overlay to provide a better user experience. While not common, if the user clicks the browser "Reload" button on the new tab, it will trigger the _popup.onClose() function, even though POP Checkout has not actually been closed.
POP Checkout will automatically determine the user's language from the browser settings and will select the language accordingly. However, you can override the language of the user's browser by adding the following HTML attribute to the script:
<script src="{{data.src}}/dist/js/popup.min.js" id="_popup_script" data-language="de" type="text/javascript"></script>The language can be a fully-qualified locale (such as de-DE) or a two letter language code (such as de).
POP Checkout automatically determines, based on the user's environment, if it should launch as a modal (page overlay) or a new browser tab. For the best user experience, POP Checkout loads as an overlay on larger devices such as desktop computers, laptops and tablets, and as a new tab on small devices such as a phone.
However, you can override this behavior by indicating how you wish POP Checkout to load with the data-as-modal HTML attribute on the script, as seen in the example below. If you set data-as-modal to true, POP Checkout will always load as a modal (overlay). If you set data-as-modal to false, POP Checkout will always launch in a new tab.
<script src="{{data.src}}/dist/js/popup.min.js" id="_popup_script" data-as-modal="true" type="text/javascript"></script>
For best results, we generally recommend that you allow POP Checkout to determine the best launch method. If you do not supply the data-as-modal attribute, the launch method will be automatically selected.
You can set a parameter to run in Debug mode. Debug mode prints messages to the browser console so you can watch various events in the lifecycle of POP Checkout. It introduces only minor overhead, so you should not be concerned about having Debug mode enabled for live customers. There are three ways to enable Debug mode:
Add debug=true to the query string parameter of the page that launches POP Checkout. For example, to enable it for this page, you would use the following URL:
{{data.debugUrl}}data-debug to your <script> tag<script data-debug="true" src="{{data.src}}/dist/js/popup.min.js" id="_popup_script" type="text/javascript"></script>_popup.initialize() functionIf you are using the async method of launching the popup, you can include true as the second parameter to indicate that debug mode should be enabled.
_popup.initialize(callback, true)