sq-paymentform.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. // Create and initialize a payment form object
  2. var paymentForm;
  3. // ---------------------------------------------------------------------------------------------------------------------
  4. function init() {
  5. paymentForm = new SqPaymentForm({
  6. // Initialize the payment form elements
  7. applicationId: applicationId,
  8. locationId: locationId,
  9. autoBuild: false,
  10. inputClass: 'sq-input',
  11. // Customize the CSS for SqPaymentForm iframe elements
  12. inputStyles: [{
  13. fontSize: '1em',
  14. color: 'purple',
  15. fontWeight: 'bold',
  16. padding: '5px'
  17. }],
  18. applePay: false,
  19. googlePay: false,
  20. masterpass: false,
  21. // Initialize the credit card placeholders
  22. cardNumber: {
  23. elementId: 'sq-card-number',
  24. placeholder: '•••• •••• •••• ••••'
  25. },
  26. cvv: {
  27. elementId: 'sq-cvv',
  28. placeholder: 'CVV'
  29. },
  30. expirationDate: {
  31. elementId: 'sq-expiration-date',
  32. placeholder: 'MM/YY'
  33. },
  34. postalCode: {
  35. elementId: 'sq-postal-code'
  36. },
  37. // SqPaymentForm callback functions
  38. callbacks: {
  39. methodsSupported: function (methods) {
  40. },
  41. unsupportedBrowserDetected: function() {
  42. alert('UNSUPPORTED BROWSER');
  43. },
  44. cardNonceResponseReceived: function(errors, nonce, cardData, billingContact, shippingContact) {
  45. if (errors) {
  46. // Log errors from nonce generation to the Javascript console
  47. console.log("Encountered errors:");
  48. errors.forEach(function(error) {
  49. console.log(' ' + error.message);
  50. });
  51. return;
  52. }
  53. alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
  54. document.getElementById('card-nonce').value = nonce; // Assign the nonce value to the hidden form field
  55. document.getElementById('nonce-form').submit(); // POST the nonce form to the payment processing page
  56. }
  57. }
  58. });
  59. paymentForm.build();
  60. return paymentForm;
  61. }
  62. // ---------------------------------------------------------------------------------------------------------------------
  63. // Called when 'Pay With Card' is clicked
  64. function requestCardNonce(event) {
  65. event.preventDefault(); // Don't submit the form until SqPaymentForm returns with a nonce
  66. paymentForm.requestCardNonce(); // Request a nonce from the SqPaymentForm object
  67. }
  68. // ---------------------------------------------------------------------------------------------------------------------
  69. if (document.readyState === 'loading') {
  70. document.addEventListener('DOMContentLoaded', init);
  71. } else { // `DOMContentLoaded` already fired
  72. init();
  73. }