var form = $('form#donate-form-citygospel'); $(function () { $("body").on("click", "#donate-form-citygospel #donate-part2", function (e) { if (setFormValues()) { $("#donate-form-citygospel #donate-citygospel-part1").slideToggle(); $("#donate-form-citygospel #donate-citygospel-part2").slideToggle(); } }); $("body").on("click", "#donate-form-citygospel #edit-amount", function (e) { $("#donate-form-citygospel #donate-citygospel-part1").slideToggle(); $("#donate-form-citygospel #donate-citygospel-part2").slideToggle(); setFormValues(); }); $("body").on("click", "#donate-form-citygospel .toggle-buttons a", function (e) { $("#donate-form-citygospel .toggle-buttons a").removeClass('active'); $(this).addClass('active'); $(this).find('input').prop('checked', true); setFormValues(); }); $("body").on("click", "#donate-form-citygospel .amount-button", function (e) { e.preventDefault(); $("#donate-form-citygospel .amount-button").removeClass('selected'); $(this).addClass('selected'); $(this).find('input').prop('checked', true); $('#donate-form-citygospel .other-amount-button').removeClass('hidden'); $('#donate-form-citygospel .donate-amount').addClass('hidden'); setFormValues();
}) $("body").on("click", "#donate-form-citygospel .other-amount-button", function (e) { $('#donate-form-citygospel .amount-button').removeClass('selected'); $('#donate-form-citygospel .amount-button input').prop('checked', false); $('#donate-form-citygospel .other-amount-button').addClass('hidden'); $('#donate-form-citygospel .donate-amount').removeClass('hidden'); $('#donate-form-citygospel .donate-amount input').focus().select(); setFormValues();
});
$('.enable-tooltip').hover(function () { var title = $(this).attr('title'); $(this).data('tipText', title); if(title == ''){} else{ $('
').fadeIn(200).text(title).appendTo('body'); } }, function () { $(this).attr('data-tooltip', $(this).data('tipText')); $('.tooltip').fadeOut(200); }).mousemove(function (e) { var mousex = e.pageX; var mousey = e.pageY; $('.tooltip').css({ top: mousey, left: mousex }) });
})
function setFormValues() {
if ($("input[name='give_type']:checked").val() == 2) { $("#donate-form-citygospel .monthly").addClass('show'); } else { $("#donate-form-citygospel .monthly").removeClass('show'); } var amount = $("input[name='amount']:checked").val(); if (!$("input[name='amount']:checked").val()) { amount = $("input[name='custom_amount']").val(); } $("#donate-form-citygospel .amount-giving").text('$' + amount);
if (!amount) { if ($("#donate-form-citygospel .donate-amount").is(":visible")) { $("#donate-form-citygospel .donate-amount .invalid-feedback").show(); } return false; } else { $("#donate-form-citygospel .donate-amount .invalid-feedback").hide(); } return true; }
braintree.client.create({ authorization: 'sandbox_w3zxxxk7_y2xkkyxr4k8r3kt6' }, function (err, clientInstance) { if (err) { console.error(err); return; }
// Create a PayPal Checkout component. braintree.paypalCheckout.create({ client: clientInstance }, function (paypalCheckoutErr, paypalCheckoutInstance) {
// Stop if there was a problem creating PayPal Checkout. // This could happen if there was a network error or if it's incorrectly // configured. if (paypalCheckoutErr) { console.error('Error creating PayPal Checkout:', paypalCheckoutErr); return; }
// Set up PayPal with the checkout.js library paypal.Button.render({ env: 'sandbox', // or 'sandbox'
payment: function () { return paypalCheckoutInstance.createPayment({ flow: 'vault', billingAgreementDescription: 'Citygospel Donation', enableShippingAddress: false, shippingAddressEditable: false, }); },
onAuthorize: function (data, actions) { return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) { // Submit `payload.nonce` to your server. processPayment(payload.nonce);
}); },
onCancel: function (data) { console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2)); },
onError: function (err) { console.error('checkout.js error', err); } }, '#paypal-button').then(function () { // The PayPal button will be rendered in an html element with the id // `paypal-button`. This function will be called when the PayPal button // is set up and ready to be used. });
});
braintree.hostedFields.create({ client: clientInstance, styles: { input: { // change input styles to match // bootstrap styles 'height': '56px', color: '#495057', 'font-size': '16px', 'outline': '0' }, '::-webkit-input-placeholder': { 'color': '#c1c1ba' }, ':-moz-placeholder': { 'color': '#c1c1ba' }, '::-moz-placeholder': { 'color': '#c1c1ba' }, ':-ms-input-placeholder': { 'color': '#c1c1ba' } }, fields: { number: { selector: '#cc-number', placeholder: 'Credit card number' }, cvv: { selector: '#cc-cvv', placeholder: 'CCV' }, expirationDate: { selector: '#cc-expiration', placeholder: 'MM/YY' } } }, function (err, hostedFieldsInstance) { if (err) { console.error(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; }
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; }
var ccFirstName = $('#cc-firstname'); var ccLastName = $('#cc-lastname'); var email = $('#email'); var street = $('#street'); var zip = $('#zip'); var city = $('#city');
ccFirstName.on('change', function () { validateInput(ccFirstName); }); ccLastName.on('change', function () { validateInput(ccLastName); }); street.on('change', function () { validateInput(street); }); zip.on('change', function () { validateInput(zip); }); city.on('change', function () { validateInput(city); }); email.on('change', validateEmail);
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();
var formIsInvalid = false; var state = hostedFieldsInstance.getState();
// perform validations on the non-Hosted Fields // inputs if (!validateEmail()) { formIsInvalid = true; } if (!validateInput($('#cc-firstname'))) { formIsInvalid = true; } if (!validateInput($('#cc-lastname'))) { formIsInvalid = true; } if (!validateInput($('#street'))) { formIsInvalid = true; } if (!validateInput($('#zip'))) { formIsInvalid = true; } if (!validateInput($('#city'))) { formIsInvalid = true; }
// 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 return; }
hostedFieldsInstance.tokenize({ // include the cardholderName in the tokenization // request cardholderName: $('#cc-firstname').val() + ' ' + $('#cc-lastname').val() }, function (err, payload) { if (err) { console.error(err); return; }
processPayment(payload.nonce);
}); }); });
var button = document.querySelector('#google-pay-button'); var paymentsClient = new google.payments.api.PaymentsClient({ environment: 'TEST' // Or 'PRODUCTION' });
braintree.googlePayment.create({ client: clientInstance, googlePayVersion: 2, googleMerchantId: 'merchant-id-from-google' // Optional in sandbox; if set in sandbox, this value must be a valid production Google Merchant ID }, function (googlePaymentErr, googlePaymentInstance) { paymentsClient.isReadyToPay({ // see https://developers.google.com/pay/api/web/reference/object#IsReadyToPayRequest apiVersion: 2, apiVersionMinor: 0, allowedPaymentMethods: googlePaymentInstance.createPaymentDataRequest().allowedPaymentMethods, existingPaymentMethodRequired: true // Optional }).then(function (response) { if (response.result) { button.addEventListener('click', function (event) { event.preventDefault();
var amount = $("input[name='amount']:checked").val(); if (!$("input[name='amount']:checked").val()) { amount = $("input[name='custom_amount']").val(); } var paymentDataRequest = googlePaymentInstance.createPaymentDataRequest({ transactionInfo: { currencyCode: 'USD', totalPriceStatus: 'FINAL', totalPrice: amount // Your amount } });
// We recommend collecting billing address information, at minimum // billing postal code, and passing that billing postal code with all // Google Pay card transactions as a best practice. // See all available options at https://developers.google.com/pay/api/web/reference/object var cardPaymentMethod = paymentDataRequest.allowedPaymentMethods[0]; cardPaymentMethod.parameters.billingAddressRequired = true; cardPaymentMethod.parameters.billingAddressParameters = { format: 'FULL', phoneNumberRequired: true };
paymentsClient.loadPaymentData(paymentDataRequest).then(function (paymentData) { googlePaymentInstance.parseResponse(paymentData, function (err, result) { if (err) { // Handle parsing error }
processPayment(result.nonce) // Send result.nonce to your server // result.type may be either "AndroidPayCard" or "PayPalAccount", and // paymentData will contain the billingAddress for card payments }); }).catch(function (err) { // Handle errors }); }); } }).catch(function (err) { // Handle errors }); }); });
function processPayment(nonce) { var amount = $("input[name='amount']:checked").val(); if (!$("input[name='amount']:checked").val()) { amount = $("input[name='custom_amount']").val(); } var data = { first_name: $('#cc-firstname').val(), last_name: $('#cc-lastname').val(), email: $('#email').val(), type: $("input[name='give_type']:checked").val(), amount: amount, nonce: nonce, hash: "9eabf06e7b072252bdf1614419da56ef", utc: "UTC_TEST", }
// This is where you would submit payload.nonce to your server $("#pay-part").attr('disabled', 'disabled');
$.ajax({ url: 'https://cgmapi.converteverywhere.com/checkout', type: 'POST', data: data, success: function (response) { $("#donate-citygospel-part2").slideUp(); $("#donate-citygospel-part3").slideDown();
} }); }
City Gospel Mission is a 501 (c)(3) organization. Contributions are tax-deductible in accordance with IRS rules and regulations.