EBP V2 API Docs v0.5.18
KR

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>
<head>
    <title>Worldpay checkout</title>
</head>
<style>
    body {
        font: 11px/22px sans-serif;
        text-transform: uppercase;
        background-color: #f7f7f7;
        color: black;
    }

    .container {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        position: relative;
        background: white;
        padding: 40px 30px;
        top: -30px;
        width: 100%;
        max-width: 300px;
        border-radius: 12px;
        box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
    }
    .card .checkout .col-2 {
        display: flex;
    }
    .card .checkout .col-2 .col:first-child {
        margin-right: 15px;
    }
    .card .checkout .col-2 .col:last-child {
        margin-left: 15px;
    }
    .card .checkout .label .type {
        color: green;
    }
    .card .checkout.visa .label .type:before {
        content: "(visa)";
    }
    .card .checkout.mastercard .label .type:before {
        content: "(master card)";
    }
    .card .checkout.amex .label .type:before {
        content: "(american express)";
    }
    .card .checkout .field {
        height: 40px;
        border-bottom: 1px solid lightgray;
    }
    .card .checkout .field#card-pan {
        margin-bottom: 30px;
    }
    .card .checkout .field.is-onfocus {
        border-color: black;
    }
    .card .checkout .field.is-empty {
        border-color: orange;
    }
    .card .checkout .field.is-invalid {
        border-color: red;
    }
    .card .checkout .field.is-valid {
        border-color: green;
    }
    .card .checkout .submit {
        background: red;
        position: absolute;
        cursor: pointer;
        left: 50%;
        bottom: -60px;
        width: 200px;
        margin-left: -100px;
        color: white;
        outline: 0;
        font-size: 14px;
        border: 0;
        border-radius: 30px;
        text-transform: uppercase;
        font-weight: bold;
        padding: 15px 0;
        transition: background 0.3s ease;
    }
    .card .checkout.is-valid .submit {
        background: green;
    }

    .clear {
        background: grey;
        position: absolute;
        cursor: pointer;
        left: 50%;
        bottom: -120px;
        width: 200px;
        margin-left: -100px;
        color: white;
        outline: 0;
        font-size: 14px;
        border: 0;
        border-radius: 30px;
        text-transform: uppercase;
        font-weight: bold;
        padding: 15px 0;
        transition: background 0.3s ease;
    }
</style>

<script src="https://try.access.worldpay.com/access-checkout/v2/checkout.js"></script>

<body>
    <section class="container">
        <section class="card">
            <form class="checkout" id="card-form">
                <div class="label">Card number <span class="type"></span></div>
                <section id="card-pan" class="field"></section>
                <section class="col-2">
                    <section class="col">
                        <div class="label">Expiry date</div>
                        <section id="card-expiry" class="field"></section>
                    </section>
                    <section class="col">
                        <div class="label">CVV</div>
                        <section id="card-cvv" class="field"></section>
                    </section>
                </section>
                <button class="submit" type="submit">Pay Now</button>
            </form>
            <button class="clear" id="clear">Clear</button>
        </section>
    </section>
</body>

<script>
    (function () {
        var form = document.getElementById("card-form");
        var clear = document.getElementById("clear");
        Worldpay.checkout.init(
            {
                id: "{your-checkout-id}",   //EBP로 부터 전달 받은 checkout ID
                form: "#card-form",
                fields: {
                    pan: {
                        selector: "#card-pan",
                        placeholder: "4444 3333 2222 1111"
                    },
                    expiry: {
                        selector: "#card-expiry",
                        placeholder: "MM/YY"
                    },
                    cvv: {
                        selector: "#card-cvv",
                        placeholder: "123"
                    }
                },
                styles: {
                    "input": {
                        "color": "black",
                        "font-weight": "bold",
                        "font-size": "20px",
                        "letter-spacing": "3px"
                    },
                    "input#pan": {
                        "font-size": "24px"
                    },
                    "input.is-valid": {
                        "color": "green"
                    },
                    "input.is-invalid": {
                        "color": "red"
                    },
                    "input.is-onfocus": {
                        "color": "black"
                    }
                },
                accessibility: {
                    ariaLabel: {
                        pan: "my custom aria label for pan input",
                        expiry: "my custom aria label for expiry input",
                        cvv: "my custom aria label for cvv input"
                    },
                    lang: {
                        locale: "en-GB"
                    },
                    title: {
                        enabled: true,
                        pan: "my custom title for pan",
                        expiry: "my custom title for expiry date",
                        cvv: "my custom title for security code"
                    }
                },
                acceptedCardBrands: ["amex", "diners", "discover", "jcb", "maestro", "mastercard", "visa"],
                enablePanFormatting: true,
                allowNonLuhnCompliantCards: true,
            },
            function (error, checkout) {
                if (error) {
                    console.error(error);
                    return;
                }

                //PAY NOW button click event
                form.addEventListener("submit", function (event) {
                    event.preventDefault();

                    checkout.generateSessionState(function (error, sessionState) {
                        if (error) {
                            console.error(error);
                            return;
                        }

                        // session state for card details
                        alert(sessionState);
                    });
                });

                //CLEAR button click event
                clear.addEventListener("click", function(event) {
                    event.preventDefault();
                    checkout.clearForm(function() {
                        // trigger desired behavior on cleared form
                        console.log('Form successfully cleared');
                    });
                });
            }
        );
    })();
</script>
</html>

1. iframe 구성 #

body 내 결제 구성하고자 하는 부분에 section 추가

<section class="container">
    <section class="card">
        <form class="checkout" id="card-form">  <!- form name ->
            <div class="label">Card number <span class="type"></span></div>
            <section id="card-pan" class="field"></section>
            <section class="col-2">
                <section class="col">
                    <div class="label">Expiry date</div>
                    <section id="card-expiry" class="field"></section>
                </section>
                <section class="col">
                    <div class="label">CVV</div>
                    <section id="card-cvv" class="field"></section>
                </section>
            </section>
            <button class="submit" type="submit">Pay Now</button>
        </form>
        <button class="clear" id="clear">Clear</button>
    </section>
</section>

2. JavaScript 구성 #

JavaScript에서 Worldpay.checkout.init으로 설정해 iframe 결제창을 제어하는 방식입니다.

checkout ID : (필수) EBP로 부터 전달 받은 checkout ID

<script>
    (function () {
        var form = document.getElementById("card-form");    //form name
        var clear = document.getElementById("clear");   //clear button
        Worldpay.checkout.init(
            {
                id: "{your-checkout-id}",   //EBP로 부터 전달 받은 checkout ID
                form: "#card-form",
                fields: {
                    pan: {
                        selector: "#card-pan",
                        placeholder: "4444 3333 2222 1111"
                    },
                    expiry: {
                        selector: "#card-expiry",
                        placeholder: "MM/YY"
                    },
                    cvv: {
                        selector: "#card-cvv",
                        placeholder: "123"
                    }
                },
                styles: {
                    "input": {
                        "color": "black",
                        "font-weight": "bold",
                        "font-size": "20px",
                        "letter-spacing": "3px"
                    },
                    "input#pan": {
                        "font-size": "24px"
                    },
                    "input.is-valid": {
                        "color": "green"
                    },
                    "input.is-invalid": {
                        "color": "red"
                    },
                    "input.is-onfocus": {
                        "color": "black"
                    }
                },
                accessibility: {
                    ariaLabel: {
                        pan: "my custom aria label for pan input",
                        expiry: "my custom aria label for expiry input",
                        cvv: "my custom aria label for cvv input"
                    },
                    lang: {
                        locale: "en-GB"
                    },
                    title: {
                        enabled: true,
                        pan: "my custom title for pan",
                        expiry: "my custom title for expiry date",
                        cvv: "my custom title for security code"
                    }
                },
                acceptedCardBrands: ["amex", "diners", "discover", "jcb", "maestro", "mastercard", "visa"],
                enablePanFormatting: true,
                allowNonLuhnCompliantCards: true,
            },
            function (error, checkout) {
                if (error) {
                    console.error(error);
                    return;
                }

                //PAY NOW button click event
                form.addEventListener("submit", function (event) {
                    event.preventDefault();

                    checkout.generateSessionState(function (error, sessionState) {
                        if (error) {
                            console.error(error);
                            return;
                        }

                        // session state for card details
                        alert(sessionState);
                    });
                });

                //CLEAR button click event
                clear.addEventListener("click", function(event) {
                    event.preventDefault();
                    checkout.clearForm(function() {
                        // trigger desired behavior on cleared form
                        console.log('Form successfully cleared');
                    });
                });
            }
        );
    })();
</script>

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
Last updated: 2026-06-01 01:15:28 © 2026 LG Electronics Inc. All rights reserved.