<template>
    <template if:true={isVpbank}>
        <img class="image-card" src={vpbankImage}/>
    </template>

    <template if:true={isHsbcBank}>
        <img class="image-card" src={hsbcImage}/>
    </template>
    
    
    <div class="slds-m-around_medium">
        <template if:true={creditCard.data}>
            <template for:each={creditCard.data} for:item="cc">
                <p key={cc.Id}>{cc.Name}</p>
            </template>
        </template>
    </div>

</template>

import { LightningElement, api, wire } from 'lwc';

import myResource from '@salesforce/resourceUrl/creditCard';
import getCreditCard from '@salesforce/apex/CreditCardController.getCreditCard';
import isVpBankCredit from '@salesforce/apex/CreditCardController.isVpBankCredit';
import isHsbcCredit from '@salesforce/apex/CreditCardController.isHsbcCredit';


const VP_BANK = myResource + '/credit-card-images/vp-bank.jpg';
const HSBC = myResource + '/credit-card-images/hsbc.jpg';

export default class CreditCard extends LightningElement {
    vpbankImage = VP_BANK;
    hsbcImage = HSBC;
    isVpbank = false;
    isHsbcBank = false;
    
    @wire(getCreditCard) creditCard;

    connectedCallback() {
        isVpBankCredit().then((result) => {
            this.isVpbank = result;
            console.log(isVpbank);
        });

        isHsbcCredit().then((result) => {
            this.isHsbcBank = result;
            console.log(isHsbcBank);
        });
    }
}