> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Available Payment Methods

export const paymentMethodsData = [{
  name: "Alipay via Adyen",
  type: "ADYEN_ALIPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Bancontact Card via Adyen",
  type: "ADYEN_BANCONTACT_CARD",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Bancontact Payconiq via Adyen",
  type: "ADYEN_BANCONTACT_PAYCONIQ",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Bank Transfer via Adyen",
  type: "ADYEN_BANK_TRANSFER",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Blik via Adyen",
  type: "ADYEN_BLIK",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "EPS via Adyen",
  type: "ADYEN_EPS",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Giropay via Adyen (Deprecated)",
  type: "ADYEN_GIROPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "iDEAL via Adyen",
  type: "ADYEN_IDEAL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Interac via Adyen (Deprecated)",
  type: "ADYEN_INTERAC",
  webDropin: false,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Klarna via Adyen",
  type: "ADYEN_KLARNA",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "MBWay via Adyen",
  type: "ADYEN_MBWAY",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "MobilePay via Adyen",
  type: "ADYEN_MOBILEPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Multibanco via Adyen",
  type: "ADYEN_MULTIBANCO",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Payshop via Adyen (Deprecated)",
  type: "ADYEN_PAYSHOP",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Paytrail via Adyen",
  type: "ADYEN_PAYTRAIL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Sofort via Adyen",
  type: "ADYEN_SOFORT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Trustly via Adyen",
  type: "ADYEN_TRUSTLY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Twint via Adyen",
  type: "ADYEN_TWINT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Vipps via Adyen",
  type: "ADYEN_VIPPS",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Afterpay",
  type: "AFTERPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Apple Pay",
  type: "APPLE_PAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Atome",
  type: "ATOME",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Venmo via Braintree",
  type: "BRAINTREE_VENMO",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Bancontact via Buckaroo",
  type: "BUCKAROO_BANCONTACT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "EPS via Buckaroo",
  type: "BUCKAROO_EPS",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Giropay via Buckaroo (Deprecated)",
  type: "BUCKAROO_GIROPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "iDEAL via Buckaroo",
  type: "BUCKAROO_IDEAL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Sofort via Buckaroo",
  type: "BUCKAROO_SOFORT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Clearpay",
  type: "CLEARPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Coinbase",
  type: "COINBASE",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Pix via dLocal",
  type: "DLOCAL_PIX",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Fintecture Immediate Transfer",
  type: "FINTECTURE_IMMEDIATE_TRANSFER",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Fintecture Smart Transfer",
  type: "FINTECTURE_SMART_TRANSFER",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Google Pay",
  type: "GOOGLE_PAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "ShopBack",
  type: "HOOLAH",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Card via iPay88",
  type: "IPAY88_CARD",
  webDropin: false,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: false
}, {
  name: "Klarna",
  type: "KLARNA",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Bancontact via Mollie",
  type: "MOLLIE_BANCONTACT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "EPS via Mollie",
  type: "MOLLIE_EPS",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "GiftCard via Mollie",
  type: "MOLLIE_GIFTCARD",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Giropay via Mollie (Deprecated)",
  type: "MOLLIE_GIROPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "iDEAL via Mollie",
  type: "MOLLIE_IDEAL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "p24 via Mollie",
  type: "MOLLIE_P24",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Sofort via Mollie",
  type: "MOLLIE_SOFORT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Cetelem via Monext",
  type: "MONEXT_CETELEM",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "CPay via Monext",
  type: "MONEXT_CPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Nets",
  type: "NETS",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Paytrail via Nets",
  type: "NETS_PAYTRAIL",
  webDropin: false,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "nol Pay",
  type: "NOL_PAY",
  webDropin: false,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: true,
  primerCheckout: false
}, {
  name: "PromptPay via Omise",
  type: "OMISE_PROMPTPAY",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: false
}, {
  name: "TrueMoney via Omise",
  type: "OMISE_TRUEMONEY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "OpenNode",
  type: "OPENNODE",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Alipay+ via Pacypay",
  type: "PACYPAY_ALIPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "WeChat via Pacypay",
  type: "PACYPAY_WECHAT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Bancontact via Pay.nl",
  type: "PAY_NL_BANCONTACT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Credit Transfer via Pay.nl",
  type: "PAY_NL_CREDIT_TRANSFER",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Direct Debit via Pay.nl",
  type: "PAY_NL_DIRECT_DEBIT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "EPS via Pay.nl",
  type: "PAY_NL_EPS",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Giropay via Pay.nl (Deprecated)",
  type: "PAY_NL_GIROPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "iDEAL via Pay.nl",
  type: "PAY_NL_IDEAL",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Kaartdirect via Pay.nl",
  type: "PAY_NL_KAARTDIRECT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "p24 via Pay.nl",
  type: "PAY_NL_P24",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Payconiq via Pay.nl",
  type: "PAY_NL_PAYCONIQ",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "PayPal via Pay.nl",
  type: "PAY_NL_PAYPAL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Sofort via Pay.nl",
  type: "PAY_NL_SOFORT",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Card",
  type: "PAYMENT_CARD",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "PayNow via Xfers",
  type: "PAYNOW_XFERS",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "PayPal",
  type: "PAYPAL",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Dummy Klarna via Primer (Sandbox)",
  type: "PRIMER_KLARNA",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Dummy PayPal via Primer (Sandbox)",
  type: "PRIMER_PAYPAL",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Dummy Sofort via Primer (Sandbox)",
  type: "PRIMER_SOFORT",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Fast via Rapyd",
  type: "RAPYD_FAST",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "GCash via Rapyd",
  type: "RAPYD_GCASH",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "GrabPay via Rapyd",
  type: "RAPYD_GRABPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "PromptPay via Rapyd",
  type: "RAPYD_PROMPTPAY",
  webDropin: true,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "CPay via Worldline Sips",
  type: "SIPS_CPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "ACH via Stripe",
  type: "STRIPE_ACH",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: false
}, {
  name: "Giropay via Stripe (Deprecated)",
  type: "STRIPE_GIROPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "iDEAL via Stripe",
  type: "STRIPE_IDEAL",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Carte Cadeau via Thunes",
  type: "THUNES_CARTE_CADEAU_CONFORAMA",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Cheque Fidelite via Thunes",
  type: "THUNES_CHEQUE_FIDELITE_CONFORAMA",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Illicado via Thunes",
  type: "THUNES_ILLICADO",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Spirit of Cadeau via Thunes",
  type: "THUNES_SPIRIT_OF_CADEAU",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "TripleA",
  type: "TRIPLE_A",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "2C2P IPP",
  type: "TWOC2P",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Bank Transfer via Volt",
  type: "VOLT_BANK_TRANSFER",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Pix via Volt",
  type: "VOLT_PIX",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "iDEAL via Worldpay",
  type: "WORLDPAY_IDEAL",
  webDropin: true,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: false,
  primerCheckout: true
}, {
  name: "Dana via Xendit",
  type: "XENDIT_DANA",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}, {
  name: "Ovo via Xendit",
  type: "XENDIT_OVO",
  webDropin: false,
  webHeadless: false,
  mobileDropin: false,
  mobileHeadless: true,
  primerCheckout: false
}, {
  name: "Retail Outlets via Xendit",
  type: "XENDIT_RETAIL_OUTLETS",
  webDropin: false,
  webHeadless: false,
  mobileDropin: true,
  mobileHeadless: false,
  primerCheckout: false
}, {
  name: "Shopeepay via Xendit",
  type: "XENDIT_SHOPEEPAY",
  webDropin: true,
  webHeadless: true,
  mobileDropin: true,
  mobileHeadless: true,
  primerCheckout: true
}];

export const providers = [{
  id: "all",
  label: "All Providers"
}, {
  id: "ADYEN",
  label: "Adyen"
}, {
  id: "BRAINTREE",
  label: "Braintree"
}, {
  id: "BUCKAROO",
  label: "Buckaroo"
}, {
  id: "DLOCAL",
  label: "dLocal"
}, {
  id: "FINTECTURE",
  label: "Fintecture"
}, {
  id: "IPAY88",
  label: "iPay88"
}, {
  id: "MOLLIE",
  label: "Mollie"
}, {
  id: "MONEXT",
  label: "Monext"
}, {
  id: "NETS",
  label: "Nets"
}, {
  id: "OMISE",
  label: "Omise"
}, {
  id: "PACYPAY",
  label: "Pacypay"
}, {
  id: "PAY_NL",
  label: "Pay.nl"
}, {
  id: "PAYNOW",
  label: "PayNow"
}, {
  id: "PRIMER",
  label: "Primer"
}, {
  id: "RAPYD",
  label: "Rapyd"
}, {
  id: "SIPS",
  label: "Worldline Sips"
}, {
  id: "STRIPE",
  label: "Stripe"
}, {
  id: "THUNES",
  label: "Thunes"
}, {
  id: "VOLT",
  label: "Volt"
}, {
  id: "WORLDPAY",
  label: "Worldpay"
}, {
  id: "XENDIT",
  label: "Xendit"
}];

export const compatibilityOptions = [{
  id: "all",
  label: "All Platforms"
}, {
  id: "primerCheckout",
  label: "Primer Checkout"
}, {
  id: "webDropin",
  label: "Web Drop-in"
}, {
  id: "webHeadless",
  label: "Web Headless"
}, {
  id: "mobileDropin",
  label: "Mobile Drop-in"
}, {
  id: "mobileHeadless",
  label: "Mobile Headless"
}];

export const FilterablePaymentMethodsTable = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedProvider, setSelectedProvider] = useState("all");
  const [compatibilityFilter, setCompatibilityFilter] = useState("all");
  const filteredData = paymentMethodsData.filter(item => {
    const matchesSearch = searchQuery === "" || item.name.toLowerCase().includes(searchQuery.toLowerCase()) || item.type.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesProvider = selectedProvider === "all" || item.type.startsWith(selectedProvider + "_") || (selectedProvider === "all" ? true : item.type === selectedProvider);
    const matchesCompatibility = compatibilityFilter === "all" || item[compatibilityFilter] === true;
    return matchesSearch && matchesProvider && matchesCompatibility;
  });
  const handleClearFilters = () => {
    setSearchQuery("");
    setSelectedProvider("all");
    setCompatibilityFilter("all");
  };
  const hasActiveFilters = searchQuery !== "" || selectedProvider !== "all" || compatibilityFilter !== "all";
  return <div className="filterable-table-container" style={{
    marginTop: 0
  }}>
      <div className="filterable-table-controls">
        <div className="filterable-table-search">
          <input type="text" placeholder="Search by name or payment method type..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className="filterable-table-search-input" />
        </div>
        <div className="filterable-table-filters">
          <select value={selectedProvider} onChange={e => setSelectedProvider(e.target.value)} className="filterable-table-select">
            {providers.map(provider => <option key={provider.id} value={provider.id}>
                {provider.label}
              </option>)}
          </select>
          <select value={compatibilityFilter} onChange={e => setCompatibilityFilter(e.target.value)} className="filterable-table-select">
            {compatibilityOptions.map(option => <option key={option.id} value={option.id}>
                {option.label}
              </option>)}
          </select>
          {hasActiveFilters && <button onClick={handleClearFilters} className="filterable-table-clear-btn">
              Clear filters
            </button>}
        </div>
      </div>
      <div className="filterable-table-results-count">
        Showing {filteredData.length} of {paymentMethodsData.length} payment methods
      </div>
      <div className="filterable-table-wrapper">
        <table className="filterable-table">
          <thead>
            <tr>
              <th style={{
    paddingLeft: '1.25rem'
  }}>Name</th>
              <th>Payment Method Type</th>
              <th style={{
    paddingRight: '1.25rem'
  }}>Compatibility</th>
            </tr>
          </thead>
          <tbody>
            {filteredData.length > 0 ? filteredData.map((item, index) => <tr key={index}>
                  <td style={{
    paddingLeft: '1.25rem'
  }}>{item.name}</td>
                  <td><code>{item.type}</code></td>
                  <td className="filterable-table-compatibility" style={{
    paddingRight: '1.25rem'
  }}>
                    {item.primerCheckout ? "✔️" : "❌"} Primer Checkout<br />
                    {item.webDropin ? "✔️" : "❌"} Web Drop-in<br />
                    {item.webHeadless ? "✔️" : "❌"} Web Headless<br />
                    {item.mobileDropin ? "✔️" : "❌"} Mobile Drop-in<br />
                    {item.mobileHeadless ? "✔️" : "❌"} Mobile Headless
                  </td>
                </tr>) : <tr>
                <td colSpan={3} className="filterable-table-no-results" style={{
    paddingLeft: '1.25rem'
  }}>
                  No payment methods found matching your criteria.
                </td>
              </tr>}
          </tbody>
        </table>
      </div>
    </div>;
};

<Note>
  Primer supports dozens of payment methods out of the box, with a minimum integration effort.

  Some payment methods are not yet available on all platforms and integration types.
  Please refer to the table below to learn more about the compatibility of each payment method.
</Note>

<FilterablePaymentMethodsTable />