Build and publish a checkout page
The AtomicPay checkout builder is the visual workspace used to customize the buyer checkout experience for a product, plan, or offer.
Use the builder to add components, edit page sections, preview desktop and mobile layouts, save draft changes, and publish the checkout when it is ready for buyers.
What you can do in the checkout builder
| Area | Purpose |
|---|---|
| Components sidebar | Shows available checkout components that can be added to the page. |
| Canvas | Displays the checkout layout being edited. |
| Droppable areas | Organize content into top, side, and bottom checkout sections. |
| Component editor | Lets you edit the selected component's content and settings. |
| Theme settings | Controls visual styling such as colors and checkout theme. |
| Page settings | Controls page-level checkout settings when available. |
| Preview mode | Lets you compare draft and published checkout versions. |
| Device view | Lets you review desktop and mobile checkout layouts separately. |
| Publish action | Makes the drafted checkout changes live for buyers. |
Available component types
The builder includes basic and advanced components for checkout content and conversion support.
| Component | Use it for |
|---|---|
| Text | Add headings, descriptions, guarantees, instructions, or offer copy. |
| Image | Add product visuals, brand assets, or trust-building images. |
| Benefits | List what the buyer receives or why the offer matters. |
| Badge | Highlight trust, security, scarcity, or offer labels. |
| Header | Add a structured area with image and text. |
| Timer | Add a countdown when it is part of a real campaign or offer deadline. |
| Testimonial | Add social proof or buyer feedback. |
Builder layout
The checkout builder separates draft editing from the published buyer experience.
- Use the components sidebar to choose what to add.
- Drag components into the top, side, or bottom checkout area.
- Select a component to edit its content or settings.
- Switch between desktop and mobile views to adjust layout.
- Use draft preview while editing.
- Compare with the published version when needed.
- Publish only after the checkout has been reviewed.
Create or edit a checkout page
- Confirm the product and pricing are ready.
[Screenshot: Product and linked plan or offer — ready before opening builder.]
- Open the checkout design or checkout builder for the product.
[Screenshot: Checkout builder entry — Edit design or Open builder action.]
- Add the main content components needed for the offer.
[Screenshot: Components sidebar — Text, Benefits, Image, or Badge dragged to canvas.]
- Edit text, images, benefits, badges, timer, or testimonials.
[Screenshot: Selected component editor — headline and body copy updated.]
- Configure theme and page settings.
[Screenshot: Theme or page settings panel — colors and checkout options.]
- Preview the desktop layout.
[Screenshot: Desktop preview — layout and payment area visible.]
- Preview the mobile layout.
[Screenshot: Mobile device preview — checkout readable on phone width.]
- Save or keep draft changes as needed.
[Screenshot: Draft saved indicator — unpublished changes stored in builder.]
- Publish the checkout when it is ready for buyers.
[Screenshot: Publish button — checkout status changed to Published.]
- Open the checkout link as a buyer and test the payment path.
[Screenshot: Live checkout opened from copied link — matches published builder.]
Draft vs published checkout
| Version | Meaning |
|---|---|
| Draft | The version currently being edited. It may include unpublished changes. |
| Published | The version buyers see after changes are published. |
Do not assume a draft change is live. If the checkout has unpublished changes, publish the design before sending traffic to the link.
Responsive checkout checks
Checkout pages can behave differently on desktop and mobile. Always review both.
| View | What to check |
|---|---|
| Desktop | Layout balance, side content, images, testimonials, and checkout clarity. |
| Mobile | Text length, image size, button visibility, spacing, and payment flow readability. |
Mobile review is especially important for paid traffic because many buyers open checkout links from ads, email, WhatsApp, or social apps.
Best practices
- Keep checkout copy clear and close to the actual offer.
- Use benefits to explain what the buyer receives.
- Use timers only when the deadline is real.
- Avoid adding too many visual components before the payment area.
- Preview both desktop and mobile before publishing.
- Publish changes before sharing checkout links with buyers.
- Test the checkout link after publishing, not only inside the builder.
FAQ
Why do I see draft changes but buyers do not?
The builder can store draft changes separately from the published checkout. Publish the checkout before expecting buyers to see the latest edits.
Should I design desktop and mobile separately?
Review both views. The same checkout content can need different spacing, image sizing, or ordering on mobile, especially when buyers come from ads or messaging apps.
When should I use a timer?
Use a timer only for a real deadline or campaign condition. Fake urgency can reduce trust and create support issues.
What should I test after publishing?
Open the checkout link as a buyer, confirm product and price, review mobile layout, test the payment path when possible, and confirm the sale appears in AtomicPay reports.