Accept Payment

Vue JS

Intalling VUE JS

To install Vue.js, you can use either npm, yarn or the CDN url. Here are the commands for each:

Using npm

                                    
                                         npm install vue

Using yarn

                                    
                                         yarn add vue

Using CDN

Add the javascript cdn url below to the header of your page

                                    
                                    
                                      <script src="https://unpkg.com/vue/dist/vue.js"></script>

Step 2: Add The BudPay CDN

                                    
                                    
                                      <script src="https://inlinepay.budpay.com/budpay-inline-custom.js"></script>

Step 3: Define the JavaScript function

                                    
                                            
                                            function payWithBudPay() {
                                                BudPayCheckout({
                                                    key: 'pk_test_xolsnu5dpqpia2a7a8iftygugzyluz2qffkhlid', // Replace with your public key
                                                    email: 'kayode@mail.com',
                                                    amount: 100,
                                                    first_name: 'Kayode',
                                                    last_name: 'Adetunji',
                                                    currency: 'NGN', // USD,GBP,KES,GHS
                                                    reference: '' + Math.floor((Math.random() * 100000000000) + 1) + new Date().getSeconds() + new Date().getMilliseconds(), // If not defined, our system will generate one for you
                                                    callback: function(response) {
                                                    //this happens after the payment is completed successfully
                                                    var reference = response.reference;
                                                    console.log(response);
                                                    //Define what action you want to trigger on payment successful close
                                                    },
                                                    onClose: function (response) {
                                                    console.log(response);
                                                    //Define what action you want to trigger on modal close
                                                    }
                                                });
                                            }

Step 4: Create a Vue JS component:

Vue Button To Trigger Payment

                                     
                                         <template>
                                         <button @click="initiateBudPayModal">Pay With BudPay</button>
                                         </template>

Vue Code To Trigger Payment Function

                                     
                                         
                                                export default {
                                                methods: {
                                                    initiateBudPayModal() {
                                                    payWithBudPay(); // Call the JavaScript function you created earlier
                                                    }
                                                }
                                                };

Complete Vue Code:

                                     
                                        <template>
                                            <button @click="initiateBudPayModal">Pay With BudPay</button>
                                        </template> 
                                        <script>
                                            import Vue from 'vue';
                                            export default {
                                                methods: {
                                                    initiateModal() {
                                                    payWithBudPay();
                                                    }
                                                }
                                            }; 
                                       </script>

Parameters

To initialize the transaction, you'll need to pass information such as email, first name, last name amount, transaction reference, etc. Email and amount are required. You can also pass any other additional information such as logo_url and callback_url object field. Here is the full list of parameters you can pass:

Param	Type	Required?	Decription
key	string	Yes	Your public key from BudPay. Use test key for test mode and live key for live mode
email	string	Yes	Customer Email address
amount	string	Yes	Amount to pay
first_name	string	No	Customer First Name
last_name	string	No	Customer Last Name
currency	string	Yes	Currency charge should be performed in.
reference	string	No	Unique case sensitive transaction reference

BudPay