Buy Button

❗️

Use it only for reference! This version of checkout is deprecated!

This is the classic version of Cleeng's classic checkout. For more updated information about the checkout process, please refer to the MediaStore SDK topic

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 the 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 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-statics.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>

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>

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>

3) Reference

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

Parameter

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:

Parameters

Description

accessGranted

true | false. Information if the customer has access to your offer or not.

authorizationSuccessful

If the customer has authorized.

customerTokenExpiresAt

When the session will expire

customerToken

customerToken, which as well is stored in customerToken

offerId

to which offer access was checked


Did this page help you?