feat(checkout-page): refactor payment component tests to use signals and improve method delegation

feat(checkout-page): enhance payment flow with payer DNI input and refactor payment components for improved structure
feat(checkout-page): add host mixin for payment panel components to improve layout consistency
2026-07-12 19:49:22 +00:00 · 2026-07-12 19:45:59 +00:00 · 2026-07-12 19:22:06 +00:00 · 2026-07-12 19:21:27 +00:00 · 2026-07-12 19:05:24 +00:00
21 changed files with 903 additions and 395 deletions
--- a/src/app/core/services/checkout.service.ts
+++ b/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.');
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.html
+++ b/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()"
          />
--- a/src/app/features/store/pages/checkout-page/checkout-page.component.ts
+++ b/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,14 +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 { 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',
@@ -63,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));
@@ -176,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);
@@ -192,55 +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);
-    } 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();
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.html
+++ b/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,95 +35,24 @@
    </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') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="qr-code" aria-label="QR de pago">
-            @if (qrData()) {
-              <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
-            } @else {
-              <span class="qr-code__finder qr-code__finder--tl"></span>
-              <span class="qr-code__finder qr-code__finder--tr"></span>
-              <span class="qr-code__finder qr-code__finder--bl"></span>
-            }
-          </div>
-        </div>
-      } @else if (selectedPaymentMethod() === 'transfer') {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Transferi a la siguiente cuenta desde cualquier billetera</h3>
-          <div class="payment-panel__divider"></div>
-
-          <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>
-        </div>
+      } @else if (payment.selectedMethod() === 'qr') {
+        <app-qr-payment-content [qrData]="payment.qrData()" />
+      } @else if (payment.selectedMethod() === 'transfer') {
+        <app-transfer-payment-content
+          [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 {
-        <div class="payment-panel__card">
-          <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
-          <div class="payment-panel__divider"></div>
-
-          <div class="store-badges" aria-label="Tiendas disponibles">
-            <div class="store-badge">
-              <i class="fa-brands fa-google-play" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Disponible en</small>
-                <strong>Google Play</strong>
-              </span>
-            </div>
-
-            <div class="store-badge">
-              <i class="fa-brands fa-apple" aria-hidden="true"></i>
-              <span class="store-badge__text">
-                <small>Descargalo en</small>
-                <strong>App Store</strong>
-              </span>
-            </div>
-          </div>
-        </div>
+        <app-telepagos-payment-content />
      }
    </section>
  </div>
@@ -143,11 +72,10 @@
      type="button"
      hostClass="checkout-payment__action-btn"
      buttonClass="w-100"
-      [disabled]="isGeneratingIntent()"
+      [disabled]="!payment.canComplete()"
      (click)="complete.emit()"
    >
      Finalizar compra
    </app-button>
  </div>
 </div>
-
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss
@@ -1,3 +1,5 @@
+@use './components/payment-methods/payment-panel' as payment-panel;
+
 .checkout-payment {
  display: grid;
  gap: 1rem;
@@ -110,197 +112,5 @@

 .payment-panel {
  min-width: 0;
-  &__card {
-    width: 100%;
-    max-width: 290px;
-    min-height: 269px;
-    padding: 1.5rem 1.75rem;
-    border-radius: 5px;
-    background: #ffffff;
-    color: #666666;
-    box-shadow: 0 0 0 1px #f1f1f1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-  }
-
-  &__title {
-    max-width: 18rem;
-    margin: 0;
-    color: #8a8a8a;
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.35;
-  }
-
-  &__divider {
-    width: 100%;
-    max-width: 220px;
-    height: 1px;
-    margin: 1.2rem 0 1.45rem;
-    background: #dddddd;
-  }
-
-  &__account {
-    width: 100%;
-    display: grid;
-    gap: 0.75rem;
-    color: #7a7a7a;
-    font-size: 12px;
-  }
-
-  &__eyebrow {
-    margin: 0;
-    color: #838383;
-    font-size: 12px;
-    font-weight: 325;
-    letter-spacing: 0.06em;
-  }
+  @include payment-panel.card;
 }
-
-.payment-detail {
-  display: grid;
-  grid-template-columns: auto auto;
-  justify-content: center;
-  gap: 0.35rem;
-  align-items: center;
-  font-size: 12px;
-
-  &--copy {
-    grid-template-columns: auto auto auto;
-  }
-
-  &__label {
-    color: #8a8a8a;
-    font-weight: 325;
-  }
-
-  &__value {
-    color: #5e5e5e;
-    font-weight: 500;
-  }
-
-  &__feedback {
-    display: block;
-    margin-top: -0.25rem;
-    color: var(--tenant-primary, #6376f3);
-    font-size: 0.78rem;
-    font-weight: 700;
-  }
-}
-
-.qr-code {
-  position: relative;
-  width: min(170px, 100%);
-  aspect-ratio: 1;
-  border: 8px solid #ffffff;
-  background-color: #ffffff;
-  background-image:
-    linear-gradient(
-      90deg,
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    ),
-    linear-gradient(
-      rgba(17, 17, 17, 0.95) 0 14%,
-      transparent 14% 28%,
-      rgba(17, 17, 17, 0.95) 28% 42%,
-      transparent 42% 56%,
-      rgba(17, 17, 17, 0.95) 56% 70%,
-      transparent 70% 84%,
-      rgba(17, 17, 17, 0.95) 84% 100%
-    );
-  background-size: 18px 18px;
-  background-position: 0 0, 9px 9px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  qrcode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-
-    ::ng-deep canvas,
-    ::ng-deep img {
-      display: block !important;
-      width: 100% !important;
-      height: 100% !important;
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-}
-
-.qr-code__finder {
-  position: absolute;
-  width: 38px;
-  height: 38px;
-  border: 5px solid #111111;
-  background: #ffffff;
-  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
-
-  &--tl {
-    top: 10px;
-    left: 10px;
-  }
-
-  &--tr {
-    top: 10px;
-    right: 10px;
-  }
-
-  &--bl {
-    bottom: 10px;
-    left: 10px;
-  }
-}
-
-.store-badges {
-  width: 100%;
-  max-width: 210px;
-  display: grid;
-  gap: 0.8rem;
-}
-
-.store-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 0.95rem;
-  border-radius: 0.85rem;
-  background: #111111;
-  color: #ffffff;
-  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
-
-  i {
-    font-size: 1.35rem;
-  }
-
-  &__text {
-    display: grid;
-    text-align: left;
-    line-height: 1.1;
-
-    small {
-      font-size: 0.62rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      opacity: 0.8;
-    }
-
-    strong {
-      font-size: 1rem;
-      font-weight: 700;
-    }
-  }
-}
-
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.spec.ts
@@ -0,0 +1,102 @@
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+
+import { CheckoutPaymentFacade } from './checkout-payment.facade';
+import { CheckoutPaymentStepComponent } from './checkout-payment-step.component';
+import { PaymentMethod, PaymentMethodOption, TransferAccount } from './checkout-page.models';
+
+describe('CheckoutPaymentStepComponent', () => {
+  const paymentMethods: ReadonlyArray<PaymentMethodOption> = [
+    { id: 'qr', label: 'QR' },
+    { id: 'transfer', label: 'Transferencia' },
+    { id: 'telepagos', label: 'TelePagos' }
+  ];
+  const transferAccount: TransferAccount = {
+    titular: 'Titular Test',
+    entidad: 'Entidad Test',
+    cvu: '0000000000000000000000',
+    alias: 'alias.test'
+  };
+
+  let fixture: ComponentFixture<CheckoutPaymentStepComponent>;
+  let payment: {
+    paymentMethods: ReadonlyArray<PaymentMethodOption>;
+    selectedMethod: ReturnType<typeof signal<PaymentMethod>>;
+    copiedTransferField: ReturnType<typeof signal<'cvu' | 'alias' | null>>;
+    transferAccount: ReturnType<typeof signal<TransferAccount | null>>;
+    payerDni: ReturnType<typeof signal<string>>;
+    transferRequestError: ReturnType<typeof signal<string | null>>;
+    qrData: ReturnType<typeof signal<string | null>>;
+    isLoading: ReturnType<typeof signal<boolean>>;
+    canComplete: ReturnType<typeof signal<boolean>>;
+    setPurchaseId: ReturnType<typeof vi.fn>;
+    selectMethod: ReturnType<typeof vi.fn>;
+    copyTransferValue: ReturnType<typeof vi.fn>;
+    requestTransferData: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(async () => {
+    payment = {
+      paymentMethods,
+      selectedMethod: signal<PaymentMethod>('qr'),
+      copiedTransferField: signal<'cvu' | 'alias' | null>(null),
+      transferAccount: signal<TransferAccount | null>(transferAccount),
+      payerDni: signal('12345678'),
+      transferRequestError: signal<string | null>(null),
+      qrData: signal<string | null>('qr-test'),
+      isLoading: signal(false),
+      canComplete: signal(true),
+      setPurchaseId: vi.fn(),
+      selectMethod: vi.fn(),
+      copyTransferValue: vi.fn(),
+      requestTransferData: vi.fn()
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [CheckoutPaymentStepComponent]
+    })
+      .overrideComponent(CheckoutPaymentStepComponent, {
+        set: { providers: [{ provide: CheckoutPaymentFacade, useValue: payment }] }
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(CheckoutPaymentStepComponent);
+  });
+
+  it.each([
+    ['qr', 'app-qr-payment-content'],
+    ['transfer', 'app-transfer-payment-content'],
+    ['telepagos', 'app-telepagos-payment-content']
+  ] as const)('renders the %s payment content', (method: PaymentMethod, selector: string) => {
+    payment.selectedMethod.set(method);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector(selector)).not.toBeNull();
+  });
+
+  it('delegates method selection to the payment facade', () => {
+    fixture.detectChanges();
+    const transferRadio = fixture.nativeElement.querySelector('input[value="transfer"]') as HTMLInputElement;
+    transferRadio.dispatchEvent(new Event('change'));
+
+    expect(payment.selectMethod).toHaveBeenCalledWith('transfer');
+  });
+
+  it('shows only the loading state while generating a QR intent', () => {
+    payment.selectedMethod.set('qr');
+    payment.isLoading.set(true);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Cargando información de pago...');
+    expect(fixture.nativeElement.querySelector('app-qr-payment-content')).toBeNull();
+  });
+
+  it('delegates transfer copy requests to the payment facade', () => {
+    payment.selectedMethod.set('transfer');
+    fixture.detectChanges();
+    fixture.nativeElement.querySelector('app-icon-button').click();
+
+    expect(payment.copyTransferValue).toHaveBeenCalledWith('cvu', transferAccount.cvu);
+  });
+});
--- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
+++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.ts
@@ -1,36 +1,46 @@
-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 { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
-import { QRCodeComponent } from '../../../../shared/components/qrcode/qrcode.component';
-import { PaymentMethod, PaymentMethodOption, TransferAccount, TransferField } from './checkout-page.models';
+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 { CheckoutPaymentFacade } from './checkout-payment.facade';
+import { PaymentMethod, TransferField } from './checkout-page.models';

@Component({
  selector: 'app-checkout-payment-step',
  standalone: true,
-  imports: [ButtonComponent, IconButtonComponent, QRCodeComponent],
+  imports: [
+    ButtonComponent,
+    QrPaymentContentComponent,
+    TelepagosPaymentContentComponent,
+    TransferPaymentContentComponent
+  ],
  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);
  }
 }
--- a/src/app/features/store/pages/checkout-page/checkout-payment.facade.ts
+++ b/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;
+  }
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
@@ -0,0 +1,41 @@
+@mixin host {
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 290px;
+  }
+}
+
+@mixin card {
+  &__card {
+    width: 100%;
+    max-width: 290px;
+    min-height: 269px;
+    padding: 1.5rem 1.75rem;
+    border-radius: 5px;
+    background: #ffffff;
+    color: #666666;
+    box-shadow: 0 0 0 1px #f1f1f1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &__title {
+    max-width: 18rem;
+    margin: 0;
+    color: #8a8a8a;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  &__divider {
+    width: 100%;
+    max-width: 220px;
+    height: 1px;
+    margin: 1.2rem 0 1.45rem;
+    background: #dddddd;
+  }
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.html
@@ -0,0 +1,14 @@
+<div class="payment-panel__card">
+  <h3 class="payment-panel__title">Ingresa a tu billetera y escanea el siguiente QR</h3>
+  <div class="payment-panel__divider"></div>
+
+  <div class="qr-code" aria-label="QR de pago">
+    @if (qrData()) {
+      <qrcode [qrdata]="qrData()!" [width]="200" [errorCorrectionLevel]="'M'"></qrcode>
+    } @else {
+      <span class="qr-code__finder qr-code__finder--tl"></span>
+      <span class="qr-code__finder qr-code__finder--tr"></span>
+      <span class="qr-code__finder qr-code__finder--bl"></span>
+    }
+  </div>
+</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
@@ -0,0 +1,81 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+}
+
+.qr-code {
+  position: relative;
+  width: min(170px, 100%);
+  aspect-ratio: 1;
+  border: 8px solid #ffffff;
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(
+      90deg,
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    ),
+    linear-gradient(
+      rgba(17, 17, 17, 0.95) 0 14%,
+      transparent 14% 28%,
+      rgba(17, 17, 17, 0.95) 28% 42%,
+      transparent 42% 56%,
+      rgba(17, 17, 17, 0.95) 56% 70%,
+      transparent 70% 84%,
+      rgba(17, 17, 17, 0.95) 84% 100%
+    );
+  background-size: 18px 18px;
+  background-position: 0 0, 9px 9px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    ::ng-deep canvas,
+    ::ng-deep img {
+      display: block !important;
+      width: 100% !important;
+      height: 100% !important;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.qr-code__finder {
+  position: absolute;
+  width: 38px;
+  height: 38px;
+  border: 5px solid #111111;
+  background: #ffffff;
+  box-shadow: inset 0 0 0 8px #ffffff, inset 0 0 0 14px #111111;
+
+  &--tl {
+    top: 10px;
+    left: 10px;
+  }
+
+  &--tr {
+    top: 10px;
+    right: 10px;
+  }
+
+  &--bl {
+    bottom: 10px;
+    left: 10px;
+  }
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.spec.ts
@@ -0,0 +1,30 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QrPaymentContentComponent } from './qr-payment-content.component';
+
+describe('QrPaymentContentComponent', () => {
+  it('shows the QR placeholder when there is no QR data', async () => {
+    await TestBed.configureTestingModule({
+      imports: [QrPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(QrPaymentContentComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelectorAll('.qr-code__finder')).toHaveLength(3);
+    expect(fixture.nativeElement.querySelector('qrcode')).toBeNull();
+  });
+
+  it('renders the QR component when data is provided', async () => {
+    await TestBed.configureTestingModule({
+      imports: [QrPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(QrPaymentContentComponent);
+    fixture.componentRef.setInput('qrData', 'payment-data');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('qrcode')).not.toBeNull();
+    expect(fixture.nativeElement.querySelector('.qr-code__finder')).toBeNull();
+  });
+});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.ts
@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { QRCodeComponent } from '../../../../../../shared/components/qrcode/qrcode.component';
+
+@Component({
+  selector: 'app-qr-payment-content',
+  standalone: true,
+  imports: [QRCodeComponent],
+  templateUrl: './qr-payment-content.component.html',
+  styleUrl: './qr-payment-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class QrPaymentContentComponent {
+  readonly qrData = input<string | null>(null);
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.html
@@ -0,0 +1,22 @@
+<div class="payment-panel__card">
+  <h3 class="payment-panel__title">Descarga la app de TelePagos para finalizar la compra</h3>
+  <div class="payment-panel__divider"></div>
+
+  <div class="store-badges" aria-label="Tiendas disponibles">
+    <div class="store-badge">
+      <i class="fa-brands fa-google-play" aria-hidden="true"></i>
+      <span class="store-badge__text">
+        <small>Disponible en</small>
+        <strong>Google Play</strong>
+      </span>
+    </div>
+
+    <div class="store-badge">
+      <i class="fa-brands fa-apple" aria-hidden="true"></i>
+      <span class="store-badge__text">
+        <small>Descargalo en</small>
+        <strong>App Store</strong>
+      </span>
+    </div>
+  </div>
+</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
@@ -0,0 +1,47 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+}
+
+.store-badges {
+  width: 100%;
+  max-width: 210px;
+  display: grid;
+  gap: 0.8rem;
+}
+
+.store-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0.95rem;
+  border-radius: 0.85rem;
+  background: #111111;
+  color: #ffffff;
+  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.16);
+
+  i {
+    font-size: 1.35rem;
+  }
+
+  &__text {
+    display: grid;
+    text-align: left;
+    line-height: 1.1;
+
+    small {
+      font-size: 0.62rem;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      opacity: 0.8;
+    }
+
+    strong {
+      font-size: 1rem;
+      font-weight: 700;
+    }
+  }
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.spec.ts
@@ -0,0 +1,20 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TelepagosPaymentContentComponent } from './telepagos-payment-content.component';
+
+describe('TelepagosPaymentContentComponent', () => {
+  it('shows the TelePagos download options', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TelepagosPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TelepagosPaymentContentComponent);
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain('Descarga la app de TelePagos');
+    expect(text).toContain('Google Play');
+    expect(text).toContain('App Store');
+    expect(fixture.nativeElement.querySelectorAll('.store-badge')).toHaveLength(2);
+  });
+});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-telepagos-payment-content',
+  standalone: true,
+  templateUrl: './telepagos-payment-content.component.html',
+  styleUrl: './telepagos-payment-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TelepagosPaymentContentComponent {}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.html
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.html
@@ -0,0 +1,78 @@
+<div class="payment-panel__card">
+  <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>
+
+  @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>
+
+      <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>
+  }
+</div>
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
@@ -0,0 +1,80 @@
+@use 'payment-panel' as payment-panel;
+
+@include payment-panel.host;
+
+.payment-panel {
+  @include payment-panel.card;
+
+  &__account {
+    width: 100%;
+    display: grid;
+    gap: 0.75rem;
+    color: #7a7a7a;
+    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;
+    font-size: 12px;
+    font-weight: 325;
+    letter-spacing: 0.06em;
+  }
+}
+
+.payment-detail {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: center;
+  gap: 0.35rem;
+  align-items: center;
+  font-size: 12px;
+
+  &--copy {
+    grid-template-columns: auto auto auto;
+  }
+
+  &__label {
+    color: #8a8a8a;
+    font-weight: 325;
+  }
+
+  &__value {
+    color: #5e5e5e;
+    font-weight: 500;
+  }
+
+  &__feedback {
+    display: block;
+    margin-top: -0.25rem;
+    color: var(--tenant-primary, #6376f3);
+    font-size: 0.78rem;
+    font-weight: 700;
+  }
+}
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.spec.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.spec.ts
@@ -0,0 +1,96 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TransferAccount } from '../../checkout-page.models';
+import { TransferPaymentContentComponent } from './transfer-payment-content.component';
+
+describe('TransferPaymentContentComponent', () => {
+  const transferAccount: TransferAccount = {
+    titular: 'Titular Test',
+    entidad: 'Entidad Test',
+    cvu: '0000000000000000000000',
+    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]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.componentRef.setInput('transferAccount', transferAccount);
+    fixture.componentRef.setInput('copiedTransferField', 'cvu');
+    fixture.detectChanges();
+
+    const text = fixture.nativeElement.textContent as string;
+    expect(text).toContain(transferAccount.titular);
+    expect(text).toContain(transferAccount.entidad);
+    expect(text).toContain(transferAccount.cvu);
+    expect(text).toContain(transferAccount.alias);
+    expect(text).toContain('CVU copiado');
+    expect(text).not.toContain('Alias copiado');
+  });
+
+  it('emits the selected transfer value', async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransferPaymentContentComponent]
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(TransferPaymentContentComponent);
+    fixture.componentRef.setInput('transferAccount', transferAccount);
+    fixture.detectChanges();
+
+    const emitted: Array<{ field: string; value: string }> = [];
+    fixture.componentInstance.copyTransferValue.subscribe((value) => emitted.push(value));
+
+    const copyButtons = fixture.nativeElement.querySelectorAll('app-icon-button');
+    copyButtons[0].click();
+    copyButtons[1].click();
+
+    expect(emitted).toEqual([
+      { field: 'cvu', value: transferAccount.cvu },
+      { field: 'alias', value: transferAccount.alias }
+    ]);
+  });
+});
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.ts
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.ts
@@ -0,0 +1,56 @@
+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: [ButtonComponent, IconButtonComponent, InputComponent],
+  templateUrl: './transfer-payment-content.component.html',
+  styleUrl: './transfer-payment-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TransferPaymentContentComponent {
+  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 });
+  }
+}
Author	SHA1	Message	Date
nahu	08f1bd8f3b	feat(checkout-page): refactor payment component tests to use signals and improve method delegation	2026-07-12 19:49:22 +00:00
nahu	950c78c0c9	feat(checkout-page): enhance payment flow with payer DNI input and refactor payment components for improved structure	2026-07-12 19:45:59 +00:00
nahu	9b183dec36	feat(checkout-page): add host mixin for payment panel components to improve layout consistency	2026-07-12 19:22:06 +00:00
nahu	fe52519b72	feat(checkout-page): refactor payment method components and enhance styling for improved modularity	2026-07-12 19:21:27 +00:00
nahu	9a03c78d4c	feat(checkout-page): integrate ToastService for error handling in payment intent generation	2026-07-12 19:05:24 +00:00