feat(checkout-page): enhance payment flow with payer DNI input and refactor payment components for improved structure

src/app/core/services/checkout.service.ts

@@ -52,6 +52,7 @@ export interface PurchaseDetailResponse extends PurchaseStatusResponse {
   created_at: string | null;
   payment_method: string | null;
   dni: string | null;
+  payer_dni: string | null;
   telefono: string | null;
   nombre_apellido: string | null;
   email: string | null;
@@ -81,9 +82,17 @@ export class CheckoutService {
     return purchase;
   }
 
-  async generatePaymentIntent(tenantCode: string, purchaseId: number, method: 'qr' | 'transfer' | 'telepagos'): Promise<any> {
+  async generatePaymentIntent(
+    tenantCode: string,
+    purchaseId: number,
+    method: 'qr' | 'transfer' | 'telepagos',
+    payerDni?: string
+  ): Promise<any> {
     const response = await firstValueFrom(
-      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, { method })
+      this.http.post<any>(`${environment.url}tenants/${tenantCode}/compras/${purchaseId}/payment-intent`, {
+        method,
+        ...(method === 'transfer' ? { payer_dni: payerDni } : {})
+      })
     );
     if (!response) {
       throw new Error('Error al generar la intención de pago.');

src/app/features/store/pages/checkout-page/checkout-page.component.html

@@ -12,14 +12,7 @@
 
         <app-step label="Pago">
           <app-checkout-payment-step
-            [paymentMethods]="paymentMethods"
-            [selectedPaymentMethod]="selectedPaymentMethod()"
-            [copiedTransferField]="copiedTransferField()"
-            [transferAccount]="transferAccount()"
-            [isGeneratingIntent]="isPaymentLoading()"
-            [qrData]="qrData()"
-            (paymentMethodChange)="selectPaymentMethod($event)"
-            (copyTransferValue)="copyTransferValue($event.field, $event.value)"
+            [purchaseId]="createdPurchaseId()"
             (cancelStep)="onCancel()"
             (complete)="onComplete()"
           />

src/app/features/store/pages/checkout-page/checkout-page.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, inject, OnInit, signal, untracked, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit, signal, ViewChild } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { startWith } from 'rxjs';
@@ -7,15 +7,13 @@ import { CartService } from '../../../../core/services/cart/cart.service';
 import { TenantService } from '../../../../core/services/tenant.service';
 import { CheckoutService, CreatePurchasePayload } from '../../../../core/services/checkout.service';
 import { AuthService } from '../../../../core/services/auth/auth.service';
-import { ToastService } from '../../../../core/services/toast.service';
-import { BankAccount } from '../../../../core/services/tenant.interface';
 import { CartItem } from '../../../../core/services/cart/cart.interface';
 import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { CheckoutDataStepComponent } from './checkout-data-step.component';
 import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
-import { CheckoutForm, PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+import { CheckoutForm } from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-page',
@@ -38,7 +36,6 @@ export class CheckoutPageComponent implements OnInit {
   private readonly tenantService = inject(TenantService);
   private readonly checkoutService = inject(CheckoutService);
   private readonly authService = inject(AuthService);
-  private readonly toastService = inject(ToastService);
 
   @ViewChild(StepperComponent) stepper!: StepperComponent;
 
@@ -65,41 +62,10 @@ export class CheckoutPageComponent implements OnInit {
   });
 
   protected readonly isStep1Valid = signal(this.form.valid);
-  protected readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
-    { id: 'qr', label: 'QR' },
-    { id: 'transfer', label: 'Transferencia' },
-    { id: 'telepagos', label: 'TelePagos' }
-  ];
-  protected readonly selectedPaymentMethod = signal<PaymentMethod>('qr');
-  protected readonly copiedTransferField = signal<TransferField | null>(null);
-  protected readonly transferAccount = signal<TransferAccount>({
-    titular: 'Nombre y Apellido',
-    entidad: 'TelePagos',
-    cvu: '0000000000000000000000',
-    alias: 'telepagos.ar'
-  });
-
   protected readonly isCreatingPurchase = signal(false);
   protected readonly createdPurchaseId = signal<number | null>(null);
-  protected readonly isGeneratingIntent = signal(false);
-  protected readonly isPaymentLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
-  protected readonly qrData = signal<string | null>(null);
 
   constructor() {
-    effect(() => {
-      // We only want to trigger the intent generation when the cart changes.
-      // So we track the cart, but untrack the other signals to prevent duplicate calls.
-      const cart = this.cartService.cart();
-      
-      untracked(() => {
-        const purchaseId = this.createdPurchaseId();
-        if (cart && purchaseId) {
-          // Trigger payment intent generation when cart changes and we are on the payment step
-          void this.selectPaymentMethod(this.selectedPaymentMethod());
-        }
-      });
-    });
-
     this.form.statusChanges
       .pipe(startWith(this.form.status))
       .subscribe(() => this.isStep1Valid.set(this.form.valid));
@@ -178,9 +144,6 @@ export class CheckoutPageComponent implements OnInit {
       this.createdPurchaseId.set(response.id);
       
       this.stepper.next();
-      
-      // Auto trigger intent for default option
-      void this.selectPaymentMethod(this.selectedPaymentMethod());
 
     } catch (error) {
       console.error('Failed to create purchase:', error);
@@ -194,62 +157,6 @@ export class CheckoutPageComponent implements OnInit {
     void this.router.navigate(['/']);
   }
 
-  protected async selectPaymentMethod(method: PaymentMethod): Promise<void> {
-    this.selectedPaymentMethod.set(method);
-
-    const purchaseId = this.createdPurchaseId();
-    const tenant = this.tenantService.tenant();
-
-    if (!purchaseId || !tenant || method === 'telepagos') {
-      return;
-    }
-
-    this.isGeneratingIntent.set(true);
-
-    try {
-      const response = await this.checkoutService.generatePaymentIntent(tenant.codigo, purchaseId, method);
-      
-      if (method === 'qr' && response.qr_data?.qr_code) {
-        this.qrData.set(response.qr_data.qr_code);
-      } else if (method === 'transfer' && response.transfer_data) {
-        this.transferAccount.set({
-          titular: response.transfer_data.titular,
-          entidad: response.transfer_data.entidad,
-          cvu: response.transfer_data.cvu,
-          alias: response.transfer_data.alias
-        });
-      }
-    } catch (error) {
-      console.error('Failed to generate payment intent:', error);
-      const backendMessage = (error as { error?: { message?: unknown } } | null)?.error?.message;
-      const message = typeof backendMessage === 'string'
-        ? backendMessage
-        : error instanceof Error
-          ? error.message
-          : 'No pudimos obtener la información de pago. Intentá nuevamente.';
-      this.toastService.danger(message);
-    } finally {
-      this.isGeneratingIntent.set(false);
-    }
-  }
-
-  protected async copyTransferValue(field: TransferField, value: string): Promise<void> {
-    if (!globalThis.navigator?.clipboard?.writeText) return;
-
-    try {
-      await globalThis.navigator.clipboard.writeText(value);
-      this.copiedTransferField.set(field);
-
-      setTimeout(() => {
-        if (this.copiedTransferField() === field) {
-          this.copiedTransferField.set(null);
-        }
-      }, 1800);
-    } catch {
-      this.copiedTransferField.set(null);
-    }
-  }
-
   protected async onComplete(): Promise<void> {
     const purchaseId = this.createdPurchaseId();
     const tenant = this.tenantService.tenant();

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -4,17 +4,17 @@
       <h2 id="payment-methods-title" class="payment-methods__title">Selecciona el metodo de pago</h2>
 
       <div class="payment-methods__list" role="radiogroup" aria-label="Metodo de pago">
-        @for (method of paymentMethods(); track method.id) {
+        @for (method of payment.paymentMethods; track method.id) {
           <label
             class="payment-method"
-            [class.is-selected]="selectedPaymentMethod() === method.id"
+            [class.is-selected]="payment.selectedMethod() === method.id"
           >
             <input
               class="payment-method__radio"
               type="radio"
               name="payment-method"
               [value]="method.id"
-              [checked]="selectedPaymentMethod() === method.id"
+              [checked]="payment.selectedMethod() === method.id"
               (change)="selectPaymentMethod(method.id)"
             />
 
@@ -35,17 +35,21 @@
     </section>
 
     <section class="payment-panel d-flex justify-content-end" aria-live="polite">
-      @if (isGeneratingIntent()) {
+      @if (payment.isLoading() && payment.selectedMethod() !== 'transfer') {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
         </div>
-      } @else if (selectedPaymentMethod() === 'qr') {
-        <app-qr-payment-content [qrData]="qrData()" />
-      } @else if (selectedPaymentMethod() === 'transfer') {
+      } @else if (payment.selectedMethod() === 'qr') {
+        <app-qr-payment-content [qrData]="payment.qrData()" />
+      } @else if (payment.selectedMethod() === 'transfer') {
         <app-transfer-payment-content
-          [transferAccount]="transferAccount()"
-          [copiedTransferField]="copiedTransferField()"
+          [transferAccount]="payment.transferAccount()"
+          [copiedTransferField]="payment.copiedTransferField()"
+          [isLoading]="payment.isLoading()"
+          [requestError]="payment.transferRequestError()"
+          [initialPayerDni]="payment.payerDni()"
           (copyTransferValue)="requestCopy($event.field, $event.value)"
+          (requestTransferData)="requestTransfer($event)"
         />
       } @else {
         <app-telepagos-payment-content />
@@ -68,7 +72,7 @@
       type="button"
       hostClass="checkout-payment__action-btn"
       buttonClass="w-100"
-      [disabled]="isGeneratingIntent()"
+      [disabled]="!payment.canComplete()"
       (click)="complete.emit()"
     >
       Finalizar compra

src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts

@@ -1,10 +1,11 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject, input, output } from '@angular/core';
 
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { QrPaymentContentComponent } from './components/payment-methods/qr-payment-content.component';
 import { TelepagosPaymentContentComponent } from './components/payment-methods/telepagos-payment-content.component';
 import { TransferPaymentContentComponent } from './components/payment-methods/transfer-payment-content.component';
-import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+import { CheckoutPaymentFacade } from './checkout-payment.facade';
+import { PaymentMethod, TransferField } from './checkout-page.models';
 
 @Component({
   selector: 'app-checkout-payment-step',
@@ -17,26 +18,29 @@ import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } fr
   ],
   templateUrl: './checkout-payment-step.component.html',
   styleUrl: './checkout-payment-step.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [CheckoutPaymentFacade]
 })
 export class CheckoutPaymentStepComponent {
-  readonly paymentMethods = input.required<ReadonlyArray<PaymentMethodOption>>();
-  readonly selectedPaymentMethod = input.required<PaymentMethod>();
-  readonly copiedTransferField = input<TransferField | null>(null);
-  readonly transferAccount = input.required<TransferAccount>();
-  readonly isGeneratingIntent = input<boolean>(false);
-  readonly qrData = input<string | null>(null);
+  protected readonly payment = inject(CheckoutPaymentFacade);
+  readonly purchaseId = input<number | null>(null);
 
-  readonly paymentMethodChange = output<PaymentMethod>();
-  readonly copyTransferValue = output<{ field: TransferField; value: string }>();
   readonly cancelStep = output<void>();
   readonly complete = output<void>();
 
+  constructor() {
+    effect(() => this.payment.setPurchaseId(this.purchaseId()));
+  }
+
   protected selectPaymentMethod(method: PaymentMethod): void {
-    this.paymentMethodChange.emit(method);
+    void this.payment.selectMethod(method);
   }
 
   protected requestCopy(field: TransferField, value: string): void {
-    this.copyTransferValue.emit({ field, value });
+    void this.payment.copyTransferValue(field, value);
+  }
+
+  protected requestTransfer(dni: string): void {
+    void this.payment.requestTransferData(dni);
   }
 }

src/app/features/store/pages/checkout-page/checkout-payment.facade.ts

@@ -0,0 +1,150 @@
+import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
+
+import { CartService } from '../../../../core/services/cart/cart.service';
+import { CheckoutService } from '../../../../core/services/checkout.service';
+import { TenantService } from '../../../../core/services/tenant.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+
+@Injectable()
+export class CheckoutPaymentFacade {
+  private readonly cartService = inject(CartService);
+  private readonly checkoutService = inject(CheckoutService);
+  private readonly tenantService = inject(TenantService);
+  private readonly toastService = inject(ToastService);
+  private readonly purchaseId = signal<number | null>(null);
+  private readonly isGeneratingIntent = signal(false);
+
+  readonly paymentMethods: ReadonlyArray<PaymentMethodOption> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transfer', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' }
+  ];
+  readonly selectedMethod = signal<PaymentMethod>('qr');
+  readonly copiedTransferField = signal<TransferField | null>(null);
+  readonly transferAccount = signal<TransferAccount | null>(null);
+  readonly payerDni = signal('');
+  readonly transferRequestError = signal<string | null>(null);
+  readonly qrData = signal<string | null>(null);
+  readonly isLoading = computed(() => this.isGeneratingIntent() || this.cartService.isUpdating());
+  readonly canComplete = computed(() =>
+    !this.isLoading()
+      && (this.selectedMethod() !== 'transfer' || this.transferAccount() !== null)
+  );
+
+  constructor() {
+    effect(() => {
+      const cart = this.cartService.cart();
+      const purchaseId = this.purchaseId();
+
+      untracked(() => {
+        if (cart && purchaseId) void this.refreshSelectedMethod();
+      });
+    });
+  }
+
+  setPurchaseId(purchaseId: number | null): void {
+    this.purchaseId.set(purchaseId);
+  }
+
+  async selectMethod(method: PaymentMethod): Promise<void> {
+    this.selectedMethod.set(method);
+    await this.refreshSelectedMethod();
+  }
+
+  async requestTransferData(dni: string): Promise<void> {
+    const context = this.resolvePaymentContext();
+    if (!context) return;
+
+    this.isGeneratingIntent.set(true);
+    this.transferRequestError.set(null);
+
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        context.tenantCode,
+        context.purchaseId,
+        'transfer',
+        dni
+      );
+      if (!response.transfer_data) {
+        throw new Error('No pudimos obtener los datos de transferencia.');
+      }
+
+      this.payerDni.set(dni);
+      this.transferAccount.set({
+        titular: response.transfer_data.titular,
+        entidad: response.transfer_data.entidad,
+        cvu: response.transfer_data.cvu,
+        alias: response.transfer_data.alias
+      });
+    } catch (error) {
+      const message = this.resolveErrorMessage(
+        error,
+        'No pudimos obtener los datos de transferencia. Intentá nuevamente.'
+      );
+      this.transferRequestError.set(message);
+      this.toastService.danger(message);
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  async copyTransferValue(field: TransferField, value: string): Promise<void> {
+    if (!globalThis.navigator?.clipboard?.writeText) return;
+
+    try {
+      await globalThis.navigator.clipboard.writeText(value);
+      this.copiedTransferField.set(field);
+
+      setTimeout(() => {
+        if (this.copiedTransferField() === field) this.copiedTransferField.set(null);
+      }, 1800);
+    } catch {
+      this.copiedTransferField.set(null);
+    }
+  }
+
+  private async refreshSelectedMethod(): Promise<void> {
+    const method = this.selectedMethod();
+    if (method === 'transfer') {
+      if (this.transferAccount() && this.payerDni()) {
+        await this.requestTransferData(this.payerDni());
+      }
+      return;
+    }
+
+    if (method === 'telepagos') return;
+
+    const context = this.resolvePaymentContext();
+    if (!context) return;
+
+    this.isGeneratingIntent.set(true);
+    try {
+      const response = await this.checkoutService.generatePaymentIntent(
+        context.tenantCode,
+        context.purchaseId,
+        method
+      );
+      if (response.qr_data?.qr_code) this.qrData.set(response.qr_data.qr_code);
+    } catch (error) {
+      this.toastService.danger(this.resolveErrorMessage(
+        error,
+        'No pudimos obtener la información de pago. Intentá nuevamente.'
+      ));
+    } finally {
+      this.isGeneratingIntent.set(false);
+    }
+  }
+
+  private resolvePaymentContext(): { tenantCode: string; purchaseId: number } | null {
+    const tenant = this.tenantService.tenant();
+    const purchaseId = this.purchaseId();
+    return tenant && purchaseId ? { tenantCode: tenant.codigo, purchaseId } : null;
+  }
+
+  private resolveErrorMessage(error: unknown, fallback: string): string {
+    const backendMessage = (error as { error?: { message?: unknown } } | null)?.error?.message;
+    if (typeof backendMessage === 'string') return backendMessage;
+    return error instanceof Error ? error.message : fallback;
+  }
+}

src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.html

@@ -1,46 +1,78 @@
 <div class="payment-panel__card">
-  <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
+  <h3 class="payment-panel__title">
+    {{ transferAccount() ? 'Transferí a la siguiente cuenta desde cualquier billetera' : 'Solicitá los datos de transferencia' }}
+  </h3>
   <div class="payment-panel__divider"></div>
 
-  <div class="payment-panel__account">
-    <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
+  @if (!transferAccount()) {
+    <form class="payment-panel__request" (submit)="$event.preventDefault(); submitPayerDni()">
+      <p class="payment-panel__description">
+        Ingresá el DNI de la persona que realizará la transferencia para poder identificar el pago.
+      </p>
 
-    <div class="payment-detail">
-      <span class="payment-detail__label">Titular:</span>
-      <strong class="payment-detail__value">{{ transferAccount().titular }}</strong>
-    </div>
-
-    <div class="payment-detail">
-      <span class="payment-detail__label">Entidad:</span>
-      <strong class="payment-detail__value">{{ transferAccount().entidad }}</strong>
-    </div>
-
-    <div class="payment-detail payment-detail--copy">
-      <span class="payment-detail__label">CVU:</span>
-      <strong class="payment-detail__value">{{ transferAccount().cvu }}</strong>
-      <app-icon-button
-        variant="copy"
-        ariaLabel="Copiar CVU"
-        (click)="requestCopy('cvu', transferAccount().cvu)"
+      <label class="payment-panel__label" for="transfer-payer-dni">DNI del pagador</label>
+      <app-input
+        id="transfer-payer-dni"
+        type="text"
+        placeholder="Ej: 12345678"
+        [maxlength]="8"
+        [invalid]="!!payerDniError()"
+        [disabled]="isLoading()"
+        [value]="payerDni()"
+        (valueChange)="payerDni.set($any($event).toString())"
       />
+
+      @if (payerDniError(); as error) {
+        <small class="payment-panel__error">{{ error }}</small>
+      } @else if (requestError(); as error) {
+        <small class="payment-panel__error">{{ error }}</small>
+      }
+
+      <app-button type="submit" buttonClass="w-100" [disabled]="isLoading()">
+        {{ isLoading() ? 'Solicitando...' : 'Solicitar datos de transferencia' }}
+      </app-button>
+    </form>
+  } @else {
+    <div class="payment-panel__account">
+      <p class="payment-panel__eyebrow">DATOS DE CUENTA:</p>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Titular:</span>
+        <strong class="payment-detail__value">{{ transferAccount()!.titular }}</strong>
+      </div>
+
+      <div class="payment-detail">
+        <span class="payment-detail__label">Entidad:</span>
+        <strong class="payment-detail__value">{{ transferAccount()!.entidad }}</strong>
+      </div>
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">CVU:</span>
+        <strong class="payment-detail__value">{{ transferAccount()!.cvu }}</strong>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar CVU"
+          (click)="requestCopy('cvu', transferAccount()!.cvu)"
+        />
+      </div>
+
+      @if (copiedTransferField() === 'cvu') {
+        <small class="payment-detail__feedback">CVU copiado</small>
+      }
+
+      <div class="payment-detail payment-detail--copy">
+        <span class="payment-detail__label">Alias:</span>
+        <strong class="payment-detail__value">{{ transferAccount()!.alias }}</strong>
+        <app-icon-button
+          variant="copy"
+          ariaLabel="Copiar alias"
+          (click)="requestCopy('alias', transferAccount()!.alias)"
+        />
+      </div>
+
+      @if (copiedTransferField() === 'alias') {
+        <small class="payment-detail__feedback">Alias copiado</small>
+      }
     </div>
-
-    @if (copiedTransferField() === 'cvu') {
-      <small class="payment-detail__feedback">CVU copiado</small>
-    }
-
-    <div class="payment-detail payment-detail--copy">
-      <span class="payment-detail__label">Alias:</span>
-      <strong class="payment-detail__value">{{ transferAccount().alias }}</strong>
-      <app-icon-button
-        variant="copy"
-        ariaLabel="Copiar alias"
-        (click)="requestCopy('alias', transferAccount().alias)"
-      />
-    </div>
-
-    @if (copiedTransferField() === 'alias') {
-      <small class="payment-detail__feedback">Alias copiado</small>
-    }
-  </div>
+  }
 </div>

src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss

@@ -13,6 +13,32 @@
     font-size: 12px;
   }
 
+  &__request {
+    width: 100%;
+    display: grid;
+    gap: 0.75rem;
+    text-align: left;
+  }
+
+  &__description {
+    margin: 0;
+    color: #6f6f6f;
+    font-size: 0.85rem;
+    line-height: 1.4;
+  }
+
+  &__label {
+    margin-bottom: -0.35rem;
+    color: #5e5e5e;
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
+
+  &__error {
+    color: var(--bs-danger, #dc3545);
+    font-size: 0.78rem;
+  }
+
   &__eyebrow {
     margin: 0;
     color: #838383;

src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.spec.ts

@@ -11,6 +11,48 @@ describe('TransferPaymentContentComponent', () => {
     alias: 'alias.test'
   };
 
+  it('requests the payer DNI before showing account information', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('DNI del pagador');
+    expect(fixture.nativeElement.textContent).not.toContain('DATOS DE CUENTA');
+
+    const emitted: string[] = [];
+    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = '12345678';
+    input.dispatchEvent(new Event('input'));
+    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
+    fixture.detectChanges();
+
+    expect(emitted).toEqual(['12345678']);
+  });
+
+  it('shows validation errors and does not submit an invalid DNI', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    const emitted: string[] = [];
+    fixture.componentInstance.requestTransferData.subscribe((dni) => emitted.push(dni));
+    fixture.detectChanges();
+
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = '12abc';
+    input.dispatchEvent(new Event('input'));
+    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
+    fixture.detectChanges();
+
+    expect(emitted).toEqual([]);
+    expect(fixture.nativeElement.textContent).toContain('solo puede contener números');
+  });
+
   it('shows the account information and copied-field feedback', async () => {
     await TestBed.configureTestingModule({
       imports: [TransferPaymentContentComponent]

src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.ts

@@ -1,21 +1,54 @@
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, input, output, signal } from '@angular/core';
 
+import { ButtonComponent } from '../../../../../../shared/components/button/button.component';
 import { IconButtonComponent } from '../../../../../../shared/components/icon-button/icon-button.component';
+import { InputComponent } from '../../../../../../shared/components/input/input.component';
 import { TransferAccount, TransferField } from '../../checkout-page.models';
 
 @Component({
   selector: 'app-transfer-payment-content',
   standalone: true,
-  imports: [IconButtonComponent],
+  imports: [ButtonComponent, IconButtonComponent, InputComponent],
   templateUrl: './transfer-payment-content.component.html',
   styleUrl: './transfer-payment-content.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TransferPaymentContentComponent {
-  readonly transferAccount = input.required<TransferAccount>();
+  readonly transferAccount = input<TransferAccount | null>(null);
   readonly copiedTransferField = input<TransferField | null>(null);
+  readonly isLoading = input(false);
+  readonly requestError = input<string | null>(null);
+  readonly initialPayerDni = input('');
 
   readonly copyTransferValue = output<{ field: TransferField; value: string }>();
+  readonly requestTransferData = output<string>();
+
+  protected readonly payerDni = signal('');
+  protected readonly submitted = signal(false);
+  protected readonly payerDniError = computed(() => {
+    if (!this.submitted()) return null;
+
+    const value = String(this.payerDni()).trim();
+    if (!value) return 'Ingresá el DNI de la persona que realizará la transferencia.';
+    if (!/^\d+$/.test(value)) return 'El DNI solo puede contener números.';
+    if (!/^\d{7,8}$/.test(value)) return 'El DNI debe tener 7 u 8 dígitos.';
+
+    return null;
+  });
+
+  constructor() {
+    effect(() => {
+      const initialDni = this.initialPayerDni();
+      if (initialDni && !this.payerDni()) this.payerDni.set(initialDni);
+    });
+  }
+
+  protected submitPayerDni(): void {
+    this.submitted.set(true);
+    if (this.payerDniError()) return;
+
+    this.requestTransferData.emit(String(this.payerDni()).trim());
+  }
 
   protected requestCopy(field: TransferField, value: string): void {
     this.copyTransferValue.emit({ field, value });