Credit Card Payment

Payment details

Cancel Submit

<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'.