Select Payment

Allow users to select a payment method

Use the SelectPayment component to allow users to choose a preferred payment method during checkout or transactions. They simplify the payment process with a clear, intuitive interface for selecting payment options, reducing friction along the way, leading to higher completed purchases. Payment logos are available on Figma.

---
const payments = [
    {
        method: 'visa',
        name: 'Visa ending in 1234',
        subText: 'Expires on 01/2025'
    },
    {
        method: 'mastercard',
        name: 'Mastercard ending in 5678',
        subText: 'Expired on 01/2024',
        disabled: true
    },
    {
        method: 'paypal',
        name: 'PayPal',
        subText: 'Pay with PayPal',
        selected: true
    }
]
---

<SelectPayment
    title="Preview"
    payments={payments}
    buttons={[
        { text: 'Cancel', theme: 'secondary' },
        { text: 'Continue' }
    ]}
/>

The SelectPayment component expects a payments prop that should be an array of payment objects, with the following available properties:

• method: Sets the payment method which is used to display the correct payment logo. Please see the API reference for a full list of available methods.
• name: Sets the text next to the payment logo.
• subText: Sets additional text under the name property. Can be used to provide additional context to users such as expiration date.

You can also specify CTA buttons at the end of the list using the buttons prop which expects an array of ButtonProps objects, along with a text and icon properties to set the text or the icon for the button.

States

The component supports the use of the following two states to customize your payment options:

• selected: Sets the payment option as selected by default. Only one payment option can be selected by default at all times. If no selected option is used, none of the options will be selected as default.
• disabled: Disables the payment option, rendering the list element unselectable.

Card Types

The SelectPayment component extends the Card component, meaning you can use card-specific props with your component. You can use the compact and secondary props to get visually different types of cards:

<SelectPayment
    title="Compact"
    payments={payments}
    buttons={[ ... ]}
    compact={true}
/>

<SelectPayment
    title="Secondary"
    payments={payments}
    buttons={[ ... ]}
    secondary={true}
/>

API

type SelectPaymentProps = {
    payments: {
        method: 'alipay'
        | 'amazon'
        | 'amex'
        | 'apple'
        | 'bancontact'
        | 'bitcoin'
        | 'discover'
        | 'google'
        | 'ideal'
        | 'klarna'
        | 'maestro'
        | 'mastercard'
        | 'paypal'
        | 'payoneer'
        | 'samsung'
        | 'skrill'
        | 'sofort'
        | 'stripe'
        | 'venmo'
        | 'visa'
        | 'wechat'
        | 'wise'
        name: string
        subText?: string
        selected?: boolean
        disabled?: boolean
    }[]
    buttons?: ({
        text: string
        icon?: string
    } & ButtonProps)[]
    [key: string]: any
} & CardProps