개발자
임베드 위젯
고객은 여러분의 도메인을 벗어나지 않고 결제합니다. API로 인보이스를 생성하고 자체 페이지에 CryBit 결제 폼을 렌더링하세요.
1. 인보이스 생성
동일한 POST /api/v1/payments를 사용하세요. 응답에는 항상 인보이스 uuid와 동일한 confirmation.confirmation_token이 포함됩니다. 요청의 confirmation 필드는 선택 사항입니다.
2. 스크립트 로드 및 컨테이너 추가
HTML
<script src="https://pay.crybit.net/widget.js"></script>
<div id="payment-form"></div>3. 폼 렌더링
JavaScript
const checkout = new CryBitCheckout({
confirmation_token: 'INVOICE-UUID',
return_url: 'https://merchant.example/thanks',
lang: 'en',
error_callback: (err) => console.log(err),
})
checkout.render('payment-form').then(() => { /* the form is shown */ })
checkout.on('success', () => { /* status paid: confirm the order by webhook or GET */ })
checkout.on('fail', () => { /* expired, cancelled or refunded */ })
checkout.on('complete', () => checkout.destroy())모달 창
페이지에 컨테이너가 없다면 customization: { modal: true }(또는 modal: true)로 위젯을 사이트 위에 열고, checkout.render()를 인자 없이 호출하세요.
옵션 및 이벤트
| 옵션 | 설명 |
|---|---|
confirmation_token | 필수. 인보이스 uuid입니다(별칭: uuid, invoice_uuid). |
return_url | 결제 후 고객이 이동할 위치입니다. |
lang | 인터페이스 언어이며, 지정하지 않으면 브라우저 언어가 사용됩니다. |
modal / customization.modal | 컨테이너 대신 팝업으로 표시하려면 true로 설정하세요. |
error_callback, success_callback | 오류가 발생했을 때(토큰 없음, 컨테이너 없음)와 상태가 paid로 바뀌었을 때 호출됩니다. |
이벤트: ready, status, success, fail, complete, close, error. 메서드: render(id), on(event, fn), destroy().
주문 확정은 webhook이나 상태 조회를 기준으로 하세요. 위젯 이벤트는 사용자 인터페이스 용도로만 사용해야 합니다.
FAQ
위젯을 테스트할 수 있나요?
네, 가능합니다. 테스트 가맹점에서는 위젯에 인보이스를 결제 완료로 표시하는 버튼이 나타나며 잔액은 적립되지 않습니다.