JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script type="text/javascript" src="https://js.squareupsandbox.com/v2/paymentform">
</script>
<div id="form-container">
     <div id="sq-card-number"></div>
     <div id="sq-expiration-date"></div>
     <div id="sq-cvv"></div>
     <div id="sq-postal-code"></div>
     <button id="sq-creditcard" 
           onclick="onGetCardNonce(event)">Pay $1.00</button>
   </div>

JavaScript

const paymentForm = new SqPaymentForm({


     cardNumber: {
         elementId: 'sq-card-number',
         placeholder: 'Card Number'
     },
     cvv: {
         elementId: 'sq-cvv',
         placeholder: 'CVV'
     },
     expirationDate: {
         elementId: 'sq-expiration-date',
         placeholder: 'MM/YY'
     },
     postalCode: {
         elementId: 'sq-postal-code',
         placeholder: 'Postal'
     },
     // SqPaymentForm callback functions
     callbacks: {
         cardNonceResponseReceived: function (errors, nonce, cardData) {


            alert(`The generated nonce is:\n${nonce}`);
         }
     }
   });
   
    function onGetCardNonce(event) {
       paymentForm.requestCardNonce();
     }