102 lines
3.0 KiB
Plaintext
102 lines
3.0 KiB
Plaintext
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link
|
|
rel="stylesheet"
|
|
type="text/css"
|
|
href="https://www.paypalobjects.com/webstatic/en_US/developer/docs/css/cardfields.css"
|
|
/>
|
|
<script
|
|
src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id=<%= clientId %>"
|
|
data-client-token="<%= clientToken %>"
|
|
></script>
|
|
</head>
|
|
<body>
|
|
<div id="paypal-button-container" class="paypal-button-container"></div>
|
|
<div class="card_container">
|
|
<form id="card-form">
|
|
<label for="card-number">Card Number</label>
|
|
<div id="card-number" class="card_field"></div>
|
|
<div style="display: flex; flex-direction: row;">
|
|
<div>
|
|
<label for="expiration-date">Expiration Date</label>
|
|
<div id="expiration-date" class="card_field"></div>
|
|
</div>
|
|
<div style="margin-left: 10px;">
|
|
<label for="cvv">CVV</label>
|
|
<div id="cvv" class="card_field"></div>
|
|
</div>
|
|
</div>
|
|
<label for="card-holder-name">Name on Card</label>
|
|
<input
|
|
type="text"
|
|
id="card-holder-name"
|
|
name="card-holder-name"
|
|
autocomplete="off"
|
|
placeholder="card holder name"
|
|
/>
|
|
<div>
|
|
<label for="card-billing-address-street">Billing Address</label>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-street"
|
|
name="card-billing-address-street"
|
|
autocomplete="off"
|
|
placeholder="street address"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="card-billing-address-unit"> </label>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-unit"
|
|
name="card-billing-address-unit"
|
|
autocomplete="off"
|
|
placeholder="unit"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-city"
|
|
name="card-billing-address-city"
|
|
autocomplete="off"
|
|
placeholder="city"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-state"
|
|
name="card-billing-address-state"
|
|
autocomplete="off"
|
|
placeholder="state"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-zip"
|
|
name="card-billing-address-zip"
|
|
autocomplete="off"
|
|
placeholder="zip / postal code"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
id="card-billing-address-country"
|
|
name="card-billing-address-country"
|
|
autocomplete="off"
|
|
placeholder="country code"
|
|
/>
|
|
</div>
|
|
<br /><br />
|
|
<button value="submit" id="submit" class="btn">Pay</button>
|
|
</form>
|
|
</div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|