Vue & React — `@yetdapay/sdk`

핵심 요약

이 SDK는 후원·피드백 UI를 제공합니다. 전체 결제 처리나 라이선스 검증 SDK와는 다릅니다.

빠른 적용에는 호스티드 링크, 스타일이 필요한 경우 Vue·React 컴포넌트를 선택하고 공개 연동 ID를 설정하세요.

sdk/는 copy-in 소스 번들입니다(private: true, npm 발행 없음): sdk/core.ts와 sdk/vue/YetdaPayButtons.vue 또는 sdk/react/YetdaPayButtons.tsx를 소비자 사이트에 복사합니다.

정직한 범위

기부 및 피드백만. 번들은 공개 integration 표면을 커버합니다 — /public/integrations/{public_id} 엔드포인트를 호출하는 호스티드 링크와 네이티브 위젯. 체크아웃, 주문, 라이선스, 또는 셀러 자격 증명 API를 감싸지 않습니다. 기부는 sandbox 상태 레코드입니다 — 절대 실제 돈이 아닙니다.

설치 모드

hosted — 코드 의존성 제로: {siteBase}/h/{publicId}로의 plain 링크.
native — 매니페스트를 가져오고 donations/feedbacks를 POST하는 인페이지 위젯.

`sdk/core.ts` API

import {
  createYetdaPay, fetchManifest, hostedUrl,
  submitFeedback, submitSandboxDonation, YetdaPayError,
} from './sdk/core';

const yp = createYetdaPay({ publicId: 'intpub_…' });   // 또는 { integrationId }
await yp.manifest();                                  // GET manifest
yp.hostedUrl('donation');                             // {siteBase}/h/{publicId}#donation
await yp.sendDonation({ amount_krw: 5000, donor_name: 'fan' });
await yp.sendFeedback({ message: 'love it', type: 'feedback' });

옵션(YetdaPayIntegrationOptions):

필드	기본값	노트
`integrationId` / `publicId`	—	필수. integration `public_id`(`intpub_…`) — 소비자 사이트가 필요로 하는 유일한 자격 증명 유사 값.
`mode`	`'hosted'`	`'hosted'`는 외부 링크; `'native'`는 인페이지 렌더링.
`apiBase`	`http://127.0.0.1:8080`	`/api/v1`이 없으면 자동 추가됨.
`siteBase`	`http://127.0.0.1:3000`	호스티드 페이지를 서빙하는 origin.

동작:

submitSandboxDonation은 amount_krw > 0을 검증하고 제공되지 않으면 idempotency_key를 자동 생성합니다 — UI 재시도가 서버 측에서 하나의 기부로 합쳐집니다.
submitFeedback은 비어있지 않은 message가 필요합니다.
IntegrationManifest는 integration의 공개 프로젝션입니다 — schema_version은 불투명 문자열입니다(하드 실패하지 마세요).
오류는 YetdaPayError(isYetdaPayError 가드).

컴포넌트

vue

<!-- Vue / Nuxt -->
<script setup>
import YetdaPayButtons from './sdk/vue/YetdaPayButtons.vue';
</script>
<YetdaPayButtons publicId="intpub_…" mode="native" feature="both" />

tsx

// React — 이미 'use client' 표시됨
import { YetdaPayButtons } from './sdk/react/YetdaPayButtons';
<YetdaPayButtons publicId="intpub_…" mode="native" feature="donation" />

Props(두 컴포넌트 공통): integrationId / publicId(별칭), apiBase, siteBase, mode: 'hosted'|'native'(기본 hosted), feature: 'donation'|'feedback'|'both'(기본 both), donationText, feedbackText 라벨 오버라이드.

계약 포인트

브라우저에서는 공개 엔드포인트만 호출됩니다 — 셀러 자격 증명이 방문자 브라우저로 절대 전달되지 않습니다.
public_id는 설치 시점에 베이크됩니다; 컴포넌트는 매니페스트에서 렌더링하고 fetch 실패 시 plain 호스티드 <a> 링크로 디그레이드해야 합니다.
idempotency_key는 체크아웃/기부 시도당 생성되고 재시도 시 재사용됩니다.

Vue & React — @yetdapay/sdk ​

정직한 범위 ​

설치 모드 ​

sdk/core.ts API ​

컴포넌트 ​