### Embed Storylane Interactive Guide
Source: https://developers.cleeng.com/docs/cleeng-sandbox
This snippet embeds an interactive guide from Storylane, allowing users to explore the sandbox setup visually. It requires the Storylane JavaScript library.
```html
```
--------------------------------
### Example JSON structure for translations
Source: https://developers.cleeng.com/docs/translations
This is an example of a translations.json file. You should copy the default English version and translate the values to your desired language or modify the English wording. Ensure the file is placed within the appropriate language-specific folder (e.g., /es, /de, /customEn) inside the /public/cleeng-translations directory.
```json
{
"currentplan.no-offers-title": "No offers yet!",
"currentplan.no-offers-text": "If you choose your plan, you will be able to manage your offers here."
}
```
--------------------------------
### Apple Pay Setup
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Information regarding the setup and compatibility of Apple Pay integration.
```APIDOC
## Apple Pay Setup
### Description
Details on how Apple Pay works within the Cleeng integration, including the customer experience and compatibility considerations.
### Compatibility
Apple Pay has specific requirements regarding issuers, devices, browsers, and countries.
#### Supported Issuers
Refer to Apple's documentation for a list of issuers that support Apple Pay: [List of issuers that support Apple Pay](https://support.apple.com/en-us/HT206638)
#### Compatible Devices and Browsers
Apple Pay is supported on specific devices and browsers, primarily Safari: [List of devices and browsers compatible with Apple Pay](https://support.apple.com/en-us/HT208531)
#### Available Countries and Regions
Check the availability of Apple Pay in different regions: [List of countries and regions where Apple Pay is available](https://support.apple.com/en-us/HT207957)
### Limitations
- Adyen does not currently support UnionPay cards through Apple Pay.
- Apple Pay is available with specific issuers, on specific devices and browsers (Safari), and in specific countries.
```
--------------------------------
### Check Content Entitlement in Node.js
Source: https://developers.cleeng.com/docs/entitlements-example-code-snippets
This Node.js example shows how to verify user entitlements for content access via Cleeng's API. It uses the `node-fetch` library to make a GET request and requires API credentials. The function logs whether access is granted or denied, providing a link to purchase if access is restricted.
```javascript
import fetch from "node-fetch"; // Node 18+: you can just use global fetch
const cleengApiKey = "-7RhPJP4ZuaNdkA6dYPhv-d22Xv2Cs6_7c7QlhC0P85QsBXi";
const cleengCustomerId = "123123123";
const cleengOfferId = "S123123123_US";
const url = `https://api.cleeng.com/3.1/entitlements/customer_id/${cleengCustomerId}/offer_id/${cleengOfferId}`;
async function checkEntitlement() {
try {
const response = await fetch(url, {
method: "GET",
headers: {
"X-Publisher-Token": cleengApiKey,
"accept": "application/json"
},
timeout: 10000 // 10 seconds
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.accessGranted) {
console.log("✅ Load your premium assets and content");
} else {
console.log("❌ Access denied — show paywall");
console.log('Buy now');
}
// Debugging: full API response
console.log("Full response:", JSON.stringify(data, null, 2));
} catch (err) {
console.error("Request failed:", err.message);
}
}
checkEntitlement();
```
--------------------------------
### Subscribe to Cleeng Webhook Topics API Example (Sandbox)
Source: https://developers.cleeng.com/docs/braze
This example shows how to subscribe to a specific Cleeng webhook topic, 'customerRegistered', using the Cleeng API in a sandbox environment. This is a crucial step for receiving event notifications from Cleeng in Braze. Remember to replace placeholder values with your actual credentials and topic.
```bash
PUT https://api.sandbox.cleeng.com/3.1/webhook_subscriptions/customerRegistered
```
--------------------------------
### POST /3.1 /orders
Source: https://developers.cleeng.com/docs/subscription-initial-purchase
Creates an order for a customer, allowing them to select an offer and proceed with payment.
```APIDOC
## POST /3.1 /orders
### Description
Creates an order for a customer, allowing them to select an offer and proceed with payment.
### Method
POST
### Endpoint
https://api.cleeng.com/3.1/orders
### Parameters
#### Request Body
- **customerId** (string) - Required - The ID of the customer.
- **offerId** (string) - Required - The ID of the offer the customer is purchasing.
- **currency** (string) - Required - The currency for the transaction (e.g., USD).
- **country** (string) - Required - The country code for the transaction (e.g., US).
- **paymentMethodId** (integer) - Required - The ID of the payment method.
### Request Example
```json
{
"customerId":"927751142",
"offerId":"S619117184_US",
"currency":"USD",
"country":"US",
"paymentMethodId":123876432
}
```
### Response
#### Success Response (200)
- **orderId** (integer) - The ID of the created order.
- **token** (string) - A token associated with the order.
#### Response Example
```json
{
"orderId": 343967543,
"token": "some_order_token"
}
```
```
--------------------------------
### Update Customer API Request Example (Braze to Cleeng)
Source: https://developers.cleeng.com/docs/braze
This example demonstrates how to send data back from Braze to Cleeng using the Cleeng Update Customer API. It shows a PATCH request to update a user's email opt-in status and include a source field, triggered by a Braze event. Ensure the payload structure matches the Cleeng API documentation for the desired action.
```json
{
"emailOptIn": false,
"source": "Braze"
}
```
--------------------------------
### Example Webhook Subscription with Multiple URLs and paymentMethodId Filters
Source: https://developers.cleeng.com/docs/webhooks-filtering
This example shows how to subscribe multiple endpoints to webhook events, each with a different 'paymentMethodId' filter. This allows for granular control over which events are sent to which specific URLs based on the payment method.
```json
[
{
"url": "https://endpoint-receiving-only-320113641.com",
"filters": [
{
"name": "paymentMethodId",
"options": {
"value": 320113641
}
}
]
},
{
"url": "https://endpoint-receiving-only-112323789.com",
"filters": [
{
"name": "paymentMethodId",
"options": {
"value": 112323789
}
}
]
}
]
```
--------------------------------
### Initialize Drop-in Component
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Steps to create an instance of AdyenCheckout and mount the Drop-in component to a specified container.
```APIDOC
## Initialize the Drop-in
### Description
Create an instance of AdyenCheckout using the configuration object and then create and mount the Drop-in component to a container element.
### Method
JavaScript (Client-side)
### Endpoint
N/A (Client-side integration)
### Parameters
#### Request Body
- **configuration** (object) - Required - The configuration object for AdyenCheckout.
- **dropin configuration** (object) - Required - Configuration for the Drop-in component, including the `onSelect` callback.
- **container element** (string) - Required - The CSS selector for the container where the Drop-in will be mounted (e.g., '#dropin-container').
### Request Example
```javascript
// Create an instance of AdyenCheckout using the configuration object.
const checkout = await AdyenCheckout(configuration);
// Create an instance of Drop-in and mount it to the container you created.
const dropinComponent = checkout.create('dropin', {
onSelect // required. You should update order with proper paymentMethodId, each time this function is called
});
dropinComponent.mount('#dropin-container');
```
### Response
N/A (Client-side rendering)
### Response Example
N/A
```
--------------------------------
### Get Gift Details
Source: https://developers.cleeng.com/docs/gift-subscriptions-setup-via-mediastore-api
Retrieves the delivery details of a gift using its unique giftId.
```APIDOC
## GET /gifts/{giftId}
### Description
Fetches the delivery details for a specific gift using its ID.
### Method
GET
### Endpoint
/gifts/{giftId}
### Parameters
#### Path Parameters
- **giftId** (integer) - Required - The unique identifier of the gift.
### Request Body
None
### Response
#### Success Response (200)
- **giftDetails** (object) - Contains the delivery information for the gift.
- **deliveryDate** (string) - The scheduled delivery date.
- **recipientEmail** (string) - The email address of the gift recipient.
- **personalNote** (string) - A personal message included with the gift.
#### Response Example
```json
{
"giftDetails": {
"deliveryDate": "2023-10-27T10:00:00Z",
"recipientEmail": "recipient@example.com",
"personalNote": "Happy Birthday!"
}
}
```
```
--------------------------------
### Set up Drop-in Integration
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Steps to integrate Adyen's Drop-in UI into your website, including installing the Adyen Web package, creating a container element, and initializing the Drop-in component.
```APIDOC
## Drop-in Setup Steps
This section outlines the process of setting up the Adyen Drop-in component on your website.
### 1. Use the Adyen Web npm package
Install the Adyen Web Node package using npm.
```shell
npm install @adyen/adyen-web --save
```
Import Adyen Web and its CSS into your application.
```javascript
import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';
```
### 2. Create the container element for Drop-in
Add a DOM element to your checkout page where the Drop-in interface will be rendered. Assign a unique ID to this element.
```html
```
**Note:** If you are using JavaScript frameworks like Vue or React, use element references instead of DOM selectors and avoid re-rendering the container element.
```
--------------------------------
### Initialize and Mount Adyen Drop-in (JavaScript)
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
This snippet demonstrates how to initialize the AdyenCheckout service and create a 'dropin' component. It configures the 'onSelect' callback and 'openFirstPaymentMethod' based on screen width. Finally, it mounts the drop-in component to a specified DOM element. Ensure the '@adyen/adyen-web' library is imported.
```javascript
import AdyenCheckout from '@adyen/adyen-web';
const checkout = await AdyenCheckout(configuration);
const dropin = checkout.create('dropin', {
onSelect,
openFirstPaymentMethod:
!window.matchMedia('(max-width:991px)').matches
});
dropin.mount(containerRef.current);
```
--------------------------------
### Create Drop-in Configuration Object (JavaScript)
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
This JavaScript code snippet demonstrates how to create a configuration object for the Cleeng Drop-in integration. It includes essential parameters such as environment, clientKey, analytics settings, error handling, amount, payment methods, and payment method configurations. The `onSubmit` function is crucial for triggering the payment process.
```javascript
const configuration = {
environment: 'test', // Change to 'live' for the live environment. Fetched from the server. See the guide below.
clientKey: 'test_I4OFGUUC...', // Public key used for client-side authentication. Fetched from the server.
analytics: {
enabled: true // Set to false to not send analytics data to Adyen.
},
onError: (error, component) => {
console.error(error.name, error.message, error.stack, component);
},
amount, // Fetched from the server.
paymentMethodsResponse: { paymentMethods }, // Fetched from the server.
paymentMethodsConfiguration: {
card: {
hasHolderName: true,
holderNameRequired: true
}
},
onSubmit: submitFn
};
```
--------------------------------
### Check Offer Giftability and Get Gift ID
Source: https://developers.cleeng.com/docs/gift-subscriptions-setup-via-mediastore-api
This endpoint is used to check if a purchased offer is a gift and to retrieve its giftId. It also helps determine if an offer is giftable.
```APIDOC
## GET /customers/{customerId}/transactions
### Description
Fetches a customer's transactions to determine if a purchased offer is a gift and retrieve the associated `giftId`.
### Method
GET
### Endpoint
/customers/{customerId}/transactions
### Query Parameters
None
### Request Body
None
### Response
#### Success Response (200)
- **transactions** (array) - List of customer transactions.
- **targetType** (string) - Type of the target, can be `giftId` or `subscriptionId`.
- **targetId** (integer) - The identifier for the gift or subscription.
#### Response Example
```json
{
"transactions": [
{
"targetType": "giftId",
"targetId": 205196449
}
]
}
```
```
```APIDOC
## GET /offers/{offerId}/details
### Description
Fetches details of a specific offer to check if it is giftable.
### Method
GET
### Endpoint
/offers/{offerId}/details
### Query Parameters
None
### Request Body
None
### Response
#### Success Response (200)
- **isGiftable** (boolean) - Indicates if the offer can be purchased as a gift.
#### Response Example
```json
{
"isGiftable": true
}
```
```
--------------------------------
### Check Entitlement (Node.js)
Source: https://developers.cleeng.com/docs/entitlements-example-code-snippets
This Node.js code snippet shows how to verify customer entitlements using the Cleeng API. It makes a GET request to the entitlements endpoint and handles the response to determine content access.
```APIDOC
## GET /3.1/entitlements/customer_id/{customerId}/offer_id/{offerId}
### Description
Checks if a customer has access to a specific offer based on their entitlements.
### Method
GET
### Endpoint
`https://api.cleeng.com/3.1/entitlements/customer_id/{customerId}/offer_id/{offerId}`
### Parameters
#### Path Parameters
- **customerId** (string) - Required - The unique identifier for the customer.
- **offerId** (string) - Required - The unique identifier for the offer.
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
import fetch from "node-fetch"; // Node 18+: you can just use global fetch
const cleengApiKey = "-7RhPJP4ZuaNdkA6dYPhv-d22Xv2Cs6_7c7QlhC0P85QsBXi";
const cleengCustomerId = "123123123";
const cleengOfferId = "S123123123_US";
const url = `https://api.cleeng.com/3.1/entitlements/customer_id/${cleengCustomerId}/offer_id/${cleengOfferId}`;
async function checkEntitlement() {
try {
const response = await fetch(url, {
method: "GET",
headers: {
"X-Publisher-Token": cleengApiKey,
"accept": "application/json"
},
timeout: 10000 // 10 seconds
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.accessGranted) {
console.log("✅ Load your premium assets and content");
} else {
console.log("❌ Access denied — show paywall");
console.log('Buy now');
}
// Debugging: full API response
console.log("Full response:", JSON.stringify(data, null, 2));
} catch (err) {
console.error("Request failed:", err.message);
}
}
checkEntitlement();
```
### Response
#### Success Response (200)
- **accessGranted** (boolean) - Indicates whether the customer has access to the offer.
- **offerId** (string) - The ID of the offer.
- **customerId** (string) - The ID of the customer.
- **expiresAt** (string) - The expiration date of the entitlement (ISO 8601 format), if applicable.
#### Response Example
```json
{
"accessGranted": false,
"offerId": "S123123123_US",
"customerId": "123123123",
"expiresAt": null
}
```
```
--------------------------------
### Process Adyen Redirect Result and Finalize Payment
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
This example shows the HTTP GET request format when a customer is redirected back after completing 3D Secure authentication. It includes the `redirectResult` parameter, which is then used to finalize the payment by making a request to the `/connectors/adyen/initial-payment/finalize` endpoint.
```http
GET /?orderId=12xy...&&redirectResult=X6XtfGC3%21Y.... HTTP/1.1
Host: www.your-company.com/checkout
```
--------------------------------
### Translate Text with Variables
Source: https://developers.cleeng.com/docs/translations
This example shows how to translate a string containing a variable. The variable `{{renewalDate}}` must be preserved, but its position within the translated string can be altered. This is crucial for maintaining dynamic data display in different languages.
```json
"currentplan.subscription.renews-info": "Renews automatically on {{renewalDate}}"
"currentplan.subscription.renews-info": "{{renewalDate}}: Date of auto-renewal"
```
--------------------------------
### Configure AdyenCheckout Instance
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
This JavaScript code sample demonstrates how to configure the AdyenCheckout instance with various parameters such as locale, environment, amount, and event handlers for payment submissions and additional details. It also includes configurations for specific payment methods like card, Apple Pay, and Google Pay.
```javascript
const configuration = {
locale: 'en-US',
environment: 'test',
analytics: {
enabled: true
},
amount: {
currency: ‘EUR’,
value: 10,
},
clientKey: ‘test_…’,
onSubmit: (state, component) => console.log(state, component),
onAdditionalDetails: (state, component) => console.log(state, component),
onError,
paymentMethodsConfiguration: {
card: {
hasHolderName: true,
holderNameRequired: true
},
applepay: {
amount: {
value: 1000,
currency: "EUR"
},
countryCode: “US”,
}
},
googlepay: {
environment: ‘TEST’,
amount: {
value: 1000,
currency: "EUR"
},
}
}
};
const checkout = await AdyenCheckout(configuration);
```
--------------------------------
### Make a Payment
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Initiate a payment by calling the `/connectors/adyen/initial-payment` endpoint within the `onSubmit` function.
```APIDOC
## Make a payment
### Description
Call the `/connectors/adyen/initial-payment` endpoint from your `onSubmit` function to initiate a payment. The response will determine the next steps: a `payment` object indicates success, while an `action` object requires further handling.
### Method
POST
### Endpoint
`/connectors/adyen/initial-payment`
### Parameters
#### Query Parameters
None
#### Request Body
(Details depend on the specific payment initiation request, typically includes order information and payment method details)
### Request Example
(Refer to the specific implementation within your `onSubmit` function)
### Response
#### Success Response (200)
- **payment** (object) - Indicates the payment was completed and succeeded.
- **action** (object) - Indicates that the payment requires additional actions to be completed.
#### Response Example
```json
// Example of an action object response
{
"action": {
"paymentMethodType": "scheme",
"url": "https://test.adyen.com/hpp/3d/validate.shtml",
"data": {
"MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
"PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
"TermUrl": "https://example.com/checkout?shopperOrder=12xy..."
},
"method": "POST",
"type": "redirect"
}
}
```
```
--------------------------------
### Create Rejected Payment Reference in Cleeng (cURL)
Source: https://developers.cleeng.com/docs/subscription-initial-purchase
This cURL example illustrates how to create a 'rejected' payment reference in Cleeng via the POST /3.1 /payments endpoint. It requires the order ID, status, payment operation type, and a reason for rejection.
```curl
curl -X POST \
https://api.cleeng.com/3.1/payments \
-H 'Content-Type: application/json' \
-H 'X-Publisher-Token: a6xxki_mf493WSBjEs9D-UpN-0kyESWYPUQo9S6nEewTyuL7' \
-d '{
"orderId": 343967543,
"status": "rejected",
"paymentOperation": "initial-payment",
"rejectedReason": "Insufficient balance"
}'
```
--------------------------------
### Configure Adyen Drop-in Locale
Source: https://developers.cleeng.com/docs/translations
This example shows how to configure the locale for Adyen Drop-in within the Cleeng MediaStore SDK using the `adyenConfiguration` prop. Setting the `locale` field directly overrides the default language detection, ensuring the payment interface displays in the specified language.
```javascript
const adyenConfiguration = {
locale: ‘es’
}
```
--------------------------------
### Drop-in Configuration and Usage
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
This section details the parameters, event handlers, and methods available for configuring and interacting with the Drop-in component.
```APIDOC
## Drop-in Configuration and Methods
### Description
This document outlines the parameters, event handlers, and methods for the Drop-in component, facilitating its integration and customization for payment processing.
### Parameters
These parameters are specific to the Drop-in component and are accepted only on the Drop-in instance.
#### Configuration Parameters
- **`openFirstPaymentMethod`** (boolean) - Optional - When enabled, Drop-in automatically opens the first payment method on page load. Defaults to `true`.
#### Event Handlers
- **`onReady()`** - Callback function - Called when Drop-in is initialized and ready for use.
- **`onSelect(component)`** - Required - Callback function - Called when the customer selects a payment method. It is crucial to update the order with the correct payment method ID on each `onSelect` call. Use `component.type` (possible values: `card`, `googlepay`, `applepay`) to detect the selected payment method and map it to the appropriate payment method ID in Cleeng.
### Methods
- **`mount(selector)`**
- Description: Mounts the Drop-in component into the DOM element identified by the provided selector. The selector can be a valid CSS selector string or an HTMLElement reference.
- **`unmount()`**
- Description: Unmounts the Drop-in component from the DOM. It is recommended to call this method if the payment amount changes after the initial mount.
- **`closeActivePaymentMethod()`**
- Description: Closes the currently active payment method, useful for resetting the Drop-in component.
### Code Sample
```javascript
import AdyenCheckout from '@adyen/adyen-web';
const configuration = {
// Your Adyen configuration object
};
const checkout = await AdyenCheckout(configuration);
const dropin = checkout.create('dropin', {
onSelect: (component) => {
console.log(`Payment method selected: ${component.type}`);
// Map component.type to your payment method ID and update the order
},
openFirstPaymentMethod: !window.matchMedia('(max-width:991px)').matches
});
dropin.mount(containerRef.current); // Assuming containerRef.current is a valid DOM element or selector
// To unmount:
// dropin.unmount();
// To close active payment method:
// dropin.closeActivePaymentMethod();
```
```
--------------------------------
### Create Captured Payment Reference in Cleeng (cURL)
Source: https://developers.cleeng.com/docs/subscription-initial-purchase
This cURL example shows how to create a 'captured' payment reference in Cleeng using the POST /3.1 /payments endpoint. It includes order ID, status, payment details (token, card info), external payment ID, and payment operation type.
```curl
curl -X POST \
https://api.cleeng.com/3.1/payments \
-H 'Content-Type: application/json' \
-H 'X-Publisher-Token: a6xxki_mf493WSBjEs9D-UpN-0kyESWYPUQo9S6nEewTyuL7'
-d '{
"orderId": 343967543,
"status": "captured",
"paymentDetails": {
"token": "z7xariumf493GHBjEs9D-UpN-9kyESWYPUQo9S6nEewThuD8",
"paymentMethodSpecificParams" : {
"holderName": "Matthew Brown",
"lastCardFourDigits": "1111",
"variant": "visa",
"cardExpirationDate": "10/2019"
}
},
"externalPaymentId": "",
"paymentOperation": "initial-payment"
}'
```
--------------------------------
### Optional Configuration
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Explore additional parameters and methods for customizing the AdyenCheckout instance and Drop-in component.
```APIDOC
## Optional configuration
### Description
Customize the AdyenCheckout instance and Drop-in component with optional parameters and methods to enhance functionality and user experience.
### Method
JavaScript (Client-side)
### Endpoint
N/A (Client-side integration)
### Parameters
#### AdyenCheckout Instance Configuration
- **onError** (function) - Global error handling function for the AdyenCheckout instance.
- **paymentMethodsConfiguration** (object) - Configuration for specific payment methods (e.g., `card`).
- **card.onError** (function) - Error handling for card payments, overrides the global `onError`.
#### Drop-in Component Configuration
- **onReady** (function) - Callback function executed when the Drop-in component is ready.
### Request Example
```javascript
const checkout = await AdyenCheckout({
onError: () => { /* Global error handling */ },
paymentMethodsConfiguration: {
card: {
onError: () => { /* Card-specific error handling */ },
}
}
});
checkout.create('dropin', {
onReady: () => { /* Drop-in ready callback */ },
});
```
### Response
N/A (Client-side rendering)
### Response Example
N/A
```
--------------------------------
### Check Content Entitlement in JavaScript
Source: https://developers.cleeng.com/docs/entitlements-example-code-snippets
This JavaScript snippet illustrates how to check content entitlements using a JWT token and Cleeng's Media Store API. It makes a GET request to the entitlements endpoint and provides feedback on access status, including a link to a payment page if access is denied. This is suitable for client-side implementations.
```javascript
const jwtToken = "your_JWT_here"; // replace with actual JWT
const offerId = "S123123123_US";
async function checkEntitlement() {
try {
const response = await fetch(
`https://mediastoreapi.cleeng.com/entitlements/${offerId}`,
{
method: "GET",
headers: {
accept: "application/json",
Authorization: `Bearer ${jwtToken}`,
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// entitlement logic
if (data.accessGranted) {
console.log("✅ Load your premium assets and content");
// e.g., document.body.innerHTML = "Welcome premium user!
";
} else {
console.log("❌ Access denied — show paywall");
console.log('Buy now');
// e.g., document.body.innerHTML = 'Buy now';
}
// Debugging
console.log("Full response:", JSON.stringify(data, null, 2));
} catch (err) {
console.error("Request failed:", err.message);
}
}
checkEntitlement();
```
--------------------------------
### Initialize Adyen Drop-in Component
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Initializes the AdyenCheckout instance with a configuration object and then creates and mounts the Drop-in component to a specified HTML element. The `onSelect` callback is required to update the order with the selected payment method ID.
```javascript
const checkout = await AdyenCheckout(configuration);
const dropinComponent = checkout.create('dropin', {
onSelect // required. You should update order with proper paymentMethodId, each time this function is called
});
dropinComponent.mount('#dropin-container');
```
--------------------------------
### Check Entitlement (JavaScript)
Source: https://developers.cleeng.com/docs/entitlements-example-code-snippets
This JavaScript example shows how to check entitlements for a given offer using a JWT token. It interacts with the Media Store API to determine content access rights.
```APIDOC
## GET /entitlements/{offerId}
### Description
Checks if the authenticated user has access to a specific offer using a JWT token.
### Method
GET
### Endpoint
`https://mediastoreapi.cleeng.com/entitlements/{offerId}`
### Parameters
#### Path Parameters
- **offerId** (string) - Required - The unique identifier for the offer.
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
const jwtToken = "your_JWT_here"; // replace with actual JWT
const offerId = "S123123123_US";
async function checkEntitlement() {
try {
const response = await fetch(
`https://mediastoreapi.cleeng.com/entitlements/${offerId}`,
{
method: "GET",
headers: {
accept: "application/json",
Authorization: `Bearer ${jwtToken}`,
},
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
// entitlement logic
if (data.accessGranted) {
console.log("✅ Load your premium assets and content");
// e.g., document.body.innerHTML = "Welcome premium user!
";
} else {
console.log("❌ Access denied — show paywall");
console.log('Buy now');
// e.g., document.body.innerHTML = 'Buy now';
}
// Debugging
console.log("Full response:", JSON.stringify(data, null, 2));
} catch (err) {
console.error("Request failed:", err.message);
}
}
checkEntitlement();
```
### Response
#### Success Response (200)
- **accessGranted** (boolean) - Indicates whether the user has access to the offer.
- **offerId** (string) - The ID of the offer.
- **expiresAt** (string) - The expiration date of the entitlement (ISO 8601 format), if applicable.
#### Response Example
```json
{
"accessGranted": true,
"offerId": "S123123123_US",
"expiresAt": "2025-01-15T10:00:00Z"
}
```
```
--------------------------------
### Install Adyen Web npm Package
Source: https://developers.cleeng.com/docs/extended-adyen-payment-setup
Installs the Adyen Web Node package required for integrating the Drop-in UI. This package provides the necessary components and functionalities for handling payments via Adyen's Drop-in interface.
```shell
npm install @adyen/adyen-web --save
```
--------------------------------
### Example Webhook Subscription with paymentMethodId Filter
Source: https://developers.cleeng.com/docs/webhooks-filtering
This example demonstrates how to structure a webhook subscription request to include a filter for a specific 'paymentMethodId'. The 'filters' field is a list, and each filter object contains a 'name' and 'options' with the 'value' to match.
```json
[
{
"url": "https://example-endpoint-with-filters.com",
"filters": [
{
"name": "paymentMethodId",
"options": {
"value": 320113641
}
}
]
}
]
```