Last Updated: 25 April 2024 | Change Log

Vue.js integration

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


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
    <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 class="column">
                        <label class="label" for="card-cvv">CVV</label>
                        <section id="card-cvv" class="field"></section>
                <section class="buttons">
                    <button class="submit" id="submit" type="button">Generate Session</button>
                    <button class="clear" id="clear" type="button">Clear</button>

    //Add JavaScript code in here

<style scoped>
    /*Add CSS code in here*/