Select radio button when clicked outside input - html

Question

I'm using a standard Bootstrap 4 accordion with a radio button inside of it. Here is my code:
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div">
<div class="d-flex justify-content-between">
<div class="stripe-payment-div">
<input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value="">
<label class="form-check-label" for="stripePayment"> Credit Card (Stripe) </label>
</div>
</div>
</button>
</h2>
</div>
</div
When i click outside the input field the radio button is not selected. I know the best way would be to use jquery, but is there a way to do it with css only?
I'd like the radio button selected when the use clicks anywhere inside the .card class.
Thanks

Answer 1

I'd recommend using JavaScript but if you really want to do it without, you can use the trick that a lot of custom form controls use.
Basically wrap it in a label and use the for attribute to point to your radio.
Had to also convert your button to an a because the clicks events weren't registering.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<label for="stripePayment" class="mb-0">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div">
<div class="d-flex justify-content-between">
<div class="stripe-payment-div">
<input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value="">
<span class="form-check-label" for="stripePayment"> Credit Card (Stripe) </span>
</div>
</div>
</a>
</h2>
</div>
</label>
</div>