Vue & React — @yetdapay/sdk

Quick summary

This copy-in SDK adds donation and feedback UI, not full checkout or license enforcement. Choose a hosted link for the smallest integration or a native component for custom styling.

Copy the source files for your framework, configure the public integration ID, then confirm the button works in a sample page.

sdk/ is a copy-in source bundle (private: true, no npm publish): copy sdk/core.ts plus sdk/vue/YetdaPayButtons.vue or sdk/react/YetdaPayButtons.tsx into the consumer site.

Honest scope

Donation and feedback only. The bundle covers the public integration surface — hosted links and native widgets that call /public/integrations/{public_id} endpoints. It does not wrap checkout, orders, licenses, or any seller-credential API. Donations are sandbox-status records — never real money.

Install modes

• hosted — zero code deps: a plain link to {siteBase}/h/{publicId}.
• native — in-page widgets that fetch the manifest and POST donations/feedbacks.

sdk/core.ts API

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

const yp = createYetdaPay({ publicId: 'intpub_…' });   // or { 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' });

Options (YetdaPayIntegrationOptions):

Field	Default	Notes
integrationId / publicId	—	Required. The integration public_id (intpub_…) — the only credential-like value a consumer site ever needs.
mode	'hosted'	'hosted' links out; 'native' renders in-page.
apiBase	http://127.0.0.1:8080	/api/v1 appended automatically if absent.
siteBase	http://127.0.0.1:3000	Origin serving hosted pages.

Behaviors:

• submitSandboxDonation validates amount_krw > 0 and auto-generates an idempotency_key when not supplied — UI retries collapse into one donation server-side.
• submitFeedback requires a non-empty message.
• IntegrationManifest is the public projection of the integration — schema_version is an opaque string (don't hard-fail on it).
• Errors are YetdaPayError (isYetdaPayError guard).

Components

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

// React — already marked 'use client'
import { YetdaPayButtons } from './sdk/react/YetdaPayButtons';
<YetdaPayButtons publicId="intpub_…" mode="native" feature="donation" />

Props (both components): integrationId / publicId (alias), apiBase, siteBase, mode: 'hosted'|'native' (default hosted), feature: 'donation'|'feedback'|'both' (default both), donationText, feedbackText label overrides.

Contract points

1. Only public endpoints are called from the browser — a seller credential is never shipped to a visitor's browser.
2. public_id is baked in at install time; components render from the manifest and should degrade to a plain hosted <a> link when fetch fails.
3. idempotency_key is generated per checkout/donation attempt and reused on retry.