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.
Custom colors must be entered as hexadecimal color codes (for example, #0055A4). You can use any color picker tool to find the hexadecimal value for your brand color.
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
The JSON View generates the configuration required for deploying a customized payment window design.
For step-by-step instructions on deploying and activating a customization, see Customization V2.