PayApp payment integration core library (framework-agnostic)
npm install payapp-corePayApp 결제 연동 Core 라이브러리 (Framework-agnostic)
- ✅ Framework-agnostic: React, Vue, Angular, Vanilla JS 등 모든 프레임워크에서 사용 가능
- ✅ TypeScript: 완전한 타입 지원
- ✅ REST API & JavaScript SDK: 두 가지 방식 모두 지원
- ✅ Webhook 처리: Supabase Edge Function 등에서 사용 가능한 Webhook 핸들러 제공
``bash`
npm install payapp-core
`typescript
import { createPayAppClient } from 'payapp-core';
const client = createPayAppClient({
userid: 'your_userid',
linkkey: 'your_linkkey',
linkval: 'your_linkval',
});
// 결제 요청
const response = await client.requestPayment({
shopname: '상점명',
goodname: '상품명',
price: 10000,
recvphone: '01012341234',
});
console.log(response.payurl); // 결제 페이지 URL
`
`typescript
import {
loadPayAppSDK,
initPayAppSDK,
requestPaymentWithSDK
} from 'payapp-core';
// SDK 로드
await loadPayAppSDK();
// SDK 초기화
initPayAppSDK('your_userid', '상점명');
// 결제 요청
requestPaymentWithSDK({
goodname: '상품명',
price: 10000,
recvphone: '01012341234',
});
`
`typescript
import { createWebhookHandler } from 'payapp-core/webhook';
const handler = createWebhookHandler(
{
userid: 'your_userid',
linkkey: 'your_linkkey',
linkval: 'your_linkval',
},
{
onPaymentCompleted: async (feedback) => {
console.log('결제 완료:', feedback.mul_no);
// 결제 완료 처리 로직
},
onPaymentCancelled: async (feedback) => {
console.log('결제 취소:', feedback.mul_no);
// 결제 취소 처리 로직
},
}
);
// Supabase Edge Function에서 사용
Deno.serve(handler);
`
- requestPayment() - 결제 요청cancelPayment()
- - 결제 취소registerBill()
- - 등록결제 등록deleteBill()
- - 등록결제 삭제payWithBill()
- - 등록결제로 결제registerRecurringPayment()
- - 정기결제 요청cancelRecurringPayment()
- - 정기결제 해지stopRecurringPayment()
- - 정기결제 일시정지startRecurringPayment()
- - 정기결제 재개issueCashReceipt()
- - 현금영수증 발행cancelCashReceipt()
- - 현금영수증 취소
- PayAppWebhookProcessor - Webhook 처리 클래스createWebhookHandler()
- - Supabase Edge Function용 핸들러 생성validateFeedback()
- - Webhook 검증isPaymentCompleted()
- - 결제 완료 상태 확인isPaymentCancelled()
- - 결제 취소 상태 확인
`javascript
import { createPayAppClient } from 'payapp-core';
const client = createPayAppClient({
userid: 'your_userid',
linkkey: 'your_linkkey',
linkval: 'your_linkval',
});
document.getElementById('payBtn').addEventListener('click', async () => {
const response = await client.requestPayment({
shopname: '상점명',
goodname: '상품명',
price: 10000,
recvphone: '01012341234',
});
window.location.href = response.payurl;
});
`
`vue
`
`typescript
import { Component } from '@angular/core';
import { createPayAppClient } from 'payapp-core';
@Component({
selector: 'app-payment',
template: ''
})
export class PaymentComponent {
private client = createPayAppClient({
userid: environment.payappUserId,
linkkey: environment.payappLinkKey,
linkval: environment.payappLinkVal,
});
async handlePayment() {
const response = await this.client.requestPayment({
shopname: '상점명',
goodname: '상품명',
price: 10000,
recvphone: '01012341234',
});
window.location.href = response.payurl!;
}
}
`
React를 사용하는 경우 payapp-react 패키지를 사용하는 것을 권장합니다:
`bash`
npm install payapp-react
`tsx
import { usePayApp } from 'payapp-react';
function PaymentButton() {
const { requestPayment, isLoading } = usePayApp({
credentials: {
userid: process.env.REACT_APP_PAYAPP_USER_ID,
linkkey: process.env.REACT_APP_PAYAPP_LINK_KEY,
linkval: process.env.REACT_APP_PAYAPP_LINK_VAL,
}
});
return (
);
}
``
MIT