This component enables you to bind the external bill payment instrument type for creating and editing purposes.

Params

external-bill

An object with following properties:

• AccountNumber (create-only)
• AuthorizationChallenge
• ExpirationMonth
• ExpirationYear
• ExternalBillData (create-only)
• NameOnCard
• PhoneNumber
• Type (create-only)

metadata

Metadata describes what business unit specific fields have been configured to be required. It also describes if the business unit account number configured a regex to be used when supplying the account numnber. In 17.4 milestone, account number input is not a requirement. Metadata has the following properties

• accountNumberRegex
• accountNumberRegexDescription
• requireNameOnAccount
• requireAuthorizationChallenge
• requirePhoneNumber

Edit - Basic, no required fields

HTML

<div ng-controller="externalBillExampleController as $ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-external-bill external-bill="$ctrl.externalBill"
                           metadata="$ctrl.metadataRequireNone"
                           is-editing="true"></inv-external-bill>
    </ng-form>
</div>

Edit - All Fields Required

This external bill has all three fields marked as required

HTML

<div ng-controller="externalBillExampleController as $ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-external-bill external-bill="$ctrl.externalBill"
                           metadata="$ctrl.metadataRequireAll"
                           is-editing="true"></inv-external-bill>
    </ng-form>
</div>

Edit - Only Name is Required

This external bill has only Name on Field marked as required

HTML

<div ng-controller="externalBillExampleController as $ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-external-bill external-bill="$ctrl.externalBill"
                           metadata="$ctrl.metadataRequirePartial"
                           is-editing="true"></inv-external-bill>
    </ng-form>
</div>

Create - All Fields Required

This external bill is in create mode and has all fields marked as required

HTML

<div ng-controller="externalBillExampleController as $ctrl" class="t-content">
    <ng-form class="c-generalForm" autocomplete="off">
        <inv-external-bill external-bill="$ctrl.externalBill"
            types="::$ctrl.types"
            metadata="$ctrl.metadataRequireAll"
            is-editing="false"></inv-external-bill>
    </ng-form>
</div>