웹 스크립트 SDK

웹사이트에 공식 스크립트 한 줄을 넣으면 Pouchi 로그인 버튼이 생성됩니다. React, Provider, npm 패키지 설치나 API 비밀키는 필요하지 않습니다. 사용자 인증과 결제 승인은 별도의 Pouchi 창에서 진행합니다.

앱 등록

business@pouchi.app으로 앱 등록을 요청하고 발급받은 앱 ID를 사용하세요. 예시의 tenant_your_app을 그대로 쓰면 실제 로그인에 사용할 수 없습니다.

개발·배포 환경의 허용 출처를 등록해야 합니다. 출처는 도메인뿐 아니라 프로토콜과 포트를 포함합니다. 예를 들어 https://app.example.com과 http://localhost:31733은 서로 다른 출처입니다. 다른 데모의 앱 ID를 복사하지 마세요.

앱의 기본 지갑 분리·공유 설정도 등록 단계에서 확인합니다. 스크립트는 앱에 설정된 방식을 따릅니다. 현재 버전의 API 주소, 키 보관 출처와 체인은 고정되어 있으며 스크립트 속성으로 바꿀 수 없습니다.

스크립트 삽입

<script defer src="https://pouchi-wallet.vercel.app/sdk/v1/pouchi.js" data-app-id="tenant_your_app"></script>

문서의 head 또는 body에 넣을 수 있습니다. body 안에서는 스크립트 다음에, head 안에서는 본문 마지막에 관리형 로그인 버튼이 생성됩니다.

기존 요소 안에 버튼을 넣으려면 대상 요소를 먼저 두고 data-target을 추가합니다.

<div id="pouchi-login"></div>
<script defer src="https://pouchi-wallet.vercel.app/sdk/v1/pouchi.js" data-app-id="tenant_your_app" data-target="pouchi-login"></script>

자동 생성되는 내용은 로그인·로그아웃 버튼과 로그인된 사용자의 공개 상태입니다. 상품 화면, 결제 버튼이나 결제 요청까지 자동으로 만들어 주지는 않습니다.

로그인 상태

스크립트가 준비되면 pouchi:ready, 로그인 상태가 바뀌면 pouchi:change 이벤트가 발생합니다. 스크립트 실행 후 window.Pouchi.getUser()로 현재 상태를 읽을 수도 있습니다. 반환값은 로그인 전에는 null, 로그인 후에는 앱별 사용자 ID와 허용된 이메일·지갑 주소입니다.

기존 버튼에서 window.Pouchi.login()을 호출할 때는 사용자 클릭 핸들러에서 직접 실행하세요. 팝업이나 저장소 사용이 차단되면 앱 출처에 키를 보관하는 방식으로 대신 처리하지 않습니다.

결제 요청

받는 주소·호출 대상·한도·가스비 대납 설정을 미리 등록한 뒤 사용자 클릭에서 요청합니다. value의 단위는 wei입니다. 아래 registeredTestRecipient는 앱에서 확인한 테스트 수신 주소로 준비해야 합니다.

payButton.onclick = async () => {
  if (window.Pouchi.getPendingPayment()) {
    const status = await window.Pouchi.getPaymentStatus();
    // 기존 요청을 확인한 뒤 UI를 갱신합니다. 새 결제를 자동 제출하지 않습니다.
    return;
  }
  const result = await window.Pouchi.sendTransaction({
    to: registeredTestRecipient,
    value: "10000000000000000",
    chainId: 450815,
  });
  // 0.01 테스트 자산. result.hash의 성공 영수증을 확인한 뒤 완료 처리합니다.
};

승인 후 타임아웃이 나면 같은 결제를 무조건 다시 보내지 마세요. getPendingPayment()와 getPaymentStatus()로 기존 요청을 확인합니다. 트랜잭션 해시를 받았다는 사실만으로 상품을 제공하지 말고 체인의 성공 영수증을 확인해야 합니다.

서버 인증과 세션

getIdentityToken()은 서명된 신원 토큰, getAccessToken()은 앱 접근용 bearer를 반환합니다. 서버는 신원 토큰의 서명·발급자·앱 대상·만료를 검증해야 합니다. 브라우저에서 토큰 내용을 읽는 것만으로 서버 인증을 대신하지 마세요. 서버 연동

토큰을 URL, 로그나 HTML 속성에 넣지 마세요. logout()은 현재 앱 세션을 종료하며 모든 앱을 일괄 로그아웃시키거나 키 보관 영역을 삭제하지 않습니다.

페이지 정책

스크립트·스타일은 https://pouchi-wallet.vercel.app, API 연결은 https://15.164.50.132, 로그인·승인 창은 https://vault.15-164-50-132.sslip.io를 사용합니다. 사이트의 CSP와 팝업·창 분리 정책이 이 동작을 허용하는지 실제 배포 환경에서 확인하세요.

한 페이지에는 하나의 앱 ID를 사용합니다. 단일 페이지 앱에서는 mount(element), unmount(element), destroy()로 화면 생성과 정리를 제어할 수 있습니다. React Provider와 훅을 사용하는 방식은 React 빠른 시작에서 확인하세요.