Credit Card Payment

The standard Form pattern for when you'd like to take a user's credit card details.

 
<form>
    <fieldset class="form-fieldset">
        <legend class="form-legend">Payment details</legend>
        <div class="form-body">
​
            <!-- optional separate component: credit-card-types -->
            <credit-card-types
                    selected-type="creditCardCtrl.ccData.ccType"
                    supported-types="creditCardCtrl.ccConfig.supportedTypes">
            </credit-card-types>
​
            <!-- Credit Card component can live anywhere in a form -->
            <credit-card
                eager-type="true"
                cc-data="creditCardCtrl.ccData"
                cc-config="creditCardCtrl.ccConfig">
            </credit-card>
            <!-- Credit Card -->
​
            <div class="form-actions">
                <a href="#">Cancel</a>
                <button class="button button--primary" type="submit">Submit</button>
            </div>
        </div>
    </fieldset>
</form>

 
ctrl.ccData = {
    ccNumber: '',
    ccCvv: '',
    ccName: '',
    ccExpiry: {
        month: '',
        year: ''
    },
    ccType: '',
};
​
ctrl.ccConfig = {
    cardCode: true,
    fullName: true,
};

The credit card component relies on angular-credit-cards for ccNumber and ccCvc. The ccExpiry directive is a custom directive that formats/validates the expiration date in a MM / YY format. Also, the credit card type is not explicitly entered but deduced from the credit card number.

ccData: an object containing the credit card data bound to the directive
ccConfig: an object with the configuration for the credit-card directive
- cardCode: boolean value indicating whether cvv is shown (default true)
- cardCodeRequired: boolean value indicating whether the card code field is required. This only matters if cardCode is true. (default true)
- fullName: boolean value indicating whether the full name field is required/shown (default true)
eagerType: an optional boolean value indicating whether eager type detection (infer and expose the credit card type before the full number is entered) is enabled. (default true)

The credit-card-types display in the example exists as a separate component, but will most likely be used alongside the credit-card component. The component displays the list of supported card types. Once a card type has been selected (or detected by the credit-card component), all the credit card types other than the selected one becomes greyed-out.

selectedType: string value indicating the card type: 'American Express', 'Diners Club', 'Discover', 'MasterCard', 'Visa'. Note that these values are the same as the ones that are detected by the credit-card directive.
supportedTypes: an array of a selection of supported credit card types. This has the same strings representing the card types: 'American Express', 'Diners Club', 'Discover', 'MasterCard', 'Visa'.