This guide maps the recommended reading path through the Flex Pay SDK documentation. Follow each section in order for the smoothest integration experience.
1. Flex Pay SDK Integration Overview
Start here to understand the high-level architecture before beginning implementation.
| Page | What You Learn |
|---|---|
| Integration Components | Key building blocks of the Flex Pay SDK |
| Integration Flow | End-to-end sequence from script load to payment confirmation |
| Technical Terminology | Definitions used throughout the documentation |
2. Enable SDK Integration
Core setup steps. Work through these sequentially since each step depends on the previous one.
| Step | Page | Purpose |
|---|---|---|
| Step 1 | Load Flex Pay payments | Add the up.js snippet and confirm window.Uplift.Payments is available |
| Step 2 | Initialize Flex Pay payments | Configure locale, currency, and page context |
| Step 3 | Send order details to Flex Pay | Build and transmit the OrderInfo object |
| Step 4 | Define callback handler | Handle offer and token status changes (payment pages only) |
| Step 5 | Setup Flex Pay iFrame | Embed the Flex Pay application iFrame (payment pages only) |
| Step 6 | Receive payment | Retrieve the token and process payment (payment pages only) |
| Step 7 | QA Checklist | Verify your integration before going live |
Steps 1-3 apply to all pages. Steps 4-6 are exclusive to payment pages. Step 7 covers the full integration.
3. Enable User Interface
After the SDK is integrated, configure the on-page pricing UI.
| Page | Purpose |
|---|---|
| From Pricing and Information Modal | Display "from $X/mo" pricing using the <up-from-pricing> component |
| Pay Monthly Selectors | Add the Pay Monthly payment selector on payment pages |
| From Pricing and Information Modal Configurations | Attribute reference and configuration options for From Pricing |
4. Additional Features to Increase Conversion
Optional capabilities that can be enabled after the core integration is complete.
| Page | Purpose |
|---|---|
| Pre-Qualification Tool | Let customers check eligibility before checkout |
| Promotional Financing | Add 0% APR and other promotional messaging |
| Campaign Targeting | Target specific campaigns to customer segments |
5. Operational Reference
| Page | Purpose |
|---|---|
| Partner Maintenance Checklist | Ongoing maintenance tasks after launch |
6. Migration (if upgrading from V1)
If you have an existing V1 From Pricing integration using data-up-* nodes, start here.
| Page | Purpose |
|---|---|
| From Pricing V2 Migration Guide | Step-by-step migration from V1 to V2 |
| From Pricing V1 Legacy Support | Legacy V1 reference, keep the whole v1 doc here for reference |