Flourish Payments SDK

Version 1.2.0 | Config-driven payment SDK built on Vue 3 + PrimeVue + Stripe

The Flourish Payments SDK lets you embed a multi-step payment form on any webpage. You define screens, fields, pricing logic, and text through a single configuration object — no framework code required.

Quick Start

1. Include the Dependencies

Add the following scripts and stylesheet to your HTML page. The SDK depends on Vue 3, PrimeVue, and Stripe.js.

<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- PrimeVue -->
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>

<!-- Stripe.js -->
<script src="https://js.stripe.com/v3/"></script>

<!-- Flourish Payments SDK -->
<script src="https://cdn.arquera.cloud/payments-client.js"></script>
<link  rel="stylesheet" href="https://cdn.arquera.cloud/payments-client.css" />

2. Add a Mount Point

<div id="app"></div>

3. Initialize the SDK

<script>
  FLPayments.create('#app', {
    screens: [
      {
        id: 'donate',
        sections: [
          {
            fields: [
              {
                name: 'amount',
                type: 'preset-amount',
                label: 'Choose an amount',
                presets: [25, 50, 100, 250],
                allowCustom: true,
                customLabel: 'Or enter a custom amount',
                required: true
              }
            ]
          }
        ]
      },
      { id: 'review', role: 'submit', sections: [{ type: 'summary', rows: [{ key: 'totalAmount', label: 'Total', format: 'currency', emphasis: true }] }] },
      { id: 'pay', role: 'checkout', sections: [{ type: 'checkout' }] },
      { id: 'done', sections: [{ type: 'confirmation' }] }
    ],
    text: {
      title: 'Make a Donation',
      description: 'Your support makes a difference.'
    }
  });
</script>

Configuration Reference

All options are passed as the second argument to FLPayments.create(selector, config).

`screens`

An array of screen objects that define the multi-step flow. Each screen has:

Property	Type	Description
`id`	`string`	Required. Unique identifier for the screen.
`role`	`string`	Optional. Controls screen behavior. See Screen Roles.
`sections`	`array`	Array of section objects displayed on this screen.

Screen Roles

Role	Behavior
(none)	Default. Validates visible fields, then advances to the next screen.
`submit`	Validates, builds the checkout payload, and sends it to the payments connector (Salesforce).
`checkout`	Mounts the Stripe Embedded Checkout using the client secret returned from the submit step.

The last screen in the array is treated as the final screen (no Next button is shown).

Sections

Each section is an object inside a screen's sections array. The type property determines how the section renders.

`fields` (default)

Renders a form with input fields. If type is omitted and a fields array is present, this is the default.

{
  label: 'Contact Information',     // optional heading
  description: 'We need this...',   // optional description text
  columns: 2,                       // optional: 2-column grid layout
  fields: [ /* field objects */ ],
  showWhen: function (formState) { return formState.type === 'individual'; } // optional
}

`summary`

Displays a read-only summary table of pricing values.

{
  type: 'summary',
  rows: [
    { key: 'baseAmount',  label: 'Subtotal',          format: 'currency' },
    { key: 'feeAmount',   label: 'Processing Fee',    format: 'currency' },
    { key: 'totalAmount', label: 'Total',              format: 'currency', emphasis: true }
  ]
}

Each key maps to a property in the computed pricing state.

`content`

Renders plain text or raw HTML.

{ type: 'content', text: 'Thank you for your generosity.' }
// or
{ type: 'content', html: '<p>Visit <a href="...">our site</a> for more info.</p>', class: 'my-class' }

`image`

Displays an image with an optional caption.

{ type: 'image', src: 'https://example.com/photo.jpg', alt: 'Photo', caption: 'Our team' }

`divider`

Renders a horizontal rule.

{ type: 'divider' }

`alert`

Displays a callout/alert box.

{ type: 'alert', text: 'Payments are non-refundable.', severity: 'warn' }
// severity: 'info' (default), 'warn', 'error'
// Can also use `html` instead of `text`.

`checkout`

Mounts the Stripe Embedded Checkout element. Use on a screen with role: 'checkout'.

{ type: 'checkout' }

`confirmation`

Shows a success message after payment completes. Displays the configured confirmation image, heading, and description.

{ type: 'confirmation' }

`payments`

Renders payment line items received from the Salesforce connector. The display adapts automatically based on the paymentModel returned by the connector. See Payment Models.

{ type: 'payments' }

`custom`

Renders a custom Vue component registered via FLPayments.registerComponent().

{ type: 'custom', component: 'my-SDK', props: { color: 'blue' } }

Conditional Sections

Any section can include a showWhen function to control visibility:

{
  type: 'alert',
  text: 'A fee will be added.',
  severity: 'info',
  showWhen: function (formState) { return formState.coverFee === true; }
}

Field Types

Fields are defined inside a fields section. Every field requires a name (string) that maps to a key in the form state.

Common Field Properties

Property	Type	Description
`name`	`string`	Required. Key in the form state.
`label`	`string`	Display label above the field.
`placeholder`	`string`	Placeholder text.
`required`	`boolean` or `function`	Whether the field is required. Can be a function: `function(formState, pricingState) { ... }`
`defaultValue`	`any`	Initial value for the field.
`errorMessage`	`string`	Custom validation error message.
`showWhen`	`function`	Conditional visibility: `function(formState, pricingState) { return true/false; }`
`span`	`number`	Set to `2` to span full width in a 2-column grid.

`preset-amount`

Preset amount buttons with an optional custom input.

{
  name: 'amount',
  type: 'preset-amount',
  label: 'Select Amount',
  presets: [25, 50, 100, 250],
  presetLabels: { '25': 'Student - $25' },   // optional custom button labels
  defaultSelected: 50,                        // optional default selection
  allowCustom: true,                          // show a custom amount input
  customLabel: 'Custom Amount',
  customPlaceholder: 'Enter amount',
  min: 1,                                     // minimum custom amount
  required: true
}

`text`

A standard text input.

{ name: 'fullName', type: 'text', label: 'Full Name', required: true }

`email`

A text input with email format validation.

{ name: 'email', type: 'email', label: 'Email Address', required: true }

`currency`

A formatted currency input.

{ name: 'otherAmount', type: 'currency', label: 'Amount', min: 0 }

`textarea`

A multi-line text area.

{ name: 'notes', type: 'textarea', label: 'Notes', rows: 4, placeholder: 'Optional...' }

`select`

A dropdown select.

{
  name: 'fund',
  type: 'select',
  label: 'Designation',
  placeholder: 'Select a fund...',
  options: [
    { label: 'General Fund', value: 'general' },
    { label: 'Scholarship', value: 'scholarship' }
  ],
  optionLabel: 'label',   // default: 'label'
  optionValue: 'value',   // default: 'value'
  required: true
}

`radio`

A radio button group with optional descriptions.

{
  name: 'frequency',
  type: 'radio',
  label: 'Giving Frequency',
  options: [
    { label: 'One-Time', value: 'once', description: 'A single gift' },
    { label: 'Monthly',  value: 'monthly', description: 'Recurring each month' }
  ],
  required: true
}

`checkbox`

A single checkbox (boolean toggle).

{ name: 'coverFee', type: 'checkbox', checkboxLabel: 'I\'d like to cover the processing fee' }

`text`

Customize all user-facing labels and messages.

text: {
  title: 'Make a Payment',
  description: 'Complete the form below.',
  paymentDescription: 'Enter your card details.',
  confirmationImage: 'https://example.com/success.png',
  confirmationHeading: 'Payment Complete',
  confirmationDescription: 'Thank you for your payment.',
  nextButton: 'Continue',
  finishButton: 'Submit Payment',
  backButton: 'Go Back',
  connectorLoading: 'Loading secure payment system...',
  connectorTimeout: 'Payment system is unavailable. Please try again later.',
  connectorMissingSettings: 'Payment system is not configured. Please contact the administrator.'
}

All properties are optional and have sensible defaults.

`pricing`

Controls how the payment amount is calculated.

pricing: {
  mode: 'singleAmount',        // 'singleAmount' or 'external'
  currency: 'usd',             // ISO 4217 currency code
  amountFieldName: 'amount',   // which form field holds the base amount
  adjustments: [
    {
      enabled: true,
      type: 'percentage',
      baseKey: 'baseAmount',       // pricing state key to calculate from
      targetKey: 'feeAmount',      // pricing state key to write the result to
      percent: 0.03,               // 3% fee
      applyWhen: function (formState) { return formState.coverFee === true; }
    }
  ]
}

Pricing State

The SDK computes the following pricing state values automatically (in singleAmount mode):

Key	Description
`baseAmount`	The selected or entered amount.
`subtotal`	Same as `baseAmount` before adjustments.
`feeAmount`	Calculated fee (from adjustments).
`totalAmount`	`baseAmount` + all adjustment totals.

In external mode, pricing values are managed externally via pricingDefaults or hooks.

`connector`

Settings for the Salesforce payments connector (LWC iframe).

connector: {
  timeoutMs: 10000,   // milliseconds to wait for the connector to respond
  disabled: false      // set true to skip the connector (for testing)
}

`payload`

Controls how the checkout payload is sent to the backend.

payload: {
  method: 'createCheckoutSession',   // the Apex method name to invoke
  staticValues: {                     // merged into every payload (overrides form values)
    campaignId: '701xx000000abcd',
    recordTypeId: '012xx000000efgh'
  }
}

The payload is built by merging: form fields + pricing values (converted to cents) + payment selections + staticValues.

`state`

Set initial values for the form and pricing state.

state: {
  defaults: {                // initial form field values
    frequency: 'once',
    coverFee: false
  },
  pricingDefaults: {         // initial pricing state (for 'external' mode)
    baseAmount: 0,
    totalAmount: 0
  }
}

`stripe`

Stripe-specific settings.

stripe: {
  mountSelector: '#fl-checkout'   // CSS selector for the Stripe checkout mount point
}

The publishableKey is provided automatically by the connector; you do not need to set it manually.

`features`

Toggle SDK behaviors.

features: {
  allowBackNavigation: true   // show/hide the Back button
}

`validation`

validation: {
  requireAmount: true   // require a non-zero amount before proceeding
}

`theme`

Customize the SDK's appearance.

theme: {
  stylesheetUrl: 'https://example.com/my-theme.css',   // external stylesheet (overrides defaults)
  css: ':host { --flpay-brand: #e63946; }'              // inline CSS (highest priority)
}

Available CSS Variables

Variable	Default	Description
`--flpay-brand`	`#0176d3`	Primary brand color (buttons, links)
`--flpay-brand-hover`	`#014486`	Button hover color
`--flpay-brand-active`	`#032d60`	Button active/pressed color
`--flpay-surface`	`#ffffff`	Card background
`--flpay-border`	`#c9c9c9`	Border color
`--flpay-text`	`#181818`	Primary text color
`--flpay-text-muted`	`#5c5c5c`	Secondary/muted text
`--flpay-radius-md`	`6px`	Card border radius

The SDK renders inside a Shadow DOM, so your page's CSS will not leak in. Use the theme config to apply custom styles.

`hooks`

Lifecycle hooks let you run custom logic at key moments in the flow.

hooks: {
  beforeValidate: function (context) {
    // Runs before field validation. `context` contains formState, pricingState, config, etc.
  },
  afterValidate: function (context) {
    // Runs after validation passes.
  },
  beforePayloadBuild: function (context) {
    // Runs before the payload is assembled.
  },
  transformPayload: function (payload, context) {
    // Modify the payload before it's sent. Return the modified payload.
    payload.customField = 'value';
    return payload;
  },
  onPaymentResponse: function (response, context) {
    // Runs after a successful payment response from the backend.
  },
  onError: function (error, context) {
    // Runs when an error occurs.
  }
}

Hook Context Object

Every hook receives a context object with:

Property	Description
`config`	The full SDK configuration.
`currentScreen`	ID of the active screen.
`formState`	Current form field values.
`pricingState`	Computed pricing values.
`customData`	A shared object for storing arbitrary data across hooks.
`selectedPresetAmount`	The currently selected preset amount (if any).
`vm`	The Vue component instance (advanced use).

`paymentsLwc`

Advanced. Settings for the Salesforce LWC iframe communication layer.

paymentsLwc: {
  siteUrl: 'https://your-salesforce-site.force.com/payments',
  iframeId: 'lwc-iframe',
  wrapperSelector: '.lwc-iframe-wrapper'
}

Payment Models

When the SDK connects to a Salesforce backend, the connector may return a paymentModel that determines how amounts are displayed. The payments section type adapts automatically.

Model	Behavior
Opportunity Only	Displays a single read-only amount from the Opportunity record.
Summed Payments	Lists all payment line items as read-only rows with a calculated total.
Selective Payments	Checkbox list — the user selects which payments to include. All are pre-selected by default.
Dynamic Payments	Editable amount inputs — the user can enter a partial payment for each line item (up to the balance remaining).

URL Parameters

Pre-fill Form Fields

Form fields can be pre-populated from URL query parameters using the flpaypre_ prefix.

https://example.com/donate?flpaypre_email=jane@example.com&flpaypre_fullName=Jane+Doe

This sets formState.email to jane@example.com and formState.fullName to Jane Doe.

Payment Context Parameters

These parameters are read by the Salesforce connector LWC to load an existing Opportunity:

Parameter	Description
`flpayoid`	Opportunity ID — loads the Opportunity's payment model, amount, and child payments.
`flpaypid`	Payment record ID — tracks the Stripe session against a specific NPSP/NPC payment record.

See Existing Opportunity Payments for details.

Custom Components

FLPayments.registerComponent('donation-thermometer', {
  props: ['section', 'formState', 'pricingState', 'customData', 'config'],
  template: '<div class="thermometer">{{ pricingState.totalAmount }}</div>'
});

FLPayments.create('#app', {
  screens: [{
    id: 'main',
    sections: [
      { type: 'custom', component: 'donation-thermometer' }
    ]
  }]
});

Custom components receive these props automatically: section, formState, pricingState, customData, config, plus any additional props defined in section.props.

Salesforce Setup (Custom Metadata)

The SDK connects to Salesforce through the Flourish Payments Setting custom metadata type (FL_Payments__mdt). A single record named global stores all org-wide configuration. This must be configured before the SDK can process payments.

Accessing the Settings

In Salesforce Setup, navigate to:

Setup > Custom Metadata Types > Flourish Payments Setting > Manage Records > global

If the global record does not exist yet, click New and set the Label and DeveloperName both to global.

Settings Fields

Field	Type	Description
Stripe Public Key (`Stripe_Public__c`)	Text	Your Stripe publishable key (starts with `pk_live_` or `pk_test_`). Sent to the browser to initialize Stripe.js.
Stripe Secret Key (`Stripe_Secret__c`)	Text	Your Stripe secret key (starts with `sk_live_` or `sk_test_`). Used server-side by Apex to create Checkout Sessions and process payments. Never expose this value client-side.
Stripe Webhook Secret (`Webhook_Secret__c`)	Text	Stripe webhook signing secret (starts with `whsec_`). Used to verify that incoming webhook events are genuinely from Stripe. See Webhook Setup.
Public Connector URL (`Public_Connector_URL__c`)	URL	The public URL of the Salesforce Experience Cloud site hosting the payments connector LWC. This is the `paymentsLwc.siteUrl` value used by the SDK.
Opportunity Record Type (`Opportunity_Record_Type__c`)	Text	Developer name of the Opportunity record type to use when creating payment records (e.g., `Donation`). Leave blank to use the org's default record type.
Default Opportunity Stage (`Default_Opportunity_Stage__c`)	Text	Stage name assigned to new Opportunities created by the SDK (e.g., `Pledged`). If blank, the org's first available stage is used as a fallback.
Pricing Flow Name (`Pricing_Flow_Name__c`)	Text	API name of an Autolaunched Flow for custom server-side pricing. Leave blank to use standard pricing. See Pricing Flows.

How the SDK Uses These Settings

SDK loads — The SDK renders on the page and opens a hidden iframe to the Public_Connector_URL__c site. If the URL contains flpayoid or flpaypid query parameters, the connector loads the existing Opportunity and payment context.
Connector handshake — The LWC inside the iframe calls getConnectorInit(), which reads Stripe_Public__c from the metadata, loads any payment context (payment model, line items, balances), and sends it all back to the SDK via a payments__connect message.
Checkout submission — When the user submits the form, the SDK posts the payload to the LWC iframe. Apex computes the authoritative charge amount server-side (see Server-Side Pricing), creates or updates the Salesforce records (Contact, Account, Opportunity), and calls Stripe to create a Checkout Session. The clientSecret is returned to the SDK.
Stripe Checkout — The SDK mounts Stripe Embedded Checkout using the client secret.
Webhook fulfillment — After payment, Stripe sends a webhook to your org. Apex verifies the signature using Webhook_Secret__c and updates the Opportunity stage to Closed Won (or Closed Lost on failure). See Webhook Setup.

Opportunity Configuration

The SDK creates Opportunity records to track payments. Two metadata fields control how those records are created:

Record Type — Set Opportunity_Record_Type__c to the developer name of your desired record type. This is useful when your org has multiple record types (e.g., Donation, Tuition_Payment). To find the developer name: Setup > Object Manager > Opportunity > Record Types.
Default Stage — Set Default_Opportunity_Stage__c to the stage name that new payment Opportunities should start at. This should be a valid stage in the record type's sales process.

Payment Models

Each Opportunity can use a different payment model, controlled by the pay_Payment_Model__c picklist field on the Opportunity record. This determines how the SDK's payments section renders:

Picklist Value	Behavior
Opportunity Only	Collects a single payment for the Opportunity amount. No line items displayed.
Summed Payments	Displays all related Payment records as read-only line items. The user pays the full total.
Selective Payments	Displays Payment records as checkboxes. The user selects which ones to pay. All are pre-selected by default.
Dynamic Payments	Displays Payment records with editable amount inputs. The user enters a partial or full amount for each (up to the balance remaining).

The package adds these fields to support payment tracking:

Opportunity:

Field	Type	Description
`pay_Payment_Model__c`	Picklist	Controls the payment collection mode (see above). Values: `Opportunity Only`, `Summed Payments`, `Selective Payments`, `Dynamic Payments`. Leave blank for client-driven amount flows (donations, memberships).
`pay_Stripe_Sync__c`	Long Text	JSON tracking Stripe session status, payment intents, and completion. Managed automatically — do not edit manually.
`pay_Custom_Data__c`	Long Text	JSON of custom form data captured from the SDK. Any form field that is not a recognized system field (like `email`, `amount`, `firstName`, etc.) is automatically captured here. Useful for consuming via triggers or flows for custom field mapping.

Contact:

Field	Type	Description
`pay_Stripe_Customer_Id__c`	Text (External ID)	Links the Contact to their Stripe Customer ID. The package creates or matches Contacts by email and stores the Stripe Customer ID automatically.

Salesforce Ecosystem Compatibility

The package automatically detects and supports three Salesforce environments:

Environment	How It's Detected	Payment Record Behavior
Vanilla Salesforce	Default	Opportunity only — no child payment records.
NPSP (Nonprofit Success Pack)	`npe01__OppPayment__c` object exists	Reads unpaid NPSP Payment records for payment models. Marks payments as Paid (`npe01__Paid__c = true`) on completion. Creates Account-Contact affiliations (`npe5__Affiliation__c`).
Nonprofit Cloud (Industries)	`Payment` standard object exists	Reads Payment records with non-Paid status. Updates `Status` to `Paid` on completion.

No configuration is needed — the package adapts automatically based on what's installed in your org.

Server-Side Pricing

The SDK displays pricing to the user on the client, but the server always computes the authoritative charge amount before creating a Stripe Checkout Session. This prevents price tampering. The server uses this priority order:

Pricing Flow — If Pricing_Flow_Name__c is set in the custom metadata, the named Flow is invoked. See Pricing Flows.
Payment Model — If the Opportunity has a pay_Payment_Model__c value, the amount is computed from the Opportunity or its child Payment records (based on the model type and any user selections).
Client Amount — If neither of the above applies, the server uses the amount submitted by the SDK (converted to cents).

An optional feeAmount from the SDK payload is added on top of the computed base amount.

Pricing Flows

For advanced pricing logic, you can delegate charge calculation to a Salesforce Autolaunched Flow. Set the Pricing_Flow_Name__c field on the FL_Payments__mdt record to the Flow's API name.

Flow requirements:

Direction	Variable Name	Type	Description
Input	`payload`	Text	JSON string containing all form fields and metadata submitted by the SDK.
Output	`amountInCents`	Number (Integer)	Required. The total charge amount in cents (e.g., `5000` for $50.00).
Output	`pricingBreakdown`	Text	Optional. A JSON string with pricing details for record-keeping (stored in `pay_Custom_Data__c`).

Example use cases:

Look up tuition rates from a custom object based on the student's program
Apply tiered or volume-based discounts
Calculate prorated amounts based on enrollment date
Enforce org-specific minimum/maximum payment rules

Webhook Setup

To receive payment status updates from Stripe, configure a webhook endpoint in your Stripe Dashboard.

1. Get Your Endpoint URL

The webhook endpoint is your Salesforce org's REST API base URL plus the package path:

https://YOUR-ORG.my.salesforce.com/services/apexrest/payments/webhook

For Experience Cloud (Community) sites, use the community-scoped URL:

https://YOUR-COMMUNITY.force.com/SITE_PATH/services/apexrest/payments/webhook

2. Configure in Stripe Dashboard

Go to Stripe Dashboard > Developers > Webhooks
Click Add endpoint
Enter your endpoint URL
Select these events:
- checkout.session.completed
- checkout.session.async_payment_succeeded
- checkout.session.async_payment_failed
- checkout.session.expired
Click Add endpoint
Copy the Signing secret (starts with whsec_)

3. Save the Signing Secret

Paste the signing secret into the Stripe Webhook Secret (Webhook_Secret__c) field on your FL_Payments__mdt global record.

What the Webhook Does

Stripe Event	Result in Salesforce
`checkout.session.completed` (paid)	Opportunity stage set to Closed Won. Payment record marked Paid (NPSP/NPC).
`checkout.session.completed` (unpaid)	Sync entry marked as processing (for async payment methods like bank transfers).
`checkout.session.async_payment_succeeded`	Opportunity stage set to Closed Won.
`checkout.session.async_payment_failed`	Opportunity stage set to Closed Lost. Error recorded in sync JSON.
`checkout.session.expired`	Sync entry marked as expired.

Existing Opportunity Payments

The SDK can collect payment for an existing Opportunity instead of creating a new one. Pass the Opportunity ID (and optionally a Payment record ID) via URL query parameters:

https://example.com/pay?flpayoid=006xx000000abcd

Or to target a specific payment record:

https://example.com/pay?flpayoid=006xx000000abcd&flpaypid=a0Bxx000000efgh

Parameter	Description
`flpayoid`	The Salesforce Opportunity ID. The connector loads the Opportunity's payment model, amount, and child payment records.
`flpaypid`	Optional. A specific Payment record ID (NPSP or Nonprofit Cloud). When provided, the Stripe session is tracked at the payment-record level.

When these parameters are present, the connector sends the full payment context to the SDK during the handshake, and the payments section type renders the appropriate UI based on the Opportunity's pay_Payment_Model__c value.

Custom Data Capture

Any form field that is not a recognized system field is automatically captured and stored as JSON in the Opportunity's pay_Custom_Data__c field. This lets you collect arbitrary data without any Apex customization.

Recognized fields (mapped to specific backend logic): opportunityId, paymentId, paymentModel, customerId, email, firstName, lastName, companyName, amount, baseAmount, feeAmount, paymentCurrency, itemName, itemDescription, quantity, mode, returnUrl, clientReferenceId, collectPhoneNumber, metadata, selectedPaymentIds, paymentAmounts

Everything else goes into pay_Custom_Data__c. For example, if your form includes fields like fund, dedication, or employerMatch, those values are captured automatically.

You can then consume this data via Salesforce triggers, flows, or reports to map values to custom fields on the Opportunity or related records.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Donation Form</title>

  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://cdn.arquera.cloud/payments-client.js"></script>
  <link rel="stylesheet" href="https://cdn.arquera.cloud/payments-client.css" />
</head>
<body>

<div id="app"></div>

<script>
FLPayments.create('#app', {
  text: {
    title: 'Support Our Mission',
    description: 'Choose an amount and complete your donation.',
    finishButton: 'Proceed to Payment',
    confirmationHeading: 'Thank You!',
    confirmationDescription: 'Your donation has been received.'
  },

  screens: [
    {
      id: 'form',
      sections: [
        {
          label: 'Donation Amount',
          fields: [
            {
              name: 'amount',
              type: 'preset-amount',
              label: 'Select an amount',
              presets: [25, 50, 100, 250, 500],
              defaultSelected: 50,
              allowCustom: true,
              customLabel: 'Or enter a custom amount',
              min: 5,
              required: true
            }
          ]
        },
        {
          label: 'Your Information',
          columns: 2,
          fields: [
            { name: 'firstName', type: 'text', label: 'First Name', required: true },
            { name: 'lastName',  type: 'text', label: 'Last Name',  required: true },
            { name: 'email',     type: 'email', label: 'Email', required: true, span: 2 }
          ]
        },
        {
          fields: [
            { name: 'coverFee', type: 'checkbox', checkboxLabel: 'Cover the 3% processing fee' }
          ]
        }
      ]
    },
    {
      id: 'review',
      role: 'submit',
      sections: [
        {
          type: 'summary',
          rows: [
            { key: 'baseAmount',  label: 'Donation',       format: 'currency' },
            { key: 'feeAmount',   label: 'Processing Fee', format: 'currency' },
            { key: 'totalAmount', label: 'Total',           format: 'currency', emphasis: true }
          ]
        }
      ]
    },
    {
      id: 'checkout',
      role: 'checkout',
      sections: [{ type: 'checkout' }]
    },
    {
      id: 'confirmation',
      sections: [{ type: 'confirmation' }]
    }
  ],

  pricing: {
    mode: 'singleAmount',
    currency: 'usd',
    adjustments: [
      {
        enabled: true,
        type: 'percentage',
        baseKey: 'baseAmount',
        targetKey: 'feeAmount',
        percent: 0.03,
        applyWhen: function (formState) { return formState.coverFee === true; }
      }
    ]
  },

  payload: {
    method: 'createCheckoutSession',
    staticValues: {
      campaignId: '701xx000000abcd'
    }
  },

  theme: {
    css: ':host { --flpay-brand: #2d6a4f; }'
  }
});
</script>

</body>
</html>

API

Method	Description
`FLPayments.create(selector, config)`	Mount the SDK into the given DOM element. Returns the Vue app instance.
`FLPayments.registerComponent(name, definition)`	Register a custom Vue component for use in `custom` sections. Must be called before `create()`.
`FLPayments.version`	The current SDK version string.

Quick Start​

1. Include the Dependencies​

2. Add a Mount Point​

3. Initialize the SDK​

Configuration Reference​

screens​

Screen Roles​

Sections​

fields (default)​

summary​

content​

image​

divider​

alert​

checkout​

confirmation​

payments​

custom​

Conditional Sections​

Field Types​

Common Field Properties​

preset-amount​

text​

email​

currency​

textarea​

select​

radio​

checkbox​

text​

pricing​

Pricing State​

connector​

payload​

state​

stripe​

features​

validation​

theme​

Available CSS Variables​

hooks​

Hook Context Object​

paymentsLwc​

Payment Models​

URL Parameters​

Pre-fill Form Fields​

Payment Context Parameters​

Custom Components​

Salesforce Setup (Custom Metadata)​

Accessing the Settings​

Settings Fields​

How the SDK Uses These Settings​

Opportunity Configuration​

Payment Models​

Related Fields on Standard Objects​

Salesforce Ecosystem Compatibility​

Server-Side Pricing​

Pricing Flows​

Webhook Setup​

1. Get Your Endpoint URL​

2. Configure in Stripe Dashboard​

3. Save the Signing Secret​

What the Webhook Does​

Existing Opportunity Payments​

Custom Data Capture​

Complete Example​

API​

Quick Start

1. Include the Dependencies

2. Add a Mount Point

3. Initialize the SDK

Configuration Reference

`screens`

Screen Roles

Sections

`fields` (default)

`summary`

`content`

`image`

`divider`

`alert`

`checkout`

`confirmation`

`payments`

`custom`

Conditional Sections

Field Types

Common Field Properties

`preset-amount`

`text`

`email`

`currency`

`textarea`

`select`

`radio`

`checkbox`

`text`

`pricing`

Pricing State

`connector`

`payload`

`state`

`stripe`

`features`

`validation`

`theme`

Available CSS Variables

`hooks`

Hook Context Object

`paymentsLwc`

Payment Models

URL Parameters

Pre-fill Form Fields

Payment Context Parameters

Custom Components

Salesforce Setup (Custom Metadata)

Accessing the Settings

Settings Fields

How the SDK Uses These Settings

Opportunity Configuration

Payment Models

Related Fields on Standard Objects

Salesforce Ecosystem Compatibility

Server-Side Pricing

Pricing Flows

Webhook Setup

1. Get Your Endpoint URL

2. Configure in Stripe Dashboard

3. Save the Signing Secret

What the Webhook Does

Existing Opportunity Payments

Custom Data Capture

Complete Example

API