Buy button and checkout integration

We have introduced the new, unique experience for our publishers who wants to integrate our solution into their websites. We have provided new checkout() method, using it integration will be much faster and easier. The biggest change you can accomplish using this method is the new type of display. Above the standard way, which is pop-up window, you can use overlay and inline type.

On this page I will try to show different ways to trigger the new checkout() method. From the easiest one to those more advanced.


1. Cleeng script in the <head> of your page.

In order to make Cleeng up and running, you need to keep this line in the head on your website:

<script type="text/javascript" src="https://cdn.cleeng.com/js-api/3.0/api.js"></script>

2. How to start selling from your website

You can very easily integrate any button on your page to trigger the payment right after click.

Overlay checkout. This is the example code of your button.

<button 
    data-cleeng-trigger 
    data-action="checkout" 
    data-display-type="overlay" 
    data-offer-id="S543962233_US" 
    data-completed-callback="cleengCallbackHandler(result)">
    Buy for $9.99
</button>

Trigger overlay checkout:


Pop-up checkout. This is the example code of your button.

<button 
    data-cleeng-trigger 
    data-action="checkout" 
    data-display-type="popup" 
    data-offer-id="S543962233_US"
    data-completed-callback="cleengCallbackHandler(result)">
    Buy for $9.99
</button>

Trigger overlay checkout:


Inline checkout. This is the example code of your container.

<div
    data-cleeng-container 
    data-action="checkout" 
    data-display-type="inline" 
    data-offer-id="S543962233_US" 
    data-completed-callback="cleengCallbackHandler(result)">
    Buy for $9.99 
</div>

Container with inline checkout:



3.Reference

On above examples, you can see few parametes used, here is the full list:

Param name Description
data-cleeng-trigger Put it to mark html element as checkout trigger.
data-cleeng-container Put it to mark html element as checkout container. Apply only for inline type of checkout.
data-action checkout | authentication
data-display-type overlay | inline | popup
data-offer-id Offer Id you want to sell. E.g. "S123123123_US". If you want to sell more offers within one checkout window then "S123123123_US,S124124124_US"
data-container-id For trigger elements only, to select which container has to be triggered after action.
data-transaction-external-data You can add custom info about the transaction. Later you can see this information in your transactions reports.
data-publisher-id Required when data-action is set to authentication or login-only
data-locale change the language of your checkout, examples: en_US | es_ES | fr_FR | nl_NL | fi_Fi
data-completed-callback Your callback handler. Decide how your website should behave after the purchase is successful/failed. You can show some message, redirect or simple refresh the page. See below seperate section about the callback.



4. Callback

After you will use the callback option in your trigger:

data-completed-callback="cleengCallbackHandler(result)"

Then in your JavaScript for you handle it by:

function cleengCallbackHandler(result) {
    //play with return object
}



In return you can find:

Param name Description
accessGranted true | false. Information if customer has access to your offer or not.
authorizationSuccessful If customer has authorized.
customerToken customerToken, which as well is stored in customerToken
customerTokenExpiresAt When the session will expire
offerId to which offer access was checked




Back to API Reference