# Checkout iframe Guide
> EBP API 호출응답값으로 paymentSession 전문을 제공합니다.
> 결제창 가이드 : https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/get-started-with-flow
> Customize 가이드 : https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration
1. Store 결제화면 구현 설명
* checkout js 로드 :
* iframe이 랜더링될 container 요소 생성 :
* CheckoutWebComponents 호출하여 iframe을 container에 주입
| CheckoutWebComponents 자바스크립트 키 | 설명 |
|--------------------------------|------|
| `appearance` | 요소들의 시각적 외관을 커스터마이즈할 수 있습니다. 사용 가능한 커스터마이징 옵션은 **Appearance options** 문서를 참고하세요. |
| `componentOptions` | 개별 플로우 컴포넌트에 대한 옵션을 맞춤 설정할 수 있습니다. 예를 들어, 컴포넌트 내 카드 홀더 필드의 위치를 변경할 수 있습니다. 자세한 내용은 **컴포넌트 옵션 문서**를 참고하세요. |
| `environment` | 라이브러리가 요청을 보내는 환경을 설정합니다. 가능한 값은 다음과 같습니다: `production`, `sandbox` |
| `locale` | 고객의 위치(언어/지역)를 설정합니다. 명시적으로 설정하면 반환되는 UI 텍스트에 적용됩니다. 지원되는 언어 목록은 **현지화 문서**를 참고하세요. |
| `paymentSession` | `.PaymentSession` 객체를 설정합니다. **필수 항목**입니다. |
| `publicKey` | 공개 API 키입니다. 키는 `pk_` 접두사를 포함해야 합니다. **필수 항목**입니다. |
| `translations` | 네이티브로 지원되는 언어에 대한 텍스트를 커스터마이즈하거나, 지원되지 않는 지역/언어에 대한 번역을 추가할 수 있습니다. 자세한 내용은 **Flow 통합 문서의 현지화 추가 섹션**을 참고하세요. |
2. 결제창 Checkout.js template 예제
```html
Checkout Web Components: Flow Component
```
3. 결제창 Customize( 선택 )
결제창을 사용자 정의로 바꿀수 있는 부분은 아래와 같습니다.
Customize 가이드 : https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration
* 색상
* 폰트
* 테두리
< appearance 작성 예제 >
```html
const appearance = {
//색상 Property
colorAction: '#5E48FC',
colorBackground: '#0A0A0C',
colorBorder: '#68686C',
colorDisabled: '#64646E',
colorError: '#FF3300',
colorFormBackground: '#1F1F1F',
colorFormBorder: '#1F1F1F',
colorInverse: '#F9F9FB',
colorOutline: '#ADA4EC',
colorPrimary: '#F9F9FB',
colorSecondary: '#828388',
colorSuccess: '#2ECC71',
//폰트 Property
button: {
fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
fontSize: '16px',
fontWeight: 700,
letterSpacing: 0,
lineHeight: '24px',
},
footnote: {
fontFamily: '"PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
fontSize: '14px',
fontWeight: 400,
letterSpacing: 0,
lineHeight: '20px',
},
label: {
fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
fontSize: '14px',
fontWeight: 400,
letterSpacing: 0,
lineHeight: '20px',
},
subheading: {
fontFamily: '"Roboto Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif',
fontSize: '16px',
fontWeight: 700,
letterSpacing: 0,
lineHeight: '24px',
},
//테두리 Property
borderRadius: ['8px', '8px'],
};
* CheckoutWebComponents에 appearance를 추가하여 적용할 수 있습니다.
const checkout = await CheckoutWebComponents({
publicKey: PUBLIC_KEY,
environment: "sandbox",
locale: "en",
paymentSession,
appearance, //추가부분
```
* 색상 Property
* 폰트 Property
* 테두리 Property
