# Omise iframe Guide > 참고용 Omise 가이드 Url
> Omise JS : https://docs.omise.co/omise-js ## Store 구현 설명 - omise.js를 사용하여 HTML 또는 JavaScript 방식으로 구성 할 수 있습니다. 1. Omise.js를 로드하는 요소를 생성합니다. >\ 2. 페이지가 로드되면 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 HTML 데이터 속성으로 구성 예제
``` ### **2. JavaScript 구성 방식** JavaScript에서 `OmiseCard.configure()`로 설정해 iframe 결제창을 제어하는 방식입니다. >publicKey : (필수) 대시 보드 에서 확인할 수 있는 공개 키 #### **2.1 예제** ```html JavaScript 사용으로 구성 예제
``` ### **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