Web SDK integration

<script src="https://sdk.sandbox-next.peachpayments.com/sandbox/web/0.133.4/v1/HyperLoader.js"></script>

// src/types/hyper.d.ts
interface Hyper {
  elements(options: ElementsOptions): any;
  confirmPayment(options: ConfirmPaymentOptions): Promise<PaymentResult>;
  confirmSetup(options: ConfirmSetupOptions): Promise<SetupResult>;
}

declare function Hyper(
  publishableKey: string,
  options?: { customBackendUrl?: string },
): Hyper;

// services/hyper.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, from, Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root',
})
export class HyperService {
  private hyper$ = new BehaviorSubject<Hyper | null>(null);
  private isLoading$ = new BehaviorSubject<boolean>(true);

  constructor() {
    this.initializeHyper();
  }

  private async initializeHyper(): Promise<void> {
    try {
      const hyper = Hyper(environment.hyperPublishableKey, {
        customBackendUrl: environment.hyperApiUrl,
      });
      this.hyper$.next(hyper);
    } finally {
      this.isLoading$.next(false);
    }
  }

  getHyper(): Observable<Hyper | null> {
    return this.hyper$.asObservable();
  }

  getHyperSync(): Hyper | null {
    return this.hyper$.getValue();
  }

  isLoading(): Observable<boolean> {
    return this.isLoading$.asObservable();
  }
}

export const environment = {
  production: false,
  hyperPublishableKey: 'pk_test_xxx',
  hyperApiUrl: 'https://app.sandbox-next.peachpayments.com/api',
  apiUrl: 'http://localhost:3000/api',
};

export const environment = {
  production: true,
  hyperPublishableKey: 'pk_live_xxx',
  hyperApiUrl: 'https://app.next.peachpayments.com/api',
  apiUrl: 'https://api.yoursite.com',
};

import {
  Component,
  OnInit,
  OnDestroy,
  ElementRef,
  ViewChild,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { HyperService } from '../services/hyper.service';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [CommonModule],
  template: `
    <form (ngSubmit)="handleSubmit()">
      <div #paymentElement class="mb-4"></div>

      <div *ngIf="error" class="text-red-600 mb-4">
        {{ error }}
      </div>

      <button
        type="submit"
        [disabled]="processing || !isReady"
        class="w-full py-3 bg-blue-600 text-white rounded-lg disabled:opacity-50"
      >
        {{ processing ? 'Processing...' : 'Pay Now' }}
      </button>
    </form>
  `,
})
export class CheckoutComponent implements OnInit, OnDestroy {
  @ViewChild('paymentElement', { static: true })
  paymentElementRef!: ElementRef<HTMLDivElement>;

  private destroy$ = new Subject<void>();
  private hyper: any;
  private elements: any;
  private paymentElement: any;

  isReady = false;
  processing = false;
  error: string | null = null;

  constructor(
    private hyperService: HyperService,
    private http: HttpClient,
  ) {}

  async ngOnInit(): Promise<void> {
    // Wait for Hyper SDK
    this.hyperService
      .getHyper()
      .pipe(takeUntil(this.destroy$))
      .subscribe(async (hyper) => {
        if (!hyper) return;

        this.hyper = hyper;
        await this.initializePayment();
      });
  }

  private async initializePayment(): Promise<void> {
    // Create payment intent
    const { clientSecret } = (await this.http
      .post<{ clientSecret: string }>('/api/create-payment-intent', {
        amount: 6500,
        currency: 'zar',
      })
      .toPromise()) || { clientSecret: '' };

    // Create Elements
    this.elements = this.hyper.elements({
      clientSecret,
      appearance: { theme: 'stripe' },
    });

    // Create and mount Payment Element
    this.paymentElement = this.elements.create('payment');
    this.paymentElement.mount(this.paymentElementRef.nativeElement);

    this.paymentElement.on('change', (event: any) => {
      this.error = event.error?.message || null;
    });

    this.isReady = true;
  }

  async handleSubmit(): Promise<void> {
    if (!this.hyper || !this.elements) return;

    this.processing = true;
    this.error = null;

    const { error, paymentIntent } = await this.hyper.confirmPayment({
      elements: this.elements,
      confirmParams: {
        return_url: `${window.location.origin}/payment-complete`,
      },
      redirect: 'if_required',
    });

    if (error) {
      this.error = error.message;
      this.processing = false;
    } else if (paymentIntent?.status === 'succeeded') {
      window.location.href = '/payment-success';
    }
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.paymentElement?.unmount();
  }
}

private initializePaymentElement(): void {
  this.paymentElement = this.elements.create('payment', {
    // Display order (first = highest priority)
    paymentMethodOrder: [
      'card',
      'apple_pay',
      'google_pay',
      'samsung_pay',
      'payjustnow',
    ],
    layout: 'tabs',
  });
  this.paymentElement.mount(this.paymentElementRef.nativeElement);
}

// payment.service.ts - Server-side control
@Injectable({ providedIn: 'root' })
export class PaymentService {
  constructor(private http: HttpClient) {}

  createPaymentIntent(
    amount: number,
    enabledMethods: string[] = ['card'],
  ): Observable<{ clientSecret: string }> {
    return this.http.post<{ clientSecret: string }>(
      '/api/create-payment-intent',
      {
        amount,
        currency: 'zar',
        payment_method_types: enabledMethods,
      },
    );
  }
}

const methods = ['card'];
if (this.cart.total >= 50000) {
  methods.push('payjustnow');
}
this.paymentService.createPaymentIntent(this.cart.total, methods);

this.paymentElement = this.elements.create('payment', {
  wallets: {
    applePay: 'auto', // 'auto' | 'never' | 'always'
    googlePay: 'never', // Disable Google Pay
  },
});

interface PaymentElementOptions {
  // Layout
  layout: 'tabs' | {
    type: 'accordion' | 'tabs';
    defaultCollapsed?: boolean;
    radios?: boolean;
    spacedAccordionItems?: boolean;
    maxAccordionItems?: number;
  };

  // Method ordering
  paymentMethodOrder?: string[];

  // Wallet configuration
  wallets?: {
    applePay?: 'auto' | 'never' | 'always';
    googlePay?: 'auto' | 'never' | 'always';
  };

  // Saved payment methods
  displaySavedPaymentMethods?: boolean;
  displaySavedPaymentMethodsCheckbox?: boolean;

  // Field configuration
  fields?: {
    billingDetails?: {
      name?: 'auto' | 'never';
      email?: 'auto' | 'never';
      phone?: 'auto' | 'never';
      address?: 'auto' | 'never' | { ... };
    };
  };

  // Terms display
  terms?: {
    card?: 'auto' | 'always' | 'never';
    // ... per payment method
  };

  // Read-only mode
  readOnly?: boolean;

  // Render non-card redirects inline, in an embedded iframe, instead of
  // the full-screen overlay popout. Pair with sdkHandleConfirmPayment.
  inline_iframe_redirection_enabled?: boolean;

  // Return URL for confirms the SDK handles from inside the element
  // (required when inline_iframe_redirection_enabled is on).
  sdkHandleConfirmPayment?: {
    confirmParams: { return_url: string };
  };
}

const options: PaymentElementOptions = {
  // ...your existing options (layout, paymentMethodOrder, wallets, ...)
  inline_iframe_redirection_enabled: true,
  sdkHandleConfirmPayment: {
    confirmParams: { return_url: 'https://your-site.com/checkout/complete' },
  },
};
const paymentElement = elements.create('payment', options);

@Component({
  selector: 'app-wallet-buttons',
  standalone: true,
  imports: [CommonModule],
  template: ` <div *ngIf="canPay" #walletButton class="mb-4"></div> `,
})
export class WalletButtonsComponent implements OnInit {
  @ViewChild('walletButton', { static: false })
  walletButtonRef!: ElementRef<HTMLDivElement>;

  canPay = false;
  walletType: 'apple' | 'google' | null = null;

  constructor(private hyperService: HyperService) {}

  async ngOnInit(): Promise<void> {
    const hyper = this.hyperService.getHyperSync();
    if (!hyper) return;

    const paymentRequest = hyper.paymentRequest({
      country: 'ZA',
      currency: 'zar',
      total: { label: 'Your Store', amount: 6500 },
      requestPayerName: true,
      requestPayerEmail: true,
    });

    const result = await paymentRequest.canMakePayment();

    if (result?.applePay) {
      this.walletType = 'apple';
      this.canPay = true;
    } else if (result?.googlePay) {
      this.walletType = 'google';
      this.canPay = true;
    }

    if (this.canPay) {
      setTimeout(() => {
        const elements = hyper.elements();
        const prButton = elements.create('paymentRequestButton', {
          paymentRequest,
          style: { paymentRequestButton: { height: '48px' } },
        });
        prButton.mount(this.walletButtonRef.nativeElement);
      });
    }
  }
}

@Component({
  selector: 'app-saved-cards-checkout',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngIf="loading">Loading saved cards...</div>
    <form *ngIf="!loading" (ngSubmit)="handleSubmit()">
      <div #paymentElement class="mb-4"></div>
      <button type="submit" [disabled]="processing">
        {{ processing ? 'Processing...' : 'Pay Now' }}
      </button>
    </form>
  `,
})
export class SavedCardsCheckoutComponent implements OnInit {
  @ViewChild('paymentElement', { static: false })
  paymentElementRef!: ElementRef<HTMLDivElement>;

  loading = true;
  processing = false;
  private hyper: any;
  private elements: any;

  constructor(
    private hyperService: HyperService,
    private http: HttpClient,
  ) {}

  async ngOnInit(): Promise<void> {
    this.hyper = this.hyperService.getHyperSync();

    // Fetch checkout session with customer data
    const data = await this.http
      .post<{
        clientSecret: string;
        customerSessionClientSecret?: string;
      }>('/api/checkout-session', { customerId: 'cus_xxx' })
      .toPromise();

    // Initialise with customer session for saved cards
    this.elements = this.hyper.elements({
      clientSecret: data!.clientSecret,
      customerSessionClientSecret: data!.customerSessionClientSecret,
    });

    this.loading = false;

    // Mount after view updates
    setTimeout(() => {
      const paymentElement = this.elements.create('payment');
      paymentElement.mount(this.paymentElementRef.nativeElement);
    });
  }

  async handleSubmit(): Promise<void> {
    // ... same as basic integration
  }
}

@Injectable({ providedIn: 'root' })
export class SetupIntentService {
  constructor(
    private hyperService: HyperService,
    private http: HttpClient,
  ) {}

  async saveCard(customerId: string): Promise<void> {
    const hyper = this.hyperService.getHyperSync();

    const { clientSecret } = (await this.http
      .post<{ clientSecret: string }>('/api/create-setup-intent', {
        customerId,
      })
      .toPromise()) || { clientSecret: '' };

    const elements = hyper!.elements({ clientSecret });
    // ... mount and confirm
  }
}

@Injectable({ providedIn: 'root' })
export class PaymentErrorHandler {
  private cardErrorMessages: Record<string, string> = {
    card_declined: 'Your card was declined.',
    expired_card: 'Your card has expired.',
    incorrect_cvc: 'Incorrect security code.',
    insufficient_funds: 'Insufficient funds.',
    processing_error: 'Processing error. Try again.',
  };

  handleError(error: any): string {
    if (error.type === 'card_error') {
      return this.cardErrorMessages[error.code] || error.message;
    }

    if (error.type === 'validation_error') {
      return 'Please check your payment details.';
    }

    return error.message || 'An error occurred.';
  }
}

export class CheckoutComponent {
  error: string | null = null;

  constructor(
    private hyperService: HyperService,
    private errorHandler: PaymentErrorHandler,
  ) {}

  async handleSubmit(): Promise<void> {
    this.processing = true;
    this.error = null;

    try {
      const { error, paymentIntent } = await this.hyper.confirmPayment({
        elements: this.elements,
        confirmParams: {
          return_url: `${window.location.origin}/complete`,
        },
        redirect: 'if_required',
      });

      if (error) {
        this.error = this.errorHandler.handleError(error);
      } else if (paymentIntent) {
        this.handlePaymentIntent(paymentIntent);
      }
    } catch (e: any) {
      this.error = 'An unexpected error occurred.';
      console.error(e);
    } finally {
      this.processing = false;
    }
  }

  private handlePaymentIntent(paymentIntent: any): void {
    switch (paymentIntent.status) {
      case 'succeeded':
        this.router.navigate(['/success']);
        break;
      case 'processing':
        this.error = 'Payment is processing...';
        break;
      case 'requires_payment_method':
        this.error = 'Payment failed. Try another method.';
        break;
    }
  }
}

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  isDark = signal(window.matchMedia('(prefers-color-scheme: dark)').matches);

  constructor() {
    window
      .matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', (e) => {
        this.isDark.set(e.matches);
      });
  }

  getAppearance(): Appearance {
    return this.isDark() ? this.darkAppearance : this.lightAppearance;
  }

  private lightAppearance: Appearance = {
    theme: 'stripe',
    variables: {
      colorPrimary: '#0066FF',
      colorBackground: '#ffffff',
      colorText: '#1a1a1a',
      fontFamily: 'Inter, system-ui, sans-serif',
      borderRadius: '8px',
    },
    rules: {
      '.Input': {
        border: '1px solid #e5e7eb',
        padding: '12px',
      },
      '.Input:focus': {
        borderColor: '#0066FF',
        boxShadow: '0 0 0 2px rgba(0, 102, 255, 0.2)',
      },
    },
  };

  private darkAppearance: Appearance = {
    theme: 'night',
    variables: {
      colorPrimary: '#4da3ff',
      colorBackground: '#1a1a1a',
      colorText: '#ffffff',
      fontFamily: 'Inter, system-ui, sans-serif',
      borderRadius: '8px',
    },
  };
}

export class CheckoutComponent implements OnInit {
  constructor(
    private themeService: ThemeService,
    private hyperService: HyperService,
  ) {}

  async initializePayment(): Promise<void> {
    this.elements = this.hyper.elements({
      clientSecret,
      appearance: this.themeService.getAppearance(),
    });

    this.paymentElement = this.elements.create('payment', {
      layout: {
        type: 'accordion',
        defaultCollapsed: false,
        radios: true,
      },
    });
  }
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CheckoutComponent } from './checkout.component';
import { HyperService } from '../services/hyper.service';
import { of } from 'rxjs';

describe('CheckoutComponent', () => {
  let component: CheckoutComponent;
  let fixture: ComponentFixture<CheckoutComponent>;
  let hyperServiceSpy: jasmine.SpyObj<HyperService>;

  const mockHyper = {
    elements: jasmine.createSpy().and.returnValue({
      create: jasmine.createSpy().and.returnValue({
        mount: jasmine.createSpy(),
        unmount: jasmine.createSpy(),
        on: jasmine.createSpy(),
      }),
    }),
    confirmPayment: jasmine.createSpy(),
  };

  beforeEach(async () => {
    hyperServiceSpy = jasmine.createSpyObj('HyperService', [
      'getHyper',
      'getHyperSync',
    ]);
    hyperServiceSpy.getHyper.and.returnValue(of(mockHyper));
    hyperServiceSpy.getHyperSync.and.returnValue(mockHyper);

    await TestBed.configureTestingModule({
      imports: [CheckoutComponent, HttpClientTestingModule],
      providers: [{ provide: HyperService, useValue: hyperServiceSpy }],
    }).compileComponents();

    fixture = TestBed.createComponent(CheckoutComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should show error on payment failure', async () => {
    mockHyper.confirmPayment.and.returnValue(
      Promise.resolve({
        error: { message: 'Card declined' },
      }),
    );

    await component.handleSubmit();

    expect(component.error).toBe('Card declined');
  });
});

import { test, expect } from '@playwright/test';

test('checkout flow', async ({ page }) => {
  await page.goto('/checkout');

  const frame = page.frameLocator('iframe[name^="__privateHyper"]');
  await frame.locator('[name="cardnumber"]').fill('4242424242424242');
  await frame.locator('[name="exp-date"]').fill('1234');
  await frame.locator('[name="cvc"]').fill('123');

  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/\/success/);
});

@ViewChild('paymentElement', { static: false })
paymentElementRef?: ElementRef<HTMLDivElement>;

ngAfterViewInit(): void {
  if (this.paymentElementRef) {
    this.mountPaymentElement();
  }
}

constructor(private ngZone: NgZone) {}

async handleSubmit(): Promise<void> {
  const result = await this.hyper.confirmPayment({...});

  this.ngZone.run(() => {
    // Update component state here
    this.processing = false;
    this.error = result.error?.message || null;
  });
}

export class CheckoutComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.paymentElement?.unmount();
  }
}

constructor(private cdr: ChangeDetectorRef) {}

async handleSubmit(): Promise<void> {
  // ... async operations
  this.error = error.message;
  this.cdr.detectChanges(); // Force update
}

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

constructor(@Inject(PLATFORM_ID) private platformId: object) {}

ngOnInit(): void {
  if (isPlatformBrowser(this.platformId)) {
    this.initializeHyper();
  }
}