LogoLogo
  • Transaction API
    • Overview
    • Authentication
    • Payment Methods
    • Integrations
      • POS (In-Store)
      • E-commerce
    • Payment Flows
      • Create a transaction
        • Examples for POS (In-Store)
          • Basic Payment Request
          • Payment request with products
          • Payment request with callback
          • Payment request with POS Data
          • SMS Payment Request
          • Email Payment Request
          • Payment request with invoice
          • Payment request with receipt generated by SensePass
          • Payment request with receipt generated by the POS
        • Examples for e-commerce
          • Basic Payment Request
          • iFrame Example
          • Payment request with products
          • Payment request with callback
          • Payment request with website custom data
          • SMS Payment Request
          • Email Payment Request
          • Payment request with invoice
          • Payment request with receipt generated by SensePass
          • Payment request with receipt generated by the e-commerce platform
      • Transaction status
      • Authorization
      • Tokenization
      • Subscription
        • Fetch a subscription
        • Update a subscription
        • Subscription callbacks
      • Cancel a pending transaction
      • Refund a transaction
      • Pay by Credit Card
      • Credit by Credit Card
      • Payment Commit
      • Update a Transaction
    • Other Flows
      • Tags Pairing
      • Receipts
      • Customer Input
      • Token Migration
      • Create Dynamic QR
    • Terminal Agent
      • Installation
      • Pairing
      • Usage
        • Synchronous Payment
        • Real-time product information update
        • Get Last Transaction Status
        • Get Device ID
    • Settlement
    • API Notifications
      • Socket.IO Websockets
      • Callback/Webhook
      • Post Message
    • Flow Charts
      • Payment Flow
      • Transaction Status Flow
    • SDK & iFrames
      • JavaScript UI SDK
        • API
        • Commit Transaction
        • Custom SDK Style
        • Simulator
        • Manual Capture (deprecated)
      • E-commerce iFrame
      • POS iFrame
      • Credit Card iFrame
    • Models
      • Receipts Model
      • Metadata Model
      • SDK Theme Config Model
      • SDK Credit Card Field Model
      • Invoice Model
      • Product Model
      • Payment Details Model
      • Receipt Notifications Model
      • Payment Commit Model
      • Confirmation Model
      • Settlement Model
      • Subscription Model
      • Transaction Page Model
      • Transaction Model
      • Customer Input Model
      • Settlement Report Model
      • Customer Shipping/Billing Details Model
      • Additional Data Model
    • SOAP and XML
      • SOAP
      • XML
    • Testing
    • Postman
  • Partner API
    • Models
      • Onboarding Model
      • Onboarding Configuration Pages
      • Onboarding Status Model
    • SDK & iFrames
      • Onboarding iFrame
    • Flows
      • Create onboarding
      • Get Onboarding Configuration Page
      • Onboarding status
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Transaction API
  2. SDK & iFrames
  3. JavaScript UI SDK

Custom SDK Style

style selected elements & general themes

Last updated 11 months ago

Was this helpful?

Customizing is possible only in the initial step of the configuration of SensePass's SDK client. If unfimiliar with the configuration step, refer to the step.

Customizable themes

When configuring the SDK, you may set the following code as the configuration object:

const spClient = SensePassFrontEndSDK.config({
   mode: "sandbox", // "sandbox" | "production"
   debug: true, // optional for logs
   visualizer: true, // optional visual logs, requires HTML with id="sensepass-front-end-visualizer"
   clientId: 'aee8d2cdc1cb...', // a SensePass's "clientId"
   methodType: "manual_capture", // type for the transaction, defaults to "manual_capture", enum: "manual_capture" | "tokenize"
   theme: { // optional theme for various packages
	/** angular material provides extensive documentation on customizing their theme
	* you can find it at: https://material.angular.io/guide/theming */
	material: "https://pay.sandbox.sensepass.com/publicAssets/themes/custom-sample-material.theme.css", // sample for a customized material theme
	sensepassEcommerce: "https://pay.sandbox.sensepass.com/publicAssets/themes/custom-sample-ecommerce.theme.css", // sample for a customized sensepass theme
	paymentMethodGrid: "horizontal", // horizontal | vertical style of the payment options
	config: {} // a configuration object for specific payment methods text/animations
   }
})

Download and edit the following themes you wish to style on your own:

  1. Save your themes in a hosting site of your choosing and set their URL in the config JSON.

  2. Use the SDK Theme Config Model to set you custom text and other UI configurations.

Material theme:

SensePass theme:

You may test your themes on our playground:

Config
https://pay.sandbox.sensepass.com/publicAssets/themes/material.theme.css
https://pay.sandbox.sensepass.com/publicAssets/themes/ecommerce.theme.css
https://js.sensepass.com