Access Worldpay
/
Modern frameworks
/
Vue.js integration

Last Updated: 25 April 2024 | Change Log

Vue.js integration

Integrate the Access Checkout Web SDK in a Vue.js v2 application.

Integration

You must add the SDK checkout.js script via JavaScript in the mounted() function of a Vue.js component. You must then add a listener for the load event where you initialize the SDK.

Full integration example

  1. Template
  2. JavaScript
  3. CSS
<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>