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

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 통합 문서의 현지화 추가 섹션을 참고하세요.

결제창 Checkout.js template 예제

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkout Web Components: Flow Component</title>
</head>

<body>
<form>
    <div class="container">
        <div id="flow-container"></div>
    </div>
</form>

<script src="https://checkout-web-components.checkout.com/index.js"></script>
<script>
    /* global CheckoutWebComponents */
    (async () => {
        // Insert your public key here , EBP에서 제공
        const PUBLIC_KEY = "pk_sbox_ohykydxd5q2ecomyqhdejnuxtey";

        // EBP_API_224 응답결과
        const paymentSession =
                {
                    "id": "ps_3BPefIHwlVpMNoRMdhBq9VTQyml",
                    "payment_session_secret": "pss_017481b1-b02b-45ed-8031-760aef85f127",
                    "payment_session_token": "YmFzZTY0:eyJpZCI6InBzXzNCUGVmSUh3bFZwTU5vUk1kaEJxOVZUUXltbCIsImVudGl0eV9pZCI6ImVudF8za2ZoaHZ6NXVldXRmajVtNmpkYTRhYnB6YSIsImV4cGVyaW1lbnRzIjp7fSwicHJvY2Vzc2luZ19jaGFubmVsX2lkIjoicGNfa21teXVieWMyNnpldnBrcWx0eXZqdXBvbWUiLCJhbW91bnQiOjEwMDAsImxvY2FsZSI6ImVuLUdCIiwiY3VycmVuY3kiOiJBRUQiLCJwYXltZW50X21ldGhvZHMiOlt7InR5cGUiOiJjYXJkIiwiY2FyZF9zY2hlbWVzIjpbIlZpc2EiLCJNYXN0ZXJjYXJkIl0sInNjaGVtZV9jaG9pY2VfZW5hYmxlZCI6ZmFsc2UsInN0b3JlX3BheW1lbnRfZGV0YWlscyI6ImVuYWJsZWQiLCJiaWxsaW5nX2FkZHJlc3MiOnsiY291bnRyeSI6IkFFIiwiYWRkcmVzc19saW5lMSI6IkJ1aWxkaW5nIE5vLiAyMiAiLCJjaXR5IjoiRHViYWkifX0seyJ0eXBlIjoiYXBwbGVwYXkiLCJkaXNwbGF5X25hbWUiOiJMRyBVQUUiLCJjb3VudHJ5X2NvZGUiOiJBRSIsImN1cnJlbmN5X2NvZGUiOiJBRUQiLCJtZXJjaGFudF9jYXBhYmlsaXRpZXMiOlsic3VwcG9ydHMzRFMiXSwic3VwcG9ydGVkX25ldHdvcmtzIjpbInZpc2EiLCJtYXN0ZXJDYXJkIl0sInRvdGFsIjp7ImxhYmVsIjoiTEcgVUFFIiwidHlwZSI6ImZpbmFsIiwiYW1vdW50IjoiMTAifX0seyJ0eXBlIjoiZ29vZ2xlcGF5IiwibWVyY2hhbnQiOnsiaWQiOiIwODExMzA4OTM4NjI2ODg0OTk4MiIsIm5hbWUiOiJMRyBVQUUiLCJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0OjgwODAifSwidHJhbnNhY3Rpb25faW5mbyI6eyJ0b3RhbF9wcmljZV9zdGF0dXMiOiJGSU5BTCIsInRvdGFsX3ByaWNlIjoiMTAiLCJjb3VudHJ5X2NvZGUiOiJBRSIsImN1cnJlbmN5X2NvZGUiOiJBRUQifSwiY2FyZF9wYXJhbWV0ZXJzIjp7ImFsbG93ZWRfYXV0aF9tZXRob2RzIjpbIlBBTl9PTkxZIiwiQ1JZUFRPR1JBTV8zRFMiXSwiYWxsb3dlZF9jYXJkX25ldHdvcmtzIjpbIlZJU0EiLCJNQVNURVJDQVJEIl19fSx7InR5cGUiOiJ0YW1hcmEiLCJjb3VudHJ5X2NhbGxpbmdfY29kZXMiOlsiOTcxIl19LHsidHlwZSI6InRhYmJ5IiwiY291bnRyeV9jYWxsaW5nX2NvZGVzIjpbIjk3MSJdLCJlbWFpbCI6InNjLmtpbUBsZ2VwYXJ0bmVyLmNvbSIsIm5hbWUiOiJzYyBraW0ifV0sImZlYXR1cmVfZmxhZ3MiOlsiYW5hbHl0aWNzX29ic2VydmFiaWxpdHlfZW5hYmxlZCIsImdldF93aXRoX3B1YmxpY19rZXlfZW5hYmxlZCIsImxvZ3Nfb2JzZXJ2YWJpbGl0eV9lbmFibGVkIiwicmlza19qc19lbmFibGVkIiwidXNlX2JpbGxpbmdfYWRkcmVzc19mcm9tX2NvbmZpZ19mb3JfdG9rZW5pemF0aW9uIiwidXNlX2RldmljZV9hcGlfZm9yX29ic2VydmFiaWxpdHkiLCJ1c2Vfcmlza2pzX3YyIiwidXNlX3VybF9oYXNoX2Zvcl9pZnJhbWVfcHJvcHMiXSwicmlzayI6eyJlbmFibGVkIjpmYWxzZX0sIm1lcmNoYW50X25hbWUiOiJMRyBVQUUiLCJwYXltZW50X3Nlc3Npb25fc2VjcmV0IjoicHNzXzAxNzQ4MWIxLWIwMmItNDVlZC04MDMxLTc2MGFlZjg1ZjEyNyIsImludGVncmF0aW9uX2RvbWFpbiI6ImFwaS5zYW5kYm94LmNoZWNrb3V0LmNvbSJ9",
                    "_links": {
                        "self": {
                            "href": "https://api.sandbox.checkout.com/payment-sessions/ps_3BPefIHwlVpMNoRMdhBq9VTQyml"
                        }
                    }
                }

        const checkout = await CheckoutWebComponents({
            publicKey: PUBLIC_KEY,
            environment: "sandbox",  //test 환경
            locale: "en",
            paymentSession,
            //appearance,  //결제 화면 Customize 필요 시 (아래 appearance 예제 참조)
            onReady: () => {
                console.log("onReady");
            },
            onPaymentCompleted: (_component, paymentResponse) => {
                //신용카드결제 완료시 처리부분
                console.log("Create Payment with PaymentId: ", paymentResponse.id);
            },
            onChange: (component) => {
                console.log(
                        `onChange() -> isValid: "${component.isValid()}" for "${
                                component.type
                        }"`,
                );
            },
            onError: (component, error) => {
                console.log("onError", error, "Component", component.type);
            },
        });

        const flowComponent = checkout.create("flow");

        flowComponent.mount(document.getElementById("flow-container"));
    })();



</script>
</body>
</html>

결제창 Customize( 선택 )

결제창을 사용자 정의로 바꿀수 있는 부분은 아래와 같습니다.

Customize 가이드 : https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/customize-your-flow-integration
- 색상
- 폰트
- 테두리

< appearance 작성 예제 >

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