# Worldpay AWP Store Guide > 참고용 Worldpay AWP 가이드 Url : > https://docs.worldpay.com/access/products/checkout/web/card-only ## Store 구현 설명 1. Worldpay checkout JS 로드 2. iframe이 랜더링될 container 요소 생성 3. Worldpay.checkout.init 호출로 iframe 주입 4. submit 버튼을 이용한 결제 결제 요청 ## Store Iframe 적용 가이드 #### **예제 전체 코드** ```html Worldpay checkout
Card number
Expiry date
CVV
``` ### 1. iframe 구성 body 내 결제 구성하고자 하는 부분에 section 추가 ```html
Card number
Expiry date
CVV
``` ### 2. JavaScript 구성 JavaScript에서 `Worldpay.checkout.init`으로 설정해 iframe 결제창을 제어하는 방식입니다. >checkout ID : (필수) EBP로 부터 전달 받은 checkout ID ```html ``` ### **3. 결제창 Customize( 선택 )** > 참고용 Worldpay 커스터마이즈 가이드 Url : > https://docs.worldpay.com/access/products/checkout/web/styles
No 방식 속성명 속성값 (예제) 설명
① HTML input red (카드번호, 만료일, CVV) 입력 시 텍스트 색을 변경 할 수 있습니다.
JavaScript color
② HTML input bold 입력하는 텍스트의 강조 여부를 지정 할 수 있습니다.
JavaScript ont-weight
③ HTML font-size 25px 입력하는 텍스트의 크기를 조절 할 수 있습니다.
JavaScript color
④ HTML input 3px 입력하는 글자 간격을 조절 할 수 있습니다.
JavaScript letter-spacing
⑤ HTML data-frame-label black 텍스트 입력 시 글자 색을 변경 할 수 있습니다.
style .card .checkout .field.is-onfocus
⑥ HTML data-frame-label orange 포커스 된 항목 값이 비어있을때 라인 색을 선택 할 수 있습니다.
style .card .checkout .field.is-empty
⑦ HTML data-frame-label red 입력된 텍스트 값에 오류가 있을 때 라인 색을 선택 할 수 있습니다.
style .card .checkout .field.is-invalid
⑧ HTML data-frame-label black 입력된 텍스트 값이 정상 일때 라인 색을 선택 할 수 있습니다.
style .card .checkout .field.is-valid
⑨ HTML data-frame-label black 텍스트 입력 시 글자 색을 변경 할 수 있습니다.
style .card .checkout .field.is-onfocus
⑩ HTML data-frame-label ./{cardName}.png 카드번호 입력 시 백그라운드 이미지를 변경 할 수 있습니다.
style .card .checkout.{cardName} .label .type:before