Customizing Payment Links

Create professional, branded payment experiences by customizing your payment links. This guide covers all customization options to make your payment pages look and feel like your brand.

Overview

Customization options include:

Visual Branding - Logo, colors, and images
Content - Descriptions, terms, and messages
Custom Fields - Collect additional information
Payment Options - Control available methods
User Experience - Success messages and redirects

Visual Customization

Adding Your Logo

Why Add a Logo:

Builds trust with customers
Reinforces brand identity
Makes payment page look professional
Reduces payment abandonment

How to Add:

Navigate to Payment Link editor
Click Upload Logo in Branding section
Select your logo file
Preview and adjust if needed

Logo Requirements:

Formats: PNG (with transparency), JPG, SVG
File Size: Maximum 2MB
Dimensions: 200x200px to 400x400px recommended
Aspect Ratio: Square or horizontal (1:1 or 2:1)

Logo Best Practices:

✓ Use transparent PNG for clean appearance
✓ Ensure legibility at small sizes
✓ Use high resolution for clarity
✓ Keep file size optimized (&lt;500KB ideal)
✓ Use primary logo version

✗ Avoid complex logos with tiny details
✗ Don't use low-resolution images
✗ Avoid logos with white backgrounds (unless transparent)
✗ Don't use unofficial logo variations

Example Logo Specs:

File: company-logo.png
Dimensions: 400x400px
File Size: 125KB
Format: PNG with transparency
Colors: Your brand colors

Screenshot description: Logo upload interface showing preview of uploaded logo, file details, and before/after comparison of payment page with and without logo.

Adding Product Images

Why Add Images:

Shows what customer is purchasing
Increases conversion rates
Reduces confusion
Makes page more visually appealing

How to Add:

In Payment Link editor, find Image section
Click Upload Image
Select high-quality product photo
Crop or adjust if needed
Preview payment page

Image Requirements:

Formats: JPG, PNG, GIF
File Size: Maximum 5MB
Dimensions: 800x600px to 1200x900px recommended
Aspect Ratio: 4:3 or 16:9 works best

Image Guidelines:

Photography Tips:
✓ Use natural, even lighting
✓ Clean, uncluttered background
✓ Show product from best angle
✓ Include scale reference if needed
✓ Use consistent style across products

Technical Tips:
✓ Optimize file size without quality loss
✓ Use sRGB color space
✓ Ensure sharp focus
✓ Remove distracting elements
✓ Consider mobile viewing

Image Examples by Use Case:

Physical Products:

Type: Product photography
Angle: 45-degree angle
Background: White or branded
Lighting: Soft, even light
Include: Product only, no props

Services:

Type: Professional photo or illustration
Subject: Service representation
Style: Clean, modern
Colors: Match brand palette
Include: Relevant iconography

Digital Products:

Type: Screenshot or mockup
Display: Device mockup or interface
Style: Professional presentation
Quality: High resolution
Include: Key features visible

Events:

Type: Venue or event photo
Angle: Wide shot showing atmosphere
Content: Happy attendees or venue
Quality: Bright, inviting
Include: Date/time overlay optional

Screenshot description: Image upload interface with multiple product images in a gallery, showing recommended dimensions and file size for each, plus preview of how image appears on payment page.

Brand Colors

Why Customize Colors:

Matches your brand identity
Creates cohesive experience
Builds customer recognition
Differentiates your business

How to Customize:

Find Appearance section in editor
Click on Brand Color picker
Select your primary brand color
Preview changes on payment page

Where Colors Appear:

Primary action button (Pay Now)
Links and clickable elements
Selected payment method indicator
Loading states and progress bars
Success confirmation

Color Selection Tips:

Accessibility:
✓ Ensure sufficient contrast (WCAG AA minimum)
✓ Test readability with white text
✓ Consider color blind users
✓ Avoid very light or very dark colors
✓ Test on mobile devices

Brand Alignment:
✓ Use your primary brand color
✓ Maintain consistency across touchpoints
✓ Consider emotional impact
✓ Test with different payment methods
✓ Preview before publishing

Color Examples:

/* E-commerce Brand */
Primary: #FF5722 (Vibrant Orange)
Use for: Action buttons, emphasis
Works well with: White backgrounds

/* Professional Services */
Primary: #2196F3 (Professional Blue)
Use for: Trust signals, call-to-action
Works well with: Corporate palette

/* Creative Agency */
Primary: #9C27B0 (Creative Purple)
Use for: Differentiation, modern feel
Works well with: Minimal design

/* Eco-Friendly Brand */
Primary: #4CAF50 (Natural Green)
Use for: Sustainability message
Works well with: Earth tones

Color Contrast Checker:

Button Background: #FF5722
Button Text: #FFFFFF
Contrast Ratio: 4.5:1 ✓ (WCAG AA Pass)

Button Background: #FFEB3B
Button Text: #FFFFFF
Contrast Ratio: 1.8:1 ✗ (WCAG Fail - Use Dark Text)

Screenshot description: Color picker interface showing brand color selection, live preview of how color appears on buttons and elements, and contrast ratio indicator.

Layout Customization (Limited)

Payment pages use a standardized layout for security and compliance, but you can control:

What You Can Customize:

Logo position (top center)
Image display (above or beside content)
Custom field placement
Success message content

What You Cannot Customize:

Overall page structure
Payment method layout
Form field design
Security indicators
Omise branding footer

Preview Options:

Desktop Preview:
- Logo at top
- Product image prominent
- Form in center
- Payment methods below

Mobile Preview:
- Stacked layout
- Optimized for thumb reach
- Full-width buttons
- Simplified navigation

Content Customization

Title and Description

Title Best Practices:

Good Titles:
✓ "Premium Web Development Package"
✓ "VIP Conference Ticket - Early Bird"
✓ "Monthly Subscription - Pro Plan"
✓ "1-Hour Consultation Session"

Poor Titles:
✗ "Buy Now"
✗ "Payment"
✗ "Product"
✗ "Link #123"

Title Guidelines:

Maximum 200 characters
Be specific and descriptive
Include key product identifier
Mention special offers if applicable
Use proper capitalization

Description Best Practices:

Good Description:
"Complete web development package including:
• Custom responsive website design
• Up to 10 pages
• Mobile optimization
• 3 months support
• Domain and hosting setup

Delivery: 6-8 weeks
Includes 2 revision rounds"

Poor Description:
"Website development service"

Description Structure:

1. Opening Statement (what customer gets)
   "Get a professionally designed website..."

2. Key Features (bullet points)
   • Feature 1
   • Feature 2
   • Feature 3

3. Important Details (delivery, terms)
   Delivery time: X weeks
   Includes: Y revisions

4. Call to Action (optional)
   Complete payment to start your project!

Description Tips:

Maximum 1000 characters
Use bullet points for readability
Include delivery timeframe
Mention what's included
Add any important terms
Use emojis sparingly (✓ for features)
Break into short paragraphs

Success Messages

Customize the message shown after successful payment:

Default Message:

"Payment successful! 
You'll receive a confirmation email shortly."

Customized Examples:

For Digital Products:

"Thank you for your purchase! 🎉

Your download link has been sent to your email.
Check your inbox (and spam folder) in the next few minutes.

Questions? Reply to the confirmation email."

For Services:

"Payment received! ✓

We'll contact you within 24 hours to schedule your consultation.
Add calendar@yourcompany.com to your contacts to ensure you receive our email.

Need immediate assistance? Call +66 2 xxx xxxx"

For Events:

"You're registered! 🎟️

Your ticket has been sent to your email.
Event: [Event Name]
Date: [Date]
Venue: [Location]

Add to calendar: [Link]
See you there!"

For Physical Products:

"Order confirmed! 📦

Order #12345 is being prepared for shipment.
Estimated delivery: 3-5 business days

Track your order: [Link]
Need changes? Contact us within 2 hours."

Terms and Conditions

Add important legal or policy information:

How to Add:

Enable "Show Terms" in editor
Enter your terms text
Add links to full policies
Require checkbox acceptance

What to Include:

Essential Terms:
✓ Return/refund policy
✓ Delivery timeframe
✓ Product/service description
✓ Payment terms
✓ Contact information

For Services:
✓ Cancellation policy
✓ Rescheduling terms
✓ Scope of service
✓ Disclaimer

For Events:
✓ Transfer policy
✓ Age restrictions
✓ COVID-19 policies
✓ Venue rules

Example Terms:

Short Terms (on payment page):
"By completing this payment, you agree to our:
• 30-day return policy for unused items
• 3-5 business day delivery timeframe
• Non-refundable processing fee

Full terms: [Link to Terms Page]"

Checkbox Label:
"I agree to the Terms of Service and Privacy Policy"

Custom Fields

Collect additional information from customers during payment.

Field Types

1. Text (Single Line)

Best for short responses:

Field: Order Reference Number
Placeholder: Enter your reference number
Required: Optional
Max Length: 50 characters

Use cases:

Reference numbers
Promo codes
Short notes
ID numbers

2. Textarea (Multiple Lines)

Best for longer responses:

Field: Delivery Address
Placeholder: Enter your full delivery address
Required: Yes
Max Length: 200 characters
Rows: 4

Use cases:

Addresses
Special instructions
Comments
Detailed requests

3. Email

Automatically validated:

Field: Email Address
Placeholder: you@example.com
Required: Yes
Validation: Email format

Use cases:

Contact email
Receipt delivery
Account creation
Newsletter signup

4. Phone Number

With format validation:

Field: Phone Number
Placeholder: +66 812 345 678
Required: Yes
Validation: Phone format

Use cases:

Delivery coordination
Appointment confirmation
Emergency contact
SMS notifications

5. Select Dropdown

Single selection from options:

Field: T-Shirt Size
Options:
  - Small (S)
  - Medium (M)
  - Large (L)
  - X-Large (XL)
  - XX-Large (XXL)
Required: Yes

Use cases:

Product variants
Quantity selection
Time slot selection
Preferences

6. Radio Buttons

Visible single selection:

Field: Delivery Method
Options:
  - Standard Shipping (Free)
  - Express Shipping (+THB 100)
  - Pickup at Store (Free)
Required: Yes
Default: Standard Shipping

Use cases:

Shipping method
Payment plans
Service tiers
Options with prices

7. Checkboxes

Multiple selections allowed:

Field: Add-ons
Options:
  - Gift Wrapping (+THB 50)
  - Express Processing (+THB 100)
  - Insurance (+THB 75)
Required: No

Use cases:

Optional add-ons
Preferences
Agreements
Features selection

8. Date Picker

Calendar selection:

Field: Preferred Appointment Date
Min Date: Today + 2 days
Max Date: Today + 90 days
Required: Yes

Use cases:

Appointment dates
Delivery dates
Event dates
Expiry dates

Custom Field Examples

Example 1: Event Registration

Field 1: Full Name
Type: Text
Required: Yes
Placeholder: Enter your full name

Field 2: Email Address
Type: Email
Required: Yes
Placeholder: your@email.com

Field 3: Phone Number
Type: Phone
Required: Yes
Placeholder: +66 8X XXX XXXX

Field 4: Dietary Requirements
Type: Textarea
Required: No
Placeholder: Any allergies or dietary restrictions?
Max Length: 150

Field 5: T-Shirt Size
Type: Select
Required: Yes
Options: XS, S, M, L, XL, XXL

Field 6: Agree to Terms
Type: Checkbox
Required: Yes
Label: I agree to the event terms and conditions

Example 2: Product Sales with Customization

Field 1: Personalization Text
Type: Text
Required: No
Placeholder: Name or text for engraving (max 20 chars)
Max Length: 20

Field 2: Gift Message
Type: Textarea
Required: No
Placeholder: Add a gift message (optional)
Max Length: 200

Field 3: Shipping Address
Type: Textarea
Required: Yes
Placeholder: Enter complete delivery address

Field 4: Delivery Instructions
Type: Textarea
Required: No
Placeholder: Any special delivery instructions?

Example 3: Service Booking

Field 1: Preferred Date
Type: Date
Required: Yes
Min Date: Today + 3 days

Field 2: Preferred Time
Type: Select
Required: Yes
Options:
  - 9:00 AM - 10:00 AM
  - 10:00 AM - 11:00 AM
  - 2:00 PM - 3:00 PM
  - 3:00 PM - 4:00 PM

Field 3: Service Type
Type: Radio
Required: Yes
Options:
  - Basic Consultation (Included)
  - Extended Session (+THB 500)
  - Premium Package (+THB 1,500)

Field 4: Additional Notes
Type: Textarea
Required: No
Placeholder: Any specific topics you'd like to discuss?

Custom Field Best Practices

Do's:

✓ Only collect necessary information
✓ Use clear, descriptive labels
✓ Provide helpful placeholder text
✓ Set appropriate field types
✓ Mark required fields clearly
✓ Validate input where possible
✓ Group related fields
✓ Test on mobile devices

Don'ts:

✗ Don't collect sensitive payment data
✗ Don't ask for redundant information
✗ Don't use confusing labels
✗ Don't make everything required
✗ Don't use tiny text areas for long content
✗ Don't forget to test validation
✗ Don't skip mobile testing
✗ Don't collect data you won't use

Payment Method Customization

Selecting Payment Methods

Control which payment methods customers can use:

Available Methods:

Cards:

✓ Credit/Debit Cards
  - Visa
  - Mastercard
  - American Express
  - JCB
  
Transaction Fee: 3.65%
Settlement Time: 2-3 business days

Bank Transfers:

✓ Internet Banking
  - All major Thai banks
  - Real-time confirmation
  
Transaction Fee: THB 15
Settlement Time: Instant to 1 business day

E-Wallets:

✓ TrueMoney Wallet
✓ Rabbit LINE Pay
✓ ShopeePay
✓ Alipay
✓ WeChat Pay

Transaction Fee: 2.9% - 3.65%
Settlement Time: 1-3 business days

Installments:

✓ Credit Card Installments
  - 3 months
  - 6 months
  - 10 months
  
Transaction Fee: Higher rates apply
Settlement Time: 2-3 business days

Payment Method Strategy

Maximum Conversion (Enable All):

✓ Credit/Debit Cards
✓ Internet Banking
✓ TrueMoney Wallet
✓ Rabbit LINE Pay
✓ ShopeePay

Best for: General products, maximum reach

Low-Cost Option (Bank Only):

✓ Internet Banking

Best for: High-value items, cost-conscious sellers
Consideration: Lower conversion, bank customers only

Youth Market:

✓ Credit/Debit Cards
✓ TrueMoney Wallet
✓ ShopeePay
✓ Rabbit LINE Pay

Best for: Products targeting young consumers

Premium Products:

✓ Credit/Debit Cards
✓ Credit Card Installments

Best for: High-value items, premium services

Digital Products:

✓ Credit/Debit Cards
✓ TrueMoney Wallet
✓ Rabbit LINE Pay

Best for: Instant delivery items, low friction needed

Advanced Customization

Redirects After Payment

Redirect customers after successful payment:

Success URL:

URL: https://yoursite.com/thank-you?order={charge_id}

Variables available:
- {charge_id} - Omise charge ID
- {amount} - Payment amount
- {currency} - Currency code

Use Cases:

Download Delivery:

Success URL: https://yoursite.com/download?token={charge_id}

Page shows:
- Download button
- Product information
- Support contact
- License key (if applicable)

Order Confirmation:

Success URL: https://yoursite.com/orders/{charge_id}

Page shows:
- Order number
- Items purchased
- Delivery estimate
- Tracking information

Account Creation:

Success URL: https://yoursite.com/register?ref={charge_id}

Page shows:
- Create account form
- Pre-filled email
- Password setup
- Welcome message

Upsell/Cross-sell:

Success URL: https://yoursite.com/recommended

Page shows:
- Thank you message
- Related products
- Special offers
- Customer reviews

Custom CSS (Advanced)

For advanced users, add custom CSS:

Warning: Use carefully, can break responsive design.

Example - Custom Button Style:

.omise-button-primary {
  border-radius: 25px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

Example - Custom Font:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.payment-page * {
  font-family: 'Poppins', sans-serif !important;
}

Example - Custom Card Layout:

.payment-card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
  border-radius: 15px !important;
}

Best Practices:

✓ Test thoroughly on all devices
✓ Use !important sparingly
✓ Don't hide security elements
✓ Maintain accessibility
✓ Keep mobile-friendly
✓ Document your changes

✗ Don't break form functionality
✗ Don't remove Omise branding
✗ Don't reduce contrast below WCAG standards
✗ Don't hide required information

Mobile Optimization

Mobile-Friendly Design

Payment pages are automatically mobile-optimized, but consider:

Mobile-Specific Tips:

Images:

✓ Use images that work in portrait orientation
✓ Ensure logos are legible at small sizes
✓ Test image loading speed
✓ Optimize file sizes for mobile data

Text:

✓ Keep titles concise
✓ Break descriptions into short paragraphs
✓ Use bullet points liberally
✓ Ensure minimum 16px font size

Forms:

✓ Use appropriate keyboard types
✓ Large touch targets (minimum 44x44px)
✓ Group related fields
✓ Minimize required fields

Testing:

✓ Test on actual devices
✓ Check portrait and landscape
✓ Verify scrolling behavior
✓ Test payment method selection
✓ Confirm button tap targets

Mobile Preview

Always preview on mobile before publishing:

Preview Options:
□ iPhone (375x667)
□ iPhone Plus (414x736)
□ Android Phone (360x640)
□ Tablet (768x1024)

A/B Testing Customization

Test different customization approaches:

Test Ideas

Test 1: Image vs No Image

Variant A: Product image shown
Variant B: No image, text only

Measure: Conversion rate

Test 2: Button Colors

Variant A: Brand color (Orange)
Variant B: High-contrast (Green)

Measure: Click-through rate

Test 3: Description Length

Variant A: Detailed description (300 words)
Variant B: Brief description (50 words)

Measure: Completion rate

Test 4: Custom Fields

Variant A: 3 required fields
Variant B: 1 required field, 2 optional

Measure: Form abandonment

Test 5: Success Message

Variant A: Standard confirmation
Variant B: Detailed next steps

Measure: Support inquiries

Best Practices Summary

Visual Design

Logo:
✓ Transparent PNG
✓ 200-400px size
✓ &lt;500KB file size
✓ Professional quality

Images:
✓ High resolution
✓ Optimized file size
✓ Clean composition
✓ Consistent style

Colors:
✓ Brand-aligned
✓ Sufficient contrast
✓ Accessibility-compliant
✓ Mobile-tested

Content

Title:
✓ Clear and specific
✓ Includes key details
✓ Proper capitalization
✓ &lt;200 characters

Description:
✓ Structured format
✓ Bullet points for features
✓ Important details highlighted
✓ Call-to-action included

Success Message:
✓ Confirms payment
✓ Sets expectations
✓ Provides next steps
✓ Includes contact info

User Experience

Custom Fields:
✓ Only essential fields
✓ Clear labels
✓ Helpful placeholders
✓ Appropriate validation

Payment Methods:
✓ Multiple options
✓ Target audience aligned
✓ Cost-benefit considered
✓ All tested

Mobile:
✓ Responsive design
✓ Touch-friendly
✓ Fast loading
✓ Easy to complete

Frequently Asked Questions

Q: Can I remove Omise branding from the payment page?
A: No, Omise branding must remain on payment pages for security and compliance reasons. However, your logo and branding are prominently displayed.

Q: Can I use custom domains for payment links?
A: No, payment links use Omise's secure domain. This ensures security, PCI compliance, and customer trust.

Q: How do I make my payment page look more professional?
A: Add a high-quality logo, use professional product images, write clear descriptions, choose appropriate brand colors, and test on multiple devices.

Q: Can I add videos to payment pages?
A: No, only static images are supported. Consider linking to video content from your success page or product description.

Q: Will my customizations work on mobile?
A: Yes, payment pages are automatically responsive. However, always preview and test on actual mobile devices to ensure your customizations look good.

Q: Can I customize the payment form fields?
A: Standard payment fields (card number, etc.) cannot be customized for security reasons. You can add custom fields for additional information.

Q: How do I match my website's exact design?
A: While exact matching isn't possible, use your logo, brand colors, and similar styling. For complete design control, consider a full API integration instead.

Q: Can I show different content for different payment methods?
A: No, content is the same regardless of payment method selected. The payment method section is standardized.

Q: What if my logo doesn't look good on the payment page?
A: Try different logo variants (horizontal vs square), ensure high resolution, use transparent background, and adjust the size. Test with your brand color selection.

Q: Can customers see my custom fields before clicking the link?
A: No, custom fields are only visible on the payment page itself. Include field requirements in your link description if important.

Q: How often can I update customizations?
A: As often as needed. Changes take effect immediately. Consider creating new links for major changes rather than updating active ones.

Q: Can I preview customizations before publishing?
A: Yes, use the preview feature to see how your payment page looks on desktop and mobile before creating the link.

Next Steps

Creating Payment Links - Create your first customized link
Payment Links API - Automate customization with the API
Dashboard Guide - Master the Omise Dashboard
Testing Guide - Test your customized links

Additional Resources

Brand Guidelines - Omise brand resources
Design Best Practices - UX guidelines
Payment Methods - Learn about payment methods
Security - Security best practices

Need help? Contact our support team at support@omise.co or visit the Help Center.

Overview​

Visual Customization​

Adding Your Logo​

Adding Product Images​

Brand Colors​

Layout Customization (Limited)​

Content Customization​

Title and Description​

Success Messages​

Terms and Conditions​

Custom Fields​

Field Types​

Custom Field Examples​

Custom Field Best Practices​

Payment Method Customization​

Selecting Payment Methods​

Payment Method Strategy​

Advanced Customization​

Redirects After Payment​

Custom CSS (Advanced)​

Mobile Optimization​

Mobile-Friendly Design​

Mobile Preview​

A/B Testing Customization​

Test Ideas​

Best Practices Summary​

Visual Design​

Content​

User Experience​

Frequently Asked Questions​

Next Steps​

Additional Resources​

Overview

Visual Customization

Adding Your Logo

Adding Product Images

Brand Colors

Layout Customization (Limited)

Content Customization

Title and Description

Success Messages

Terms and Conditions

Custom Fields

Field Types

Custom Field Examples

Custom Field Best Practices

Payment Method Customization

Selecting Payment Methods

Payment Method Strategy

Advanced Customization

Redirects After Payment

Custom CSS (Advanced)

Mobile Optimization

Mobile-Friendly Design

Mobile Preview

A/B Testing Customization

Test Ideas

Best Practices Summary

Visual Design

Content

User Experience

Frequently Asked Questions

Next Steps

Additional Resources