Yatta Checkout User Guide

Web API

On this page you can find detailed information on how to add the drop-in API, as well as details about its methods, parameters and fields.

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 :

Note: If you test the web integration on your local machine, you must ensure that the website is served by an http server. (Otherwise, it’s not possible to test the integration properly.) To do this, you can use Python’s http.server module or another server module with equivalent functionality.

Start checkout

Starts the Checkout. If the user is already subscribed to your product, the relevant subscription management is opened. Similarly, if the user already has a one-time-purchase license for your product, the purchase information is opened.

This example code snippet starts the Checkout in the live environment for a user who does not yet have a right to access the product, pre-selecting a yearly subscription and pre-filling the authentication forms with user@product-company.com if the user is not yet signed in.

productId	Required String This is the ID of the product for which the Checkout should be started.
environment	Optional String with value 'live' or 'preview' Set to 'live' by default, but 'preview' should be used for testing purposes. Note: If your product is not yet live, the environment parameter will be ignored and the preview environment will be used by default.
manageAssetHint	Optional Boolean False by default. Set to true if the user has the right to access the product. They will not be notified again by the Checkout that they have usage rights. This is recommended if your website adapts to the user's asset status — e.g., your "Purchase" button text changes to "Manage" if the user already has a license.
type	Required String with value 'oneTimePurchase' or 'subscription' This can be defined to pre-select a one-time purchase or subscription. One-time purchase mode is set by default.
subscriptionInterval	Optional String with value 'monthly' or 'yearly' This can be defined to pre-select a subscription interval. Monthly is set by default. This is only used for type 'subscription'.
emailHint	Optional String Email address used to pre-fill Yatta authentication forms if the user is not signed in. Empty by default. Note: Remember to update your Privacy Policy to reflect the fact you will be passing your user's email address to us for authentication.

Subscribe to changes to the current user's sign-in status.

callback

Required (signedIn: boolean) => void

Function called whenever the user's signed-in boolean changes.

Asset status change

Subscribe to changes to the asset status of the current user for a given product.

productId	Required String Value is the ID of the product for which the asset status should be retrieved.
callback	Required (assetStatus: AssetStatus \| null) => void Function that is called whenever the user's asset status changes. The parameter for the callback has the type AssetStatus.
environment	Optional String with value 'live' or 'preview' Sets whether to retrieve the user's asset status for 'live' or 'preview' environments. Note: If your product is not yet live, the environment parameter will be ignored and the preview environment will be used by default.

AssetStatus object

The asset status for a specified product provided to the callback in the drop-in interface if the user is signed in and has the right to access the asset.

Note: When the AssetStatus object is null, the user does not have a license.

type	String with value 'oneTimePurchase' or 'subscription' This identifies, if the type of the asset is an one-time purchase or a subscription.
bookingStatus	String with value 'ongoing' or 'canceled' Provides the booking status of the subscription. This is only used for type 'subscription'.

Allows the user to sign in, then closes without additional actions. Optionally, you can pre-fill the authentication form with an email address.

emailHint

Optional String

Email address used to pre-fill Yatta authentication forms if the user is not signed in. Empty by default.

Note: Remember to update your Privacy Policy to reflect the fact you will be passing your user's email address to us for authentication.

Sign out

Signs the user out.

Link account

Links a non-Yatta account to the Checkout to ensure access to licenses for products that require a link to this account. This is only necessary if you want to use your own IAM.

accountId

Required String

A new ID for the account in your IAM to map the user to the purchased license. With this ID, you can use our REST API to check if the user has an active license.

If you want to use your own IAM, you need to write us an email to checkout@yatta.de so we can enable it for your product. Otherwise, we will generate an ID for you so you can use the Yatta IAM without calling this method.

Note: If a product that requires a linked account is sold using the Checkout, this API must be called every time the user signs in or out, and upon page load.

Implementation example

Here is a basic example of a Yatta Checkout website implementation showing how to initialize and open the 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.