12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- // Create and initialize a payment form object
- var paymentForm;
- // ---------------------------------------------------------------------------------------------------------------------
- function init() {
- paymentForm = new SqPaymentForm({
-
- // Initialize the payment form elements
- applicationId: applicationId,
- locationId: locationId,
- autoBuild: false,
-
- inputClass: 'sq-input',
- // Customize the CSS for SqPaymentForm iframe elements
- inputStyles: [{
- fontSize: '1em',
- color: 'purple',
- fontWeight: 'bold',
- padding: '5px'
- }],
-
- applePay: false,
- googlePay: false,
- masterpass: false,
- // Initialize the credit card placeholders
- cardNumber: {
- elementId: 'sq-card-number',
- placeholder: '•••• •••• •••• ••••'
- },
- cvv: {
- elementId: 'sq-cvv',
- placeholder: 'CVV'
- },
- expirationDate: {
- elementId: 'sq-expiration-date',
- placeholder: 'MM/YY'
- },
- postalCode: {
- elementId: 'sq-postal-code'
- },
-
- // SqPaymentForm callback functions
- callbacks: {
-
- methodsSupported: function (methods) {
- },
- unsupportedBrowserDetected: function() {
- alert('UNSUPPORTED BROWSER');
- },
-
- cardNonceResponseReceived: function(errors, nonce, cardData, billingContact, shippingContact) {
- if (errors) {
- // Log errors from nonce generation to the Javascript console
- console.log("Encountered errors:");
- errors.forEach(function(error) {
- console.log(' ' + error.message);
- });
- return;
- }
- alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
- document.getElementById('card-nonce').value = nonce; // Assign the nonce value to the hidden form field
- document.getElementById('nonce-form').submit(); // POST the nonce form to the payment processing page
- }
- }
- });
- paymentForm.build();
- return paymentForm;
- }
- // ---------------------------------------------------------------------------------------------------------------------
- // Called when 'Pay With Card' is clicked
- function requestCardNonce(event) {
- event.preventDefault(); // Don't submit the form until SqPaymentForm returns with a nonce
- paymentForm.requestCardNonce(); // Request a nonce from the SqPaymentForm object
- }
- // ---------------------------------------------------------------------------------------------------------------------
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', init);
- } else { // `DOMContentLoaded` already fired
- init();
- }
|