InputCard ADDON-COMMERCE

    
      
    

      
        Copy
      
      
    
  

    
      <form [formGroup]="form">
    <tui-textfield>
        <label tuiLabel>Card number</label>
        <input
            formControlName="card"
            tuiInputCard
            (binChange)="onBinChange($event)"
        />
    </tui-textfield>
    <section>
        <tui-textfield>
            <label tuiLabel>Expires</label>
            <input
                formControlName="expire"
                tuiInputExpire
            />
        </tui-textfield>
        <tui-textfield>
            <label tuiLabel>CVC/CVV</label>
            <input
                formControlName="cvc"
                tuiInputCVC
            />
        </tui-textfield>
    </section>
    <tui-error formControlName="card" />
</form>
<p>{{ form.value | json }}</p>

    

      
        Copy
      
      
    
  

    
      form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section {
    display: flex;
    gap: inherit;

    tui-textfield {
        flex: 1;
    }
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-textfield>
    <label tuiLabel>Card number</label>
    <input
        tuiInputCard
        [(ngModel)]="card"
    />
    @if (card === '1234123412341234') {
        <tui-thumbnail-card
            iconStart="@tui.dollar-sign"
            paymentSystem="mastercard"
            size="s"
            [style.background]="'#2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%)'"
        />
    }
</tui-textfield>

    

      
        Copy