How to load the Rapyd Checkout Scripts in a Vue JS Component

⚙️ Rapyd API
,
1

How to load the Rapyd Checkout Scripts in a Vue JS component? Checkout Toolkit Integration

1 Like
2

@datastax Since Vuejs is a Javascript framework, Loading the Rapyd Payments Toolkit is very simple.

Take a look at this simple Vue js code that alert something on the page load. You can see where I commented load your logic. when the script is run, it will alert Loaded showing that its working

<!doctype html>
<html>
	<head>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
	</head>
	<body>
<script>

var vm=new Vue({
  el:"#app",
  mounted:function(){
        this.LoadRapyd_in_Vue() //this method will execute at pageload
  },
  methods:{
        LoadRapyd_in_Vue:function(){
              /* your logic */
alert('loaded');

        }
     },
})


</script>

			
		<div id='app'></div>
	</body>
</html>

Now to Load the Rapyd Payment Tool Kit in Vuejs, Here is the working Code that I have tested. You will need to get your Checkout Page Id and replace it where appropriates



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.cssb">

    <title>Rapyd Checkout Toolkit</title>
</head>

<body>
    <div>
       

		<div id='app'>

        <div class="container">

            <!-- Feedback -->
            <div class="row justify-content-center">
                <div class="col text-center my-4" style="display: none" id="feedback">
                    <img src="" id="image" alt="" height="120" class="mt-2">
                    <h3 id="title" class="my-4"></h3>
                    <p id="message"></p>
                    <a role="button" class="btn btn-custom mt-2" href="" id="action"></a>
                </div>
            </div>

            <!-- iframe -->
            <div class="row justify-content-center">
                <div class="col" style="max-width: 500px;" id="rapyd-checkout"></div>
            </div>
        </div>

        <div class="container">
            <div class="row justify-content-center text-center border-top py-2">
                <span>&copy;2021. Rapyd Checkout Toolkit Integration demo site.</span>
            </div>
        </div>
    </div>


</div>

    <!-- code to display the iframe -->
    <script src="https://sandboxcheckouttoolkit.rapyd.net"></script>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

    <script>



var vm=new Vue({
  el:"#app",
  mounted:function(){
        this.LoadRapyd_in_Vue() //this method will execute at pageload
  },
  methods:{
        LoadRapyd_in_Vue:function(){
              /* your logic */
alert('Alert Rapyd Payment Toolkit successfully Loaded in Vue Component');




        window.onload = function () {
            let checkout = new RapydCheckoutToolkit({
                pay_button_text: "Pay Now",
                pay_button_color: "#4BB4D2",
                id: "checkout_67f2f92219495ffa24c94fbdc9070846 ", // your checkout page id goes here
                style: {
                    submit: {
                        base: {
                            color: "white"
                        }
                    }
                }
            });
            checkout.displayCheckout();
        }
        window.addEventListener('onCheckoutPaymentSuccess', function (event) {
            console.log(event.detail);
            feedback(event);
        });
        window.addEventListener('onCheckoutFailure', function (event) {
            console.log(event.detail.error);
            feedback(event);
        });
        window.addEventListener('onCheckoutPaymentFailure', (event)=> {
            console.log(event.detail.error);
            feedback(event);
        })


        // display information to the user
        function feedback(event){
            if (event.detail.error){
                document.getElementById('title').textContent = "Whoops!";
                document.getElementById('message').innerHTML = "We cannot process your payment:<br/>" + 
                    event.detail.error;
                document.getElementById('image').src = "img/no-bike.svg";
                document.getElementById('action').textContent = "Try again";
            }
            else {
                document.getElementById('title').textContent = "Success!";
                document.getElementById('message').innerHTML = "Thank you! Your product is on its way!" + 
                    "<br>" +
                    "Order: " + event.detail.metadata.sales_order;
                document.getElementById('image').src = "img/logo.svg";
                document.getElementById('action').textContent = "Home";
				alert('success');
				window.location='ok.html';
            }

            document.getElementById('action').href = "bike.html";
            document.getElementById('feedback').style.display = "block";
        }









//
        }
     },
})




    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

</body>
</html>
1 Like