Flex Form Sandbox

Form not mounted yet

Provide an IPN in the setup code or use the demo plan to mount the FlexForm here.

Culture: en-US

Splitit.FlexForm.setup

Loading editor...

// Initialize FlexForm
window.Splitit.FlexForm.setup({
  container: 'flex-form-container',
  ipn: '<your-ipn>',
  culture: 'en-US',
  showOnReady: true,
  paymentButton: { isCustom: true }
});

// Apply Brand Styles (flat CSS vars on :root)
window.Splitit.FlexForm.setStyles({
  '--spt-color-primary': '#087cd0',
  '--spt-color-pay-button': '#087cd0',
  '--spt-color-pay-button-text': '#ffffff',
  '--spt-color-pay-button-disabled': '#00000033',
  '--spt-color-border-focused': '#087cd0',
  '--spt-color-border-idle': 'rgba(203, 203, 203, 0.54)',
  '--spt-color-border-error': '#ff0000',
  '--spt-color-error': '#ff0000',
  '--spt-color-text': '#000000',
  '--spt-color-labels': '#757575',
  '--spt-color-main-shade': '#e8f6fb',
  '--spt-color-link': 'rgb(125, 166, 222)',
  '--spt-color-warning': 'rgb(245, 158, 11)',
  '--spt-color-warning-border': '#fcd34d',
  '--spt-color-warning-bg': '#fef3c7',
  '--spt-color-warning-text': '#9a3412',
  '--spt-color-info-holder': 'rgba(8, 124, 208, 0.15)',
  '--spt-color-card-bg': '#ffffff',
  '--spt-color-linear-gradient-from': 'linear-gradient(277deg, rgba(8, 124, 208, 0) -0.85%, rgba(8, 124, 208, 0.15) 100%), var(--card-primary, #fff)',
  '--spt-color-linear-gradient-to': 'linear-gradient(277deg, rgba(8, 124, 208, 0.15) -0.85%, rgba(8, 124, 208, 0) 100%), var(--card-primary, #fff)'
});

Callback Log

No callbacks yet. Initialize FlexForm to see events.