Cornell and Associates - Payments

cornell-and-associates-payments.markdown

Cornell and Associates - Payments

A Pen by Bryan Willis on CodePen.

License.

index.html

<div class="card">
	<div class="text-center intro">
		<img src="https://cornellmfts.com/wp-content/uploads/2020/11/cmfts-logo-200.png" width="180">
		<h4 class="d-block account">Make a Payment</h4>
		<span class="contact">Please select your therapist and enter your payment amount due below. Please contact your therapist with additional questions!</span>
	</div>

	<div class="mt-2 text-center">
		<div class="mt-3 inputbox">

			<div class="payment-drop">
				<i class="fa fa-user"></i>

				<select class="form-control" name="" onchange="myFunction(event)">
					<option disabled selected>Select Therapist for Payment</option>
					<option value="CORNELL">ANDREA CORNELL, LMFT</option>
					<option value="DILEO">ANTONIA DI LEO, LMFT</option>
					<option value="DIXON">KEITH DIXON, LMFT</option>
					<option value="ETZION">SHIRA ETZION, LMFT</option>
					<option value="DIXON">KEITH DIXON, LMFT</option>
					<option value="DIXON">KEITH DIXON, LMFT</option>
					<option value="FULGIERI">MELISSA FULGIERI, LCSW</option>
					<option value="HICKMAN">QUINELLE HICKMAN, LMFT</option>
					<option value="JOHNSON">BREANA JOHNSON, PhD CANDIDATE, LMFT</option>
					<option value="KEATS">TRACY CAVELL KEATS, LMFT</option>
					<option value="KUSKOVSKY">KIMBERLY KUSKOVSKY, LMFT</option>
					<option value="McELANEY">KARA McELANEY, LMFT</option>

					<option value="MURRAY">SEANA MURRAY, LMFT</option>

					<option value="GRANUM">ROCKY GRANUM, AMFT</option>

					<option value="MERCER">SOPHIA MERCER, AMFT</option>
					<option value="EDWARDS">DILEK TURAN EDWARDS</option>

					<option value="UMUHOZA">DIANE UMUHOZA, APCC</option>

					<option value="RAHIMI">NAHIED RAHIMI, AMFT</option>
				</select>
			</div>
			<div class="payment-amount">
				<form class="form" method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart_snap.action">
					<input type="hidden" name="description" value="Please add your payment details on this page including the service date and any relevant information in the Notes section. For questions, please call our office at 917-225-1401 or reach out to your therapist directly. We thank you for your payment and your trust in Cornell &amp; Associates Marriage and Family Therapy. ">
					<input type="hidden" name="need_to_ship" value="no">
					<input type="hidden" name="need_to_tax" value="no">
					<input type="hidden" id="mfts" name="identifier" value="ONLINEPAY">
					<input type="hidden" name="quantity" value="1">
					<input type="hidden" name="store" value="Cornell">
					<input type="hidden" name="store" value="Cornell">

					<input type="hidden" name="store" value="Cornell">

					<input type="hidden" name="fingerprint" value="b8b4017141a1b87ee0f1bd8d33cdc74c">
					<label class="amount-due h6">Specify Payment Amount Below</label>

					<input class="form-control inputbox" type="text" name="price" placeholder="1.00" value="0.00">

					<input class="pay-submit btn btn-primary btn-block" type="submit" name="submit" value="SUBMIT PAYMENT">
				</form>
			</div>

		</div>

	</div>

</div>

script.js

function myFunction(e) {
	document.getElementById("mfts").value = e.target.value;
}

style.stylus

body
	background-color: #eee
	display: flex
	justify-content: center
	align-items: center
	height: 100vh
	font-family: 'Open Sans', sans-serif

h4, span, h6, .amount-due
	color: #fff

select, input
	text-align: center

.account
	margin-top: 15px

.amount-due
	margin-top: 20px

.btn-primary
	color: #000 !important
	background-color: #ffd647 !important
	border-color: #ffd647 !important

.card
	width: 400px
	padding: 20px
	border: none
	background: #1b9f65
	border: 4px solid #1d8256

.account
	font-weight: 500

.contact
	font-size: 13px

.form-control
	text-indent: 14px

.form-control:focus
	color: #495057
	background-color: #fff
	border-color: #4a148c
	outline: 0
	box-shadow: none

.inputbox
	margin-bottom: 10px
	position: relative

.inputbox i
	position: absolute
	left: 8px
	top: 12px
	color: #dadada

.form-check-label
	font-size: 13px

.form-check-input
	width: 14px
	height: 15px
	margin-top: 5px

.forgot
	font-size: 14px
	text-decoration: none
	color: #4A148C

.mail
	color: #4a148c
	text-decoration: none

.form-check
	cursor: pointer

.btn-primary
	color: #fff
	background-color: #4A148C
	border-color: #4A148C

.pay-submit
	font-weight: 500
	text-transform: capitalize

styles

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />