@exisia/medusa-payment-icons

Payment method icons and labels for Stripe payment methods, CDN-ready via jsDelivr.

Features

• 🎨 32+ Payment Method Icons - Official SVG icons for all major Stripe payment methods
• 🌐 CDN-Ready - Icons automatically served via jsDelivr CDN
• 📦 TypeScript Support - Full TypeScript types included
• 🔄 Auto-Updates - Icons update automatically when you publish new package versions
• 🎯 Stripe Compatible - Uses official Stripe payment method type names

Installation

npm install @exisia/medusa-payment-icons

Usage

Get Payment Method Info

import { getPaymentMethodInfo } from '@exisia/medusa-payment-icons'

const info = getPaymentMethodInfo('paypal')
// Returns: { type: 'paypal', label: 'PayPal', icon: 'https://cdn.jsdelivr.net/npm/@exisia/medusa-payment-icons@latest/icons/paypal.svg' }

Get Icon URL Only

import { getIconUrl } from '@exisia/medusa-payment-icons'

const iconUrl = getIconUrl('apple_pay')
// Returns: 'https://cdn.jsdelivr.net/npm/@exisia/medusa-payment-icons@latest/icons/apple_pay.svg'

Use in React/HTML

import { getIconUrl } from '@exisia/medusa-payment-icons'

function PaymentMethodIcon({ type }: { type: string }) {
  const iconUrl = getIconUrl(type)
  if (!iconUrl) return null
  
  return <img src={iconUrl} alt={type} />
}

Direct CDN Access

You can also access icons directly via CDN:

https://cdn.jsdelivr.net/npm/@exisia/medusa-payment-icons@latest/icons/{payment-method}.svg

Example:

• https://cdn.jsdelivr.net/npm/@exisia/medusa-payment-icons@latest/icons/paypal.svg
• https://cdn.jsdelivr.net/npm/@exisia/medusa-payment-icons@latest/icons/apple_pay.svg

Supported Payment Methods

Wallets

• Apple Pay (apple_pay)
• Google Pay (google_pay)
• Cash App Pay (cashapp)
• Revolut Pay (revolut_pay)
• Amazon Pay (amazon_pay)

Buy Now, Pay Later

• Affirm (affirm)
• Afterpay / Clearpay (afterpay_clearpay)
• Klarna (klarna)

Bank Debits

• BECS Direct Debit (au_becs_debit)
• BACS Direct Debit (bacs_debit)
• US Bank Account (us_bank_account)
• SEPA Direct Debit (sepa_debit)

European Payment Methods

• iDEAL (ideal)
• Bancontact (bancontact)
• EPS (eps)
• Przelewy24 (p24)
• BLIK (blik)

Asian Payment Methods

• Alipay (alipay)
• WeChat Pay (wechat_pay)
• GrabPay (grabpay)
• PayNow (paynow)
• PromptPay (promptpay)
• FPX (fpx)
• Konbini (konbini)

Latin American Payment Methods

• Boleto (boleto)
• OXXO (oxxo)
• Pix (pix)

Card Brands

• Visa (visa)
• Mastercard (mastercard)
• American Express (amex)
• JCB (jcb)

Other

• PayPal (paypal)

API Reference

getPaymentMethodInfo(type?: string | null): PaymentMethodInfo | null

Returns complete payment method information including type, label, and icon URL.

Parameters:

• type - Stripe payment method type (e.g., 'paypal', 'apple_pay')

Returns:

{
  type: string
  label: string
  icon: string | null
} | null

getIconUrl(key?: string | null): string | null

Returns the CDN URL for a payment method icon.

Parameters:

• key - Stripe payment method type (e.g., 'paypal', 'apple_pay')

Returns:

• CDN URL string or null if key is not provided

How It Works

1. Icons are stored as SVG files in the icons/ directory
2. When published to npm, jsDelivr automatically makes them available via CDN
3. The package provides TypeScript functions to get the correct icon URLs
4. Icons update automatically across all your apps when you publish a new version

License

MIT

Author

Exisia OÜ

• Website: https://exisia.com
• Email: [email protected]

Repository

https://gitlab.com/exisia/medusajs/packages/medusa-payment-icons