Payment Icons Component

The Payment Icons component displays accepted payment method icons by detecting available payment providers from your Shopify store settings, building customer confidence.

Example

Payment Icons Component

Seen on Heybud

Sample Use Cases

  • Payment Visibility: Display all accepted payment methods at checkout top
  • Pre-Payment Confirmation: Show payment options near payment section
  • Trust Building: Build trust by clearly communicating available payment methods upfront

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Key Features

  • Supports all major payment gateways

Supported Payment Methods

The component displays icons for enabled payment methods including:

Credit Cards

  • Visa
  • Mastercard
  • American Express
  • Discover
  • Diners Club
  • JCB

Digital Wallets

  • PayPal
  • Apple Pay
  • Google Pay
  • Shop Pay
  • Amazon Pay

Buy Now Pay Later

  • Afterpay / Clearpay
  • Klarna
  • Affirm
  • Sezzle

Regional Methods

  • iDEAL (Netherlands)
  • Bancontact (Belgium)
  • Sofort (Europe)
  • AliPay (China)
  • WeChat Pay (China)

Placement Recommendations

Top of Checkout

Build confidence early by showing payment options immediately:

[Cart Items Summary]
[Payment Icons: Visa | MC | AmEx | PayPal | Apple Pay]
---
[Contact Information]

Near Payment Section

Remind customers of payment options where they'll be used:

[Shipping Information]
---
[Payment Icons]
[Payment Information Section]

Order Summary

Include in sidebar for constant visibility:

[Order Summary]
[Cart Items]
[Subtotal: $XX]
---
Accepted Payment Methods:
[Payment Icons]

Best Practices

Placement Timing

  • Early is Better: Show payment icons early to set expectations
  • Near Payment Fields: Reinforce options when customers reach payment
  • Not Redundant: Don't show in multiple locations unless checkout is very long

Mobile Considerations

  • Icons automatically scale for mobile devices
  • Typically display 4-5 icons per row on mobile
  • Consider placement above the fold on mobile

Multi-Currency Stores

For stores selling in multiple currencies:

  • Icons display regardless of customer currency
  • Regional payment methods show only when relevant
  • Use Market Targeting to show region-specific options

Comparison: Payment Icons vs Inline Icons

Use Inline Icons When:

  • You want custom icons (security badges, guarantees)
  • You need more control over which icons display
  • You're showing non-payment trust signals
  • You want to manually curate icon selection

Technical Notes

Gateway Support

Compatible with all Shopify Payments and third-party payment gateways including:

  • Shopify Payments
  • Stripe
  • PayPal
  • Braintree
  • Authorize.net
  • And 100+ other gateways

Displaying payment icons can reduce checkout abandonment by clearly communicating payment flexibility. Studies show customers are more likely to complete checkout when they see their preferred payment method upfront.