I am exploring options to include a card logo group alongside my accordion view. My goal is to showcase a card group featuring Visa, MasterCard, and AMEX
using SVG. I initially attempted to display 3 images in a row, but I believe there might be a better approach to achieve this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="screenPayment">
<div class="payment">
<div class="payment-tab">
<div class="payment-radioGroup">
<input id="paypal" name="cardType" type="radio" value="paypal">
<label for="paypal">PayPal</label>
</div>
<p>You will be redirected to PayPal to complete your purchase securely.</p>
</div>
<div class="payment-tab payment-tab-isActive">
<div class="payment-radioGroup">
<input checked="" type="radio" name="cardType" id="creditCart" value="creditCard">
<label for="creditCart">Add credit card</label>
</div>
<img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/visa.svg">
<img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/mastercard.svg">
<img class="payment-cardimg" src="https://www.f-cdn.com/assets/main/en/assets/payments/cc/amex.svg">
<div class="textInputGroup">
<label for="nameOnCard">Name on card</label>
<input id="nameOnCard" name="nameOnCard" required="" type="text">
</div>
<div class="textInputGroup">
<label for="cardNumber">Card number</label>
<input id="cardNumber" name="cardNumber" placeholder="1234 - 5678 - 9876 - 5432" required="" type="text">
</div>
<div class="textInputGroup textInputGroup-halfWidth">
<label for="expirationDate">Expiration Date</label>
<input id="expirationDate" name="expirationDate" placeholder="MM / YY" required="" type="text">
</div>
<div class="textInputGroup textInputGroup-halfWidthRight">
<label for="cvc">CVC</label>
<input id="cvc" name="cvc" placeholder="XXX" required="" type="text">
</div>
</div>
</div>
</div>
I am envisioning incorporating this specific card group design within my accordion https://i.sstatic.net/fduoB.png