Omise iframe Guide #
참고용 Omise 가이드 Url
Omise JS : https://docs.omise.co/omise-js
Store 구현 설명 #
- omise.js를 사용하여 HTML 또는 JavaScript 방식으로 구성 할 수 있습니다.
- Omise.js를 로드하는 요소를 생성합니다.
<script type="text/javascript" src="https://cdn.omise.co/omise.js">
- 페이지가 로드되면 Omise객체가 사용자 환경에 로드됩니다.
Store Iframe 적용 가이드 #
1. HTML 데이터 속성(data-*) 방식 #
Omise iframe 기능을 script 태그에 data-* 속성으로 설정하여 사용합니다.
자세한 파라미터: https://docs.omise.co/omise-js#parameters
1.1 주요 데이터 속성 #
| 속성명 | 설명 |
|---|---|
data-key | (필수) 공개 키 |
data-amount | (필수) 결제금액(최소 단위) |
data-image | 로고 이미지 URL |
data-currency | 통화(기본값: THB) |
data-button-label | 버튼 레이블 |
data-frame-label | 팝업 창 헤더 |
data-submit-label | 제출 버튼 레이블 |
→ 해당 스크립트가 로드되면 Omise, OmiseCard 객체가 자동으로 전역에 등록됩니다.
1.2 예제 #
<html>
<head>
<meta charset="utf-8" />
<title>HTML 데이터 속성으로 구성 예제</title>
</head>
<body>
<form name="checkoutForm" method="GET" action="EBP_API_">
<script type="text/javascript" src="https://cdn.omise.co/omise.js" // omise.js (반드시 필요)
data-key="{YOUR_PUBLIC_KEY}"
data-image="{YOUR_IMAGE_URL}"
data-amount="99500"
data-currency="THB"
data-button-label="Pay now"
data-frame-label="LG전자"
data-submit-label="결제 금액">
</script>
</form>
</body>
</html>
2. JavaScript 구성 방식 #
JavaScript에서 OmiseCard.configure()로 설정해 iframe 결제창을 제어하는 방식입니다.
publicKey : (필수) 대시 보드 에서 확인할 수 있는 공개 키
2.1 예제 #
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript 사용으로 구성 예제</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- omise.js (반드시 필요) -->
<script type="text/javascript" src="https://cdn.omise.co/omise.js"></script>
</head>
<body>
<form id="checkoutForm" method="POST" action="EBP_API_">
<input type="hidden" name="omiseToken">
<input type="hidden" name="omiseSource">
<button type="submit" id="checkoutButton">Pay now</button>
</form>
<script>
OmiseCard.configure({
publicKey: "{YOUR_PUBLIC_KEY}",
frameLabel: "LG전자",
submitLabel: "결제 금액",
image: "{YOUR_IMAGE_URL}"
});
var button = document.querySelector("#checkoutButton");
var form = document.querySelector("#checkoutForm");
button.addEventListener("click", (event) => {
event.preventDefault();
OmiseCard.open({
amount: 12345,
currency: "THB",
defaultPaymentMethod: "credit_card",
onCreateTokenSuccess: (nonce) => {
if (nonce.startsWith("tokn_")) {
form.omiseToken.value = nonce;
} else {
form.omiseSource.value = nonce;
}
form.submit();
}
});
});
</script>
</body>
</html>
3. 결제창 Customize( 선택 ) #
결제창을 사용자 정의로 바꿀수 있는 부분은 아래와 같습니다.
| No | 방식 | 속성명 | 속성값 (예제) | 설명 |
|---|---|---|---|---|
| ① | HTML | data-image | https://www.lg.co.kr/images/common/img_ci_logo_mo.jpg | 로고 이미지 URL * 올리실 이미지를 전달해 주시면 서버에 업로드 후 URL을 전달해 드리겠습니다. |
| JavaScript | image | |||
| ② | HTML | data-frame-label | LG전자 | 팝업 창 헤더 |
| JavaScript | frameLabel | |||
| ③ | HTML | data-submit-label | 결제 금액 | 제출 버튼 레이블 |
| JavaScript | submitLabel |
