File: resources/js/components/Card.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Laravel Nova Paypal  >  resources/js/components/Card.vue  >  Download  
File: resources/js/components/Card.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Paypal
Show Paypal account transactions in Laravel Nova
Author: By
Last change:
Date: 1 year ago
Size: 3,546 bytes


Class file image Download
    <card class="h-auto">
        <div class="px-3 py-3" style="min-height:200px;">
            <div align="left">
                <img :src="paypal_logo" v-show="hide_logo === false" width="150"/>
                <div class="spinner" id="spinner" align="center"></div>

            <div v-show="!loading">
                <div style="margin-bottom: 20px; font-family: 'Arial';">
                    <div class="text-center text-2lg font-light" v-if="balance.ACK === 'Success'" style="font-size:14px; color:green;">Current Balance: ${{balance.L_AMT0}}</div>
                    <div class="text-center" style="color:red; font-size:12px;" v-if="balance.ACK === 'Failure'">{{balance.L_SEVERITYCODE0}} {{balance.L_ERRORCODE0}}: {{balance.L_LONGMESSAGE0}}</div>
                <div style="margin-bottom:20px;" v-if="transactions !== false">
                    <table class="table table-bordered table-hover table-responsive" style="font-size:14px; margin-left:auto; margin-right:auto;">
                            <th>Transaction ID</th>
                        <tr v-for="transaction in transactions">
                            <td style="height: 40px; font-size:12px;">
                                <a :href="'' +transaction.transaction_id" target="_blank">{{transaction.transaction_id}}</a>
                            <td style="height: 40px;">{{transaction.timestamp}}</td>
                            <td style="height: 40px;">${{transaction.amt}}</td>
                            <td style="height: 40px;">{{transaction.status}}</td>
                <div v-if="transactions === false" style="text-align: center; color:#db363c; font-size:12px;">No transacitons found since {{this.days}} days ago!</div>

    export default {
        props: ['card'],
        data: () => {
            return {
                paypal_logo: '',
                response: [],
                balance: [],
                hide_logo: false,
                loading: true,
                days: 5,
        mounted() {
            if (this.card.hide_logo == true){
                this.hide_logo = true;
                this.days = true;
            if (this.card.days > 0) {
                this.days = this.card.days;
            } else{
                this.days = 5;

            Nova.request().get('/nova-vendor/paypal/getData', {
                params: {
                    days: this.card.days,
                    count: this.card.count
            .then(response => {
                this.balance =;
                if ( > 0){
                    this.transactions =;
                    this.transactions = false;

                this.loading = false;
                document.getElementById('spinner').style.display = 'none';


For more information send a message to info at phpclasses dot org.