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.
- Open the checkout design or checkout builder for the product.
- Add the main content components needed for the offer.
- Edit text, images, benefits, badges, timer, or testimonials.
- Configure theme and page settings.
- Preview the desktop layout.
- Preview the mobile layout.
- Save or keep draft changes as needed.
- Publish the checkout when it is ready for buyers.
- Open the checkout link as a buyer and test the payment path.
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.