Payment Module

Useful for selecting payment options. Makes use of the Choice Box component.


.Payment options live in a .Payment-container. Add .Payment--autopay to .Payment to include the (Autopay) callout.

Use .Payment__actions--primary, .Payment__actions--secondary, or .Payment__actions--danger for payment actions, accordingly.

<div class="Payment-container">
<ul>
<li class="Payment Payment--autopay ChoiceBox">
<input type="radio" class="ChoiceBox__radio"
name="example" id="example" value="example" />
<label for="example" class="ChoiceBox__label">
<div class="ChoiceBox__title">
Example Title
</div>
<div class="ChoiceBox__content">
This is one of two choice boxes that appear
next to each other.
<div class="Payment__actions">
<button class="Button Button--text Payment__actions--primary" data-remodal-target="test-modal">Edit</button>
</div>
</div>
</label>
</li>
</ul>
</div>