Plexy
Pay API
Gate APISDKDashboard
Pay API
Gate APISDKDashboard
  1. Web
  • Overview
  • Authorization
  • Webhooks
  • API Errors
  • Test Scenarios
  • Ecommerce Plugins
  • API
    • Payments
      • Overview
      • Transaction Errors
      • Payment Links
        • Create Payment Link
        • List Payment Links
        • Retrieve Payment Link by Order Reference
        • Cancel Payment Link
        • Retrieve Payment Link
        • Update Payment Link Expiration
        • Retrieve Payment Links Statistics
      • Reccurent Payments
        • Create Merchant-Initiated Payment
      • Direct Payments
        • Get Keys
        • Create Host-to-Host Payment
      • Transaction Management
        • Find Transaction's History by ID
        • Find Transaction by Payment Link ID
        • Find Transaction by ID
        • Find Transaction by Order reference
      • Payment Management
        • Cancel Payment
        • Capture Payment
        • Process Refund
      • Split Requests
        • Create
        • List
        • Update
        • Get By Id
        • Delete
    • Payouts
      • Retrieve Payout Transactions
      • Process Payout
      • Save Card for Payouts
    • Customers
      • Get Customer's Card Tokens
      • List Customers
      • Create Customer
      • Get Customer by ID
      • Get Customer's Transactions
    • Merchants
      • Payment Beneficiary
        • Create
        • Update
        • Gey By Id
        • List
        • Transfer from beneficiary balance to merchant balance
        • Create manual settlement for beneficiary
      • Retrieve Merchant's Details
    • Wallet
      • Authorize
      • Сapture
      • Refund
      • Cancel
    • Payment Methods
      • Google Pay™ Integration
    • Invoice
      • List Bank Invoices
      • Create Bank Invoice
      • Get Bank Invoice
    • Distributions
      • Create distribution
      • List distributions
      • Get distribution by ID
      • Get distributions balance
  • Client SDK
    • 00-sdk-overview
    • Server flow
      • Session server flow
    • Web
      • Web Drop-in
      • Web iFrame
      • 11-web-drop-in
      • 10-web-sdk
      • 12-web-components
      • 13-web-customization
    • Flutter
      • Flutter Drop-in
      • Plexy SDK for Flutter
    • React Native
      • Drop-in and Components
    • Wallets
      • Apple Pay Web SDK Integration
      • Apple Pay Moible Integration
      • Google Pay Integration
  • apidog-sdk-docs
  • Schemas
    • Schemas
      • response.TransactionList
      • entity.SplitRequest
      • entity.PaymentBeneficiary
      • request.CreatePaymentBeneficiary
      • entity.SettlementPaymentOrder
      • entity.PayoutRequest
      • entity.PayoutRequestRowData
      • entity.UserProfile Copy
      • entity.Store
      • request.AssignStoreToUser
      • request.RemoveStoreFromUser
      • entity.AccountExternalSystem
      • response.AssignStoreToUser
      • request.CreateStore
      • response.Store
      • response.UserList
      • request.WalletAuthorizeRequest
      • entity.ShortWalletTransaction
      • response.WalletAuthorizeResponse
      • request.WalletCapture
      • response.RemoveStoreFromUser
      • command.HandleThreeDResult
      • domain.Report
      • entity.CardSaveSessionCustomer
      • entity.Permission
      • entity.UserProfile
      • entity.UserRole
      • git_plexypay_com_ecom_back_api_internal_domain_view.Page-domain_Report
      • git_plexypay_com_ecom_back_api_internal_domain_view.Page-entity_UserProfile
      • models.CSVApiRequest
      • models.CreateBussinessDetails
      • models.KeyResponse
      • models.OnboardingRequest
      • models.Transaction
      • paymentcore.Address
      • paymentcore.CustomerDetails
      • request.AuthorizePayment
      • request.BrowserDetails
      • request.CardData
      • request.ChangeUserRole
      • request.ContinueThreeDS
      • request.CreateCardSaveSession
      • request.CreateInviteSession
      • request.CreatePaymentLink
      • request.CreatePaymentLinkMetadata
      • request.HandlePayout
      • request.MerchantInitiatedPayment
      • request.PasswordRequest
      • request.Recurring
      • request.RefundPayment
      • request.SaveCard
      • request.SaveOneCustomer
      • request.TwoStepAuthorizePayment
      • request.UpdateMerchantSettingsRequest
      • request.UpdatePaymentLink
      • response.AcquirerResponseThreeDSecure
      • response.AuthorizeAndCapturePayment
      • response.AuthorizePayment
      • response.CancelPaymentResponse
      • response.CapturePaymentResponse
      • response.ContinueThreeDS
      • response.Currency
      • response.Customer
      • response.CustomerTransaction
      • response.CustomerTransactions
      • response.Customers
      • response.Merchant
      • response.MerchantInitiatedPayment
      • response.MerchantSettings
      • response.PaymentLink
      • response.PaymentLinkInfo
      • response.PaymentLinkMetadata
      • response.PaymentLinksInfo
      • response.PaymentLinksStatistics
      • response.PaymentLinksStatisticsItem
      • response.Payout
      • response.Permission
      • response.RefundPaymentResponse
      • response.Report
      • response.SavedCard
      • response.Session
      • response.Settlement
      • response.SettlementTransaction
      • response.Store
      • response.Stores
      • response.Transaction
      • response.TransactionDetails
      • response.TransactionEvents
      • response.TransactionHistoryEvent
      • response.TransactionHistoryEventData
      • response.TransactionResponse
      • response.TransactionWebhookDetails
      • response.Transactions
      • response.UpdateMerchantSettingsResponse
      • response.UserProfile
      • value.PaymentMethod
    • receipt
    • Error
    • response.BankInvoice
    • DistributionStatus
    • DecimalAmount
    • errors.Source
    • Currency
    • ProductType
    • errors.Message
    • DistributionRecipient
    • ProductCategory
    • request.CreateBankInvoice
    • DistributionCreateRequest
    • Product
    • git_plexypay_com_ecom_back_api_internal_platform_errors.Code
    • DistributionBase
    • response.Error
    • Order
    • DistributionCreatedResponse
    • AgentBalance
    • response.BankInvoiceList
    • DistributionDetailResponse
    • AgentDeposit
    • errors.Type
    • DistributionListItem
    • TopupRequest
    • DistributionListResponse
    • CreateOrderRequest
    • DistributionBalanceResponse
  1. Web

13-web-customization

Customization#

Customization
Theme the Plexy checkout, override per-method appearance, and customize the flow
Original source: https://plexy.money/docs/sdks/web/customization.
There are different customizations you can apply to make the Plexy checkout match your app's look and feel. The most common are: theming via CSS variables, configuring per-payment-method appearance, modifying the default flow with callbacks, layering additional CSS, and setting the shopper locale.

Theme#

Override CSS variables on the .plexy-checkout root class to match your brand:
Scope the override to a parent selector if you render multiple checkouts with different themes on the same page.

Per-payment-method appearance#

The same paymentMethodsConfiguration object that configures behavior in Configuring Drop-in also accepts appearance keys. Adjust labels and visual styling per payment method:
Keys are payment-method identifiers; values are the per-method config supported by each component.

Custom checkout callbacks#

Use beforeSubmit and onSubmit on CoreConfiguration to modify the default flow. beforeSubmit runs before the SDK submits a payment — use it to inspect or augment the request. onSubmit (Advanced flow) hands the request to your own backend.

Additional CSS#

Layer your own stylesheet on top of Plexy's defaults by importing it after the SDK CSS:
Import order matters — your stylesheet must come after Plexy's so its rules win specificity ties.

Localization#

Pass locale on CoreConfiguration:
The SDK falls back to English when the requested locale is not supported.
Modified at 2026-07-01 13:27:54
Previous
12-web-components
Next
Flutter
Built with