Payment Page Design Tool
Overview
The Preview Page allows merchants and developers to preview and customize the appearance of the Payment Window V2 payment experience before deploying changes to production.
Changes made in the Preview Page are reflected immediately in the preview window, making it easier to test branding, layout, and configuration options before activation.
Changes made in the Preview Page are not reflected in production until the generated JSON configuration is deployed and activated in Netaxept Admin.
Use Cases
Use the Preview Page to:
- Preview Payment Window V2 designs
- Test branding and visual customization
- Validate logo placement
- Configure colors and fonts
- Review different checkout configurations
- Generate JSON configurations
- Verify the final customer experience before deployment
Widget and JSON Views
The Preview Page supports two viewing modes:
Widget View
Displays a live preview of the payment experience as customers will see it.
JSON View
Displays the generated configuration for the selected design.
The generated JSON can be copied and used when creating or updating a customization in Netaxept Admin.
Available Configuration Options
Use Cases
Select the payment flow you want to preview.
Available options include:
- One Step
- Two Step (available early 2027)
- Payout
- Add Card (Payouts)
| Option | Description |
|---|---|
| Click to Pay | Enable or disable Click to Pay |
| 3DS Fields | Show or hide 3DS fields |
| Input Style | Choose between Default and Slim |
| Corner Radius | Configure element styling |
| Fonts | Select a font family |
| Locale | Choose language and locale settings |
| Logo | Add a company logo |
| Primary Color | Configure branding colors |
Deploying Your Design
After configuring and validating your design in the Preview Page:
- Switch to the JSON tab.
- Copy the generated JSON configuration.
- Open Netaxept Admin (Test environment).
- Navigate to Options → Template Design → Version 2.
- Create or edit a customization.
- Paste the JSON configuration.
- Save and activate the customization.
For detailed instructions on deploying a customization, see Customization V2.
