This component enables you to bind credit card information and credit card types for editing purposes.

Params

credit-card

An object with following properties:

• AccountNumber
• Cvv
• ExpirationMonth
• ExpirationYear
• NameOnCard
• Type

card-types

An array of card types. Each element of the array has the following properties:

• Value
• Name

Field Name References

Chrome has disabled/removed configuration for preventing autofill of credit card form parts via the sane and standard autocomplete:off attribute. Our current method involves obfuscating each field name and id to bypass identification by Chrome. Should you need to reference a field in this component by name (e.g., for reach-in validation checks), use the importable constants file located in the component directory. See its use in the component JS file for reference.

Credit Card

Credit Card

HTML

<div ng-controller="CreditCardExampleController as ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-credit-card credit-card="ctrl.creditCard" card-types="ctrl.cardTypes" on-change="ctrl.onChange" on-blur="ctrl.onBlur"></inv-credit-card>
    </ng-form>
</div>

Credit Card without Heading

Shows the credit card form sans heading

HTML

<div ng-controller="CreditCardExampleController as ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-credit-card credit-card="ctrl.creditCard" card-types="ctrl.cardTypes" hide-title="true"></inv-credit-card>
    </ng-form>
</div>

Credit Card without CVV

Hide the CVV field in case of configuration demands it

HTML

<div ng-controller="CreditCardExampleController as ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-credit-card credit-card="ctrl.creditCard" card-types="ctrl.cardTypes" display-cvv="false"></inv-credit-card>
    </ng-form>
</div>