Jazz SDK

The Jazz SDK Integration offers a secure, PCI-compliant payment solution that seamlessly embeds payment forms within your checkout page using iframes. This SDK simplifies payment processing by securely managing card details, CVV verification, and encryption — ensuring compliance with the highest industry standards.

1. Secure Card Input

  • Card data is captured through secure iframes (PCI compliant).

  • Real-time validation for card number, expiry, and CVV.

  • All data is encrypted before transmission.

2. Payment Processing

  • Supports 3D Secure authentication.

  • Built-in error handling with clear user messages.

3. Security

  • Isolated iframes prevent external access.

  • No raw card data exposed to your servers.

  • Encrypted communication and full PCI DSS compliance.

The Jazz SDK establishes secure iframes for all card and CVV input fields. It manages:

  • Data encryption and validation

  • Secure communication with the Ottu Payment Gateway

  • Real-time payment authorization and 3D Secure flows

When a payment method is configured to utilize the Jazz SDK, the SDK is automatically loaded and initialized, eliminating the need for additional setup code on the merchant’s side.

When integrating the Checkout SDK on your own website, it is critical to implement proper security measures to ensure safe and compliant payment processing. The following configurations are essential for maintaining the security and functionality of the SDK.

Content Security Policy is a critical security layer that helps prevent Cross-Site Scripting (XSS), clickjacking, and other code injection attacks. Since Jazz SDK operates using secure iframes for payment processing, your CSP configuration must be properly configured to allow the SDK to function while maintaining security.

When integrating Jazz SDK, your application will:

  • Load the SDK script from Ottu's CDN

  • Create sandboxed iframes for secure card data entry

  • Communicate between your page and payment iframes via postMessage

  • Submit encrypted payment data to Ottu's payment endpoints

Add the following Content-Security-Policy header to your server responses:

default-src 'self'
  https://sdkstudio.ottu.net
  https://ottu.sentry.io
  https://o1152525.ingest.sentry.io
  https://assets.ottu.net
  https://www.google.com/pay
  https://google.com/pay
  https://pay.google.com
  https://cdn.tamara.co
  *.mastercard.com
  https://pg.ottu.net
  https://applepay.cdn-apple.com
  https://api.doku.com
  https://jokul.doku.com
  https://checkout.doku.com ;

script-src 'self'
  https://assets.ottu.net
  https://pay.google.com/gp/p/js/pay.js
  https://cdn.tamara.co
  https://applepay.cdn-apple.com
  https://www.google-analytics.com
  https://www.googletagmanager.com
  https://doku.com
  https://jokul.doku.com
  https://checkout.payway.com.kh ;

img-src 'self'
  https://assets.ottu.net
  https://www.gstatic.com
  https://cdn.tamara.co
  https://applepay.cdn-apple.com
  https://cdn-doku.oss-ap-southeast-5.aliyuncs.com
  https://doku.com
  https://cdn-dev.oss-ap-southeast-5.aliyuncs.com
  https://jokul.doku.com
  https://checkout.payway.com.kh ;

style-src 'self'
  https://assets.ottu.net
  https://fonts.googleapis.com/css2
  https://fonts.googleapis.com/css
  https://fonts.googleapis.com/icon
  https://use.fontawesome.com/releases/v5.0.13/css/all.css
  https://use.fontawesome.com
  https://cdn-dev.oss-ap-southeast-5.aliyuncs.com
  https://doku.com
  https://jokul.doku.com
  https://cdn-doku.oss-ap-southeast-5.aliyuncs.com
  https://checkout.payway.com.kh
  'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='
  'sha256-HcB32D63QxbHF81G9ir4A4ZtfSFlntT1ZUYUPKNuzfI='
  'sha256-XFkw0G+TegrSc+c2xpN6s1twW+i1BZK0XuiSfXt6Fww='
  'sha256-zhyeDlZTEKZvKgtxHpxj4ydFABucKb8zpjZLFzOborc='
  'sha256-leLzbVxZAzOi3vU/QL+Ol4qnwxlwA0nSPFZDP71A4Kk='
  'sha256-+nBMdvSYKNhRLWZxyIQfhXxYP6BG9piQYOZeietLNXU='
  'sha256-mQ4LZTkAl1QYJkeyaT4nVx0YDeQ9WOH9k4ajt5PFvNU='
  'sha256-6wRVrNhL9s89Qn7wD4XQ6y1ylmr/e3rZn3CdccovJkY='
  'sha256-K+ieRIsw0lmpGioUMKoNwTvoTLLftfHgEPam0don0p4='
  'sha256-1OZiLbeh1cr3+++OrCQ1R79GYVDS8hja9GEE9lqeVDg=' ;

font-src 'self'
  https://use.fontawesome.com
  https://fonts.gstatic.com
  https://assets.ottu.net
  https://applepay.cdn-apple.com
  https://doku.com
  https://cdn-dev.oss-ap-southeast-5.aliyuncs.com
  https://cdn-doku.oss-ap-southeast-5.aliyuncs.com
  https://jokul.doku.com
  https://checkout.payway.com.kh
  blob: ;

frame-src 'self'
  https://applepay.cdn-apple.com
  *.mastercard.com
  https://pg.ottu.net
  https://pay.google.com
  https://cdn.tamara.co
  https://jokul.doku.com
  https://checkout.payway.com.kh ;

connect-src 'self'
  https://sdkstudio.ottu.net
  https://ottu.sentry.io
  https://o1152525.ingest.sentry.io
  https://assets.ottu.net
  https://sso.ottu.net
  https://checkout.payway.com.kh
  https://www.google.com/pay
  https://google.com/pay
  https://pay.google.com
  https://www.google-analytics.com
  https://www.googletagmanager.com
  https://cdn.tamara.co
  *.mastercard.com
  https://pg.ottu.net
  https://applepay.cdn-apple.com
  https://api.doku.com
  https://jokul.doku.com
  https://checkout.doku.com
  https://doku.com
  https://fastly.jsdelivr.net/npm/single-spa@5.9.5/lib/system/single-spa.min.js.map
  wss://wsprd01.ottu.net ;

CSP Directive Breakdown

Directive
Purpose

script-src

Allows SDK scripts to load and execute

frame-src

Permits creation of payment iframes from Ottu domains

connect-src

Enables API calls to Ottu payment endpoints

style-src

Allows SDK styling and theme customization

The Jazz SDK supports complete customization via CSS through the theme parameter within the Checkout.init configuration. Developers can modify input fields, containers, and borders to align with their brand identity. More details with examples can be found in the Theming section.

Class Name
Description

card-input-fields

Styles the card number and expiry input fields

cvv-input

Styles the CVV input field

card-background

Styles the background container of the card form

card-input-border

Styles the border and shadow of input containers

cvv-input-placeholder

Styles the cvv input placeholder.

cvv-input-fields-placeholder

Styles the card fields placeholder.

error-message

Styles the error message text

fields-error-border

Styles the border in the case of error message in card form

Last updated