앵귤러 앱에 SeerBit 결제 통합

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Angular v16 이상 사용자, 결제 시스템 통합을 필요로 하는 웹 개발자

핵심 요약

• Angular v16+ 환경에서 seerbit-angular 라이브러리 사용 가능
• Component 또는 Directive 두 방식으로 결제 모달 통합 가능
• options 객체에서 public_key, currency, tranref 등 결제 설정 강조 (@angular/core 사용)

섹션별 세부 요약

1. 설치 및 모듈 설정

• npm install --save seerbit-angular 명령어로 라이브러리 설치
• AppModule에 NgSeerBitModule 임포트 (Angular 17+에서는 --no-standalone 옵션으로 모듈 기반 구조 생성)
• AppModule이 누락된 경우 ng new 명령어로 전통적 모듈 기반 프로젝트 생성

2. 컴포넌트 및 디렉티브 설정

• AppComponent에서 options 객체 정의: public_key, currency, tranref, customization 등 필수 속성 포함
• PaymentDone() 및 PaymentCancel() 메서드로 결제 성공/실패 시 로직 처리

3. 템플릿 및 스타일링

• 컴포넌트 또는 디렉티브 사용: [options] 바인딩 및 (callback), (close) 이벤트 처리
• 글로벌 CSS (styles.css)에서 .btn-pay 스타일 정의 (컴포넌트 범위 CSS는 적용되지 않음)

4. 실행 및 테스트

• ng serve 명령어로 앱 실행 후 결제 버튼 클릭 시 결제 흐름 테스트
• 콘솔 로그에서 PaymentDone 또는 PaymentCancel 이벤트 확인

결론

• SeerBit GitHub 저장소의 쇼핑카트 예제를 참고하여 실무 적용 (컴포넌트/디렉티브 모두 지원)
• seerbit-ng 스타일링에는 글로벌 CSS 사용 필수
• public_key 및 tranref는 반드시 보안 처리하여 관리해야 함