Code

Props

Props	Data Type	Required
title	string	❌
cardNumber	string | number	✅
edit	boolean	❌
onEdit	function	❌

Description

This is a simple component that hides the credit card number of the user, showing only the last four or three digits of it (Depending on the credit card brand) as a hint of the current selected or active credit card.

In case users want to edit or change the selected or active credit card, this component offers an edit button that can execute an action to hide this display component and showing instead the CreditCardNumber component.

Example

import {useState} from 'react';
import {CreditCardNumberDisplay, CreditCardNumber} from @2600hz/sds-react-components;

const Example = ()=>{

    const [editCreditCardNumber, setEditCreditCardNumber] = useState(false)

    return(
        ...
        {showCreditCardNumberInput ?
            <CreditCardNumber
              id="number"
            />
            :
            <CreditCardNumberDisplay
                cardNumber="5471893892783721"
                edit
                onEdit={()=>{setEditCreditCardNumber(true}}
                title="Card Number"
              />
        }
        ...
    )
}

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Form Controls / Credit Card Number Display - Credit Card Number Display ⋅ Storybooksipster-react-component-storybook.netlify.app