You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

710 lines
29 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--jquery为了调用服务端获取token-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.71.0/js/client.js"></script>
<script src="https://js.braintreegateway.com/web/3.71.0/js/hosted-fields.js"></script>
<script src="https://js.braintreegateway.com/web/3.71.0/js/data-collector.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Payment</title>
<style>
body {
background-color: #efecec;
}
button {
width: 97px;
height: 40px;
padding: 10px;
font-size: 16px;
color: #fff;
background-color: #47A2FF;
border: none;
border-radius: 5px;
}
.loading {
margin: 20% auto;
text-align: center;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1000;
display: none;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.main {
margin: 50px auto;
width: 90%;
max-width: 800px;
background-color: #fff;
padding: 10px 20px;
min-height: 500px;
border-radius: 10px;
}
/*.btn{width:100%;text-align: center;display: none;}*/
/*hosted field*/
body {
background-color: #fff;
padding: 15px;
}
.toast {
position: fixed;
top: 15px;
right: 15px;
z-index: 9999;
}
.bootstrap-basic {
background: white;
}
/* Braintree Hosted Fields styling classes*/
.braintree-hosted-fields-focused {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.braintree-hosted-fields-focused.is-invalid {
border-color: #dc3545;
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.row {
margin-bottom: 40px;
}
.alert-fixed {
position: fixed;
top: 10px;
left: 50%;
width: 10%;
z-index: 9999;
border-radius: 0px;
padding: 5px;
}
</style>
</head>
<body>
<input type="hidden" name="_token" id="_token" value="{{.Authorization}}" />
<input type="hidden" name="_submitUrl" id="_submitUrl" value="http://localhost:17764/api/homeapi/process" />
<input type="hidden" name="_amt" id="_amt" value="{{.Amt}}" />
<input type="hidden" name="_cur" id="_cur" value="{{.Currency}}" />
<input type="hidden" name="_intent" id="_intent" value="{{.Intent}}" />
<input type="hidden" name="_flow" id="_flow" value="{{.Flow}}" />
<input type="hidden" name="_transactionNo" id="_transactionNo" value="{{.TransactionNo}}" />
<input type="hidden" name="_vendor" id="_vendor" value="{{.Vendor}}" />
<div class="alert-primary alert-fixed" style="text-align: center; display: none;" role="alert">
<i class="fa fa-check-circle-o" aria-hidden="true" style="padding: 0 5px;"></i>Apply successfully!
</div>
<div class="loading" id="loading"></div>
<div class="main" id="main">
<div class="info">
<p>Transaction No: {{.TransactionNo}}</p>
<p>Amount: {{.Amt}}</p>
<p>Currency: {{.Currency}}</p>
</div>
<div class="bootstrap-basic">
<form class="needs-validation" novalidate="">
<div class="row">
<div class="form-item col-sm-12 mb-3 is-required">
<label for="first-name">First Name</label>
<input class="form-control" id="first-name">
<!-- <small class="text-muted">First name as displayed on card</small>-->
<div class="invalid-feedback">
First Name is required
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="last-name">Last Name</label>
<input class="form-control" id="last-name">
<!-- <small class="text-muted">Last name as displayed on card</small>-->
<div class="invalid-feedback">
Last Name is required
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
<div class="invalid-feedback">
Please enter a valid email
</div>
</div>
<div class="form-item col-sm-12 mb-3 ">
<label for="countryId">Country</label>
<select class="countries form-control" id="countryId">
<option value="">Select Country</option>
</select>
<div class="invalid-feedback">
Please select country.
</div>
</div>
<!--<div class="form-item col-sm-12 mb-3 is-required">-->
<!--<label for="phone">Phone</label>-->
<!--<input class="form-control" id="phone">-->
<!--<div class="invalid-feedback">-->
<!--Please enter phone.-->
<!--</div>-->
<!--</div>-->
<div class="form-item col-sm-12 mb-3 ">
<label for="stateId">State</label>
<select class="states form-control" id="stateId">
<option value="">Select State</option>
</select>
<div class="invalid-feedback">
Please select state.
</div>
</div>
<div class="form-item col-sm-12 mb-3 ">
<label for="cityId">City</label>
<select class="cities form-control" id="cityId">
<option value="">Select City</option>
</select>
<div class="invalid-feedback">
Please select city.
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="streetAddress">StreetAddress</label>
<input class="form-control" id="streetAddress">
<div class="invalid-feedback">
Please enter streetAddress.
</div>
</div>
<div class="form-item col-sm-12 mb-3">
<label for="streetAddress2">StreetAddress2</label>
<input class="form-control" id="streetAddress2">
<div class="invalid-feedback">
Please enter streetAddress.
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="postal-code">Post Code</label>
<input class="form-control" id="postal-code">
<div class="invalid-feedback">
Please enter postal code.
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="cc-number">Credit card number</label>
<div class="form-control" id="cc-number"></div>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="cc-expiration">Expiration</label>
<div class="form-control" id="cc-expiration"></div>
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="form-item col-sm-12 mb-3 is-required">
<label for="cc-expiration">CVV</label>
<div class="form-control" id="cc-cvv"></div>
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="mb-4">
<div class="text-center">
<!-- <button class="btn btn-primary btn-lg" type="submit">Pay with <span id="card-brand">Card</span></button>-->
<button class="btn btn-primary btn-lg" type="submit">Pay</button>
</div>
</form>
</div>
</div>
<script>
// 数据
let curPaymentMethod = '';
const paymentMethods = {
'CreditCard': 'credit_card',
'PayPalAccount': 'paypal_account',
'VenmoAccount': 'venmo_account',
'ApplePayCard': 'apple_pay_card',
'AndroidPayCard': 'android_pay_card', //google pay
}
const token = document.getElementById('_token').value;
const amount = document.getElementById('_amt').value;
const intent = document.getElementById('_intent').value;
const currency = document.getElementById('_cur').value;
const transactionNo = document.getElementById('_transactionNo').value;
// const url = document.getElementById("_submitUrl").value;
const vendor = document.getElementById("_vendor").value;
const url = '/bt/process';
// const vendor = 'creditcard';
//方法
function ajaxObject() {
let xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
function ajaxPost(url, data, fnSucceed) {
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded",
dataType: "json",
success: function (data) {
console.log("success");
fnSucceed(data);
},
error: function (data) {
console.log("error");
},
})
}
function getVendor() {
// 根据vendor 配置braintree 的支付渠道
let curVendor = null;
console.log('vendor is: ', vendor);
switch (vendor) {
case 'paypal':
curVendor = {
paypal: {
flow: 'checkout',
amount: amount,
currency: currency
},
// paypalCredit: {
// flow: 'checkout',
// amount: amount,
// currency: currency
// },
};
break
case 'venmo':
curVendor = {
venmo: { // 只会在移动端出现
allowNewBrowserTab: false
}
};
break
case 'googlepay':
curVendor = {
card: false, // 不显示信用卡
googlePay: {
// googlePayVersion: 2,
// merchantId: 'merchant-id-from-google',
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: amount,
currencyCode: currency
},
allowedPaymentMethods: [{
type: 'CARD',
parameters: {
// We recommend collecting and passing billing address information with all Google Pay
// transactions as a best practice.
billingAddressRequired: true,
billingAddressParameters: {
format: 'FULL'
}
}
}]
},
};
break
case 'applepay':
curVendor = {
applePay: {
displayName: 'Merchant Name',
paymentRequest: {
label: 'Localized Name',
currencyCode: '',
merchantCapabilities: '',
total: amount
}
},
};
break
case 'creditcard':
break
default:
console.log('vendor is: ', vendor);
}
console.log('curVendor info: ', curVendor);
return curVendor
}
function handleIdElementStyle(id, attr, val) {
const el = document.getElementById(id);
if (el) {
el.style[attr] = val;
}
}
function initClient() {
const curVendor = getVendor();
const options = {
authorization: token,
container: '#dropin-container',
...curVendor
};
console.log('options', options);
var form = $('form');
braintree.client.create({
authorization: token,
}, function (err, clientInstance) {
if (err) {
console.error(err);
alert('clientInstance: ' + JSON.stringify(err));
return;
}
braintree.dataCollector.create({
client: clientInstance,
paypal: true
}, function (err, dataCollectorInstance) {
if (err) {
// Handle error in creation of data collector
console.error(err);
alert('clientInstance: ' + JSON.stringify(err));
return;
}
// At this point, you should access the dataCollectorInstance.deviceData value and provide it
// to your server, e.g. by injecting it into your form as a hidden input.
var deviceData = dataCollectorInstance.deviceData;
braintree.hostedFields.create({
client: clientInstance,
styles: {
input: {
// change input styles to match
// bootstrap styles
'font-size': '1rem',
color: '#495057'
}
},
fields: {
// cardholderName: {
// selector: '#cc-name',
// placeholder: 'Name as it appears on your card'
// },
number: {
selector: '#cc-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cc-cvv',
placeholder: '123'
},
expirationDate: {
selector: '#cc-expiration',
placeholder: 'MM / YYYY'
}
}
}, function (err, hostedFieldsInstance) {
if (err) {
console.error('hostedFieldsInstance: ' + err);
return;
}
function createInputChangeEventListener(element) {
return function () {
validateInput(element);
}
}
function setValidityClasses(element, validity) {
if (validity) {
element.removeClass('is-invalid');
element.addClass('is-valid');
} else {
element.addClass('is-invalid');
element.removeClass('is-valid');
}
}
function validateInput(element) {
// very basic validation, if the
// fields are empty, mark them
// as invalid, if not, mark them
// as valid
if (!element.val().trim()) {
setValidityClasses(element, false);
return false;
}
setValidityClasses(element, true);
return true;
}
var email = $('#email');
function validateEmail() {
var baseValidity = validateInput(email);
if (!baseValidity) {
return false;
}
if (email.val().indexOf('@') === -1) {
setValidityClasses(email, false);
return false;
}
setValidityClasses(email, true);
return true;
}
$('.form-item.is-required input').on('blur change', function () {
var $this = $(this);
if ($this.type == 'email') {
validateEmail($this);
}
validateInput($this);
})
$('.form-item.is-required select').on('blur change', function () {
var $this = $(this);
validateInput($this);
})
hostedFieldsInstance.on('validityChange', function (event) {
var field = event.fields[event.emittedBy];
// Remove any previously applied error or warning classes
$(field.container).removeClass('is-valid');
$(field.container).removeClass('is-invalid');
if (field.isValid) {
$(field.container).addClass('is-valid');
} else if (field.isPotentiallyValid) {
// skip adding classes if the field is
// not valid, but is potentially valid
} else {
$(field.container).addClass('is-invalid');
}
});
hostedFieldsInstance.on('cardTypeChange', function (event) {
var cardBrand = $('#card-brand');
var cvvLabel = $('[for="cc-cvv"]');
if (event.cards.length === 1) {
var card = event.cards[0];
// change pay button to specify the type of card
// being used
cardBrand.text(card.niceType);
// update the security code label
cvvLabel.text(card.code.name);
} else {
// reset to defaults
cardBrand.text('Card');
cvvLabel.text('CVV');
}
});
form.submit(function (event) {
event.preventDefault();
//显示loading
handleIdElementStyle('loading', 'display', 'block');
var formIsInvalid = false;
// perform validations on the non-Hosted Fields
// inputs
if (!validateEmail()) {
formIsInvalid = true;
}
var $inputs = $('.form-item.is-required input')
for (var i = 0; i < $inputs.length; i++) {
if (!validateInput($inputs.eq(i))) {
formIsInvalid = true
}
}
var $selects = $('.form-item.is-required select')
for (var i = 0; i < $selects.length; i++) {
if (!validateInput($selects.eq(i))) {
formIsInvalid = true
}
}
var state = hostedFieldsInstance.getState();
// Loop through the Hosted Fields and check
// for validity, apply the is-invalid class
// to the field container if invalid
Object.keys(state.fields).forEach(function (field) {
if (!state.fields[field].isValid) {
$(state.fields[field].container).addClass('is-invalid');
formIsInvalid = true;
}
});
if (formIsInvalid) {
// skip tokenization request if any fields are invalid
//隐藏loading
handleIdElementStyle('loading', 'display', 'none');
return;
}
const firstName = document.getElementById('first-name').value;
const lastName = document.getElementById('last-name').value;
const countryName = document.getElementById('countryId').value;
const stateName = document.getElementById('stateId').value;
const city = document.getElementById('cityId').value;
const address = document.getElementById('streetAddress').value;
const address2 = document.getElementById('streetAddress2').value;
let streetAddressArr = []
stateName && streetAddressArr.push(streetAddressArr)
city && streetAddressArr.push(city)
address && streetAddressArr.push(address)
address2 && streetAddressArr.push(address2)
const postalCode = document.getElementById('postal-code').value;
const email = document.getElementById('email').value;
const tokenizeOption = {
cardholderName: firstName + ' ' + lastName,
billingAddress: {
firstName: firstName,
lastName: lastName,
cardholderName: '2333',
// company: 'Company',
streetAddress: streetAddressArr.join(','),
postalCode: postalCode,
// extendedAddress: 'Unit 1',
// passing just one of the country options is sufficient to
// associate the card details with a particular country
// valid country names and codes can be found here:
// https://developers.braintreepayments.com/reference/general/countries/ruby#list-of-countries
countryName: 'United States',
countryCodeAlpha2: 'US',
countryCodeAlpha3: 'USA',
countryCodeNumeric: '840'
}
};
hostedFieldsInstance.tokenize(tokenizeOption, function (err, payload) {
if (err) {
console.error(err);
alert('payload: ' + JSON.stringify(err));
//隐藏loading
handleIdElementStyle('loading', 'display', 'none');
return;
}
// This is where you would submit payload.nonce to your server
// $('.toast').toast('show');
// you can either send the form values with the payment
// method nonce via an ajax request to your server,
// or add the payment method nonce to a hidden inpiut
// on your form and submit the form programatically
// $('#payment-method-nonce').val(payload.nonce);
// form.submit()
// 通过payload来给curPaymentMethod赋值
curPaymentMethod = paymentMethods[payload.type];
// Submit payload.nonce to your server
const temp = payload;
const params = "paymentMethodNonce="+payload.nonce+"&transactionNo="+transactionNo+
"&paymentMethod="+curPaymentMethod+"&firstName="+firstName+"&lastName="+
lastName+"&addressLine1="+streetAddress+"&postalCode="+postalCode+"&email="+email+
"&deviceData=" + deviceData;
ajaxPost(url, params, function (data) {
const result = data;
if ("success" === result.result.status) {
handleIdElementStyle('loading', 'display', 'none');
$('.alert-primary').show(500);
setTimeout(function () {
// handleIdElementStyle('main','display','block');
window.location.href = "";
}, 1500);
} else {
handleIdElementStyle('loading', 'display', 'none');
handleIdElementStyle('main', 'display', 'block');
alert(result.ret_msg)
location.reload();
}
})
});
});
});
});
});
}
//=====================start project=======================
//
initClient()
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>