Yatta Checkout User Guide

Integrating Yatta Checkout on your website

Adding the JavaScript library

Yatta Checkout is provided as a UMD (universal module deﬁnition for JavaScript modules). You can integrate this as a plain JavaScript library into your system.

The Yatta Checkout drop-in does all the work for server-side and client-side integration. For the integration you need to make sure that the Document Object Model (DOM) is already rendered. This can be done by including between the and tags in your HTML and before calling any of our functions like :

Initialization and mandatory event handler

Once Yatta Checkout has been integrated as a JavaScript library or module into your system, Yatta Checkout is automatically added to your HTML code.

To open the live version of Yatta Checkout for your solution, call the click handler with the relevant SOLUTION_ID.

Note: If you want to continue testing your solution, preﬁx your SOLUTION_ID with ‘preview.’ in the code above.

To pre-select a particular license type, just append ‘.monthly’ or ‘.yearly’ to the solution's identiﬁer in the code below:

After the action is executed, Yatta Checkout is opened. If you have appended a license type, the solution is opened with the chosen license type.

Note: If you want to continue testing your solution, preﬁx your SOLUTION_ID with ‘preview.’ in the code above. This forces the Checkout to open the preview version.

If the user is not signed in, they are asked to sign in.

If the user is already subscribed to your solution, the relevant subscription management is opened.

This can be done within a hyperlink, for example:

After the action is executed, Yatta Checkout opens. If you have appended a license type, the solution is opened with the chosen license type.

Note: You can provide as many license types (e.g., one-time purchase, monthly or yearly subscription) as you like. If the user clicks the link, the Checkout is initialized with the selected license type. The user can still change this during the checkout process.

All done! That was easy, right? Now you can begin testing Yatta Checkout. For more information on what you can do in the test environment, see the section Testing Checkout integration.

Optional event handler

In addition to mandatory events, the following event handler can be implemented.

Log changes

Log changes to the sign-in status or the subscriptions and orders of the current user:

A standalone sign in to the user account:

Sign out and close

Sign the user account out and silently close:

Start subscription management flow

Start a subscription management flow for a given solution:

Start purchase information flow

Start the purchase information flow for a given order:

Implementation example

Here is a basic example of a Yatta Checkout website implementation showing how to initialize and open the Yatta Checkout on a website.

Note: The JavaScript library will embed the Yatta Checkout on your website in an iframe. The content of this iframe is hosted on a Yatta domain. Modern browsers do not allow JavaScript to communicate between your website and the iframe due to cross-origin resource policy (CORP), so all communication is handled via window.postMessage (PostMessage() is a global method that safely enables cross-origin communication).

Apple Safari reports the existence of an iframe with a different domain as an error in the JavaScript console: "Blocked a frame with origin ...". This has no impact on the functionality of Yatta Checkout and this message may be ignored.

Additional testing information

To ensure that nobody else can use your website checkout, we validate all requests triggered through your integrated Yatta Checkout. We therefore need the URL of your webpage integration for all servers except localhost. If you test the webpage on your local machine, you must ensure that the website is served by an http server. (Otherwise, it’s not possible to test the implementation properly.) To do this, you can use Python’s http.server module or another server module with equivalent functionality.