Translation disclaimer

Documentation is written in English and subsequently translated. This page, therefore, might not have the most up-to-date content. If any questions arise relating to the accuracy of the translated content, please refer to the English version of the page.

Menu

Vue.js統合


Access Checkout Web SDKをVue.js v2アプリケーションに統合します。

統合

Vue.jsコンポーネントの()関数にJavaScriptでSDK checkout.jsスクリプトを追加する必要があります。次に、SDKを初期化するloadイベントのリスナーを追加します。

完全な統合例

Copied!
<template>
    <section class="container" id="container">
        <section class="card">
            <section class="checkout" id="card-form" >
                <label class="label" for="card-pan">Card number <span class="type"></span></label>
                <section id="card-pan" class="field"></section>
                <section class="columns">
                    <section class="column">
                        <label class="label" for="card-expiry">Expiry date</label>
                        <section id="card-expiry" class="field"></section>
                    </section>
                    <section class="column">
                        <label class="label" for="card-cvv">CVV</label>
                        <section id="card-cvv" class="field"></section>
                    </section>
                </section>
                <section class="buttons">
                    <button class="submit" id="submit" type="button">Generate Session</button>
                    <button class="clear" id="clear" type="button">Clear</button>
                </section>
            </section>
        </section>
    </section>
</template>

<script>
    //Add JavaScript code in here
</script>

<style scoped>
    /*Add CSS code in here*/
</style>
export default {
    name: "Checkout",
    mounted() {
        let checkoutScript = document.createElement("script");
        checkoutScript.src = "https://try.access.worldpay.com/access-checkout/v2/checkout.js";
        checkoutScript.onload = () => {
            this.initialiseCheckout();
        };
        checkoutScript.onerror = (err) => {
            console.log(`Something went wrong when loading the checkout script: ${err}`);
        };
        document.head.appendChild(checkoutScript);
    },
    methods: {
        initialiseCheckout() {
            const checkoutId = "<your-checkout-id>";
            const containerSelector = "#container";
            const panParentSelector = "#card-pan";
            const cvvParentSelector = "#card-cvv";
            const expiryDateParentSelector = "#card-expiry";
            (function () {
                var submitButton = document.querySelector("#submit");
                var clearButton = document.querySelector("#clear");
                window.Worldpay.checkout.init(
                    {
                        id: checkoutId,
                        form: containerSelector,
                        fields: {
                            pan: {
                                selector: panParentSelector,
                                placeholder: "4444 3333 2222 1111"
                            },
                            expiry: {
                                selector: expiryDateParentSelector,
                                placeholder: "MM/YY"
                            },
                            cvv: {
                                selector: cvvParentSelector,
                                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"
                            }
                        },
                        enablePanFormatting: true
                    },
                    function (error, checkout) {
                        if (error) {
                            console.log(`Failed to initialise the sdk: ${error}`);
                            return;
                        }
                        submitButton.addEventListener("click", function (event) {
                            event.preventDefault();
                            checkout.generateSessionState(function (error, sessionState) {
                                if (error) {
                                    console.log(`Failed to generate session: ${error}`);
                                    return;
                                }
                                alert(`Session retrieved is ${sessionState}`);
                            });
                        });
                        clearButton.addEventListener("click", function(event) {
                            event.preventDefault();
                            checkout.clearForm(function() {});
                        });
                    }
                );
            })();
        }
    }
};
body {
    font: 11px/22px sans-serif;
    background-color: #f7f7f7;
    color: black;
}
.container {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.card {
    position: relative;
    background: white;
    padding: 20px 30px;
    top: -30px;
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.columns {
    display: flex;
}
.columns .column {
    margin-right: 15px;
}
.field {
    height: 40px;
    border-bottom: 1px solid lightgray;
}
.field.is-onfocus {
    border-color: black;
}
.field.is-empty {
    border-color: orange;
}
.field.is-invalid {
    border-color: red;
}
.field.is-valid {
    border-color: green;
}
#card-pan {
    margin-bottom: 30px;
}
.card .checkout .submit {
    background: green;
    cursor: pointer;
    width: 200px;
    margin-top:30px;
    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;
    margin-right:20px;
}
.card .checkout .clear {
    background: green;
    cursor: pointer;
    width: 100px;
    margin-top:30px;
    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;
}
.buttons {
    display: flex;
}