// Base64 encoded version the Single-use Token API key.
      // Create the key below by concatenating the API username and password
      // separated by a colon and Base64-encoding the result
	  
      // var apiKey = "Your Base64-encoded Single-use token Api Key";
      var apiKey = "T1QtMTE3MDQwOkItcWEyLTAtNTk1NjRlNWMtMC0zMDJjMDIxNDdmMDU4M2I2OGY4ZWQyNjkxNDIxMDczMzZiYWIyMTZmOWMzZGJiNTEwMjE0MTgwYzY1NGQ3OTgzZmI2NTliYzEzZWY4YWMyZmQ1MTliMjVhOTQxZQ==";
			
      var initialcolor = "#E5E9EC";
	  
	  var options = {

        // select the Paysafe test / sandbox environment
        environment: "TEST",

        // set the CSS selectors to identify the payment field divs above
        // set the placeholder text to display in these fields
        fields: {
          cardNumber: {
            selector: "#cardNumber",
            placeholder: "Card number"
          },
          expiryDate: {
            selector: "#expiryDate",
            placeholder: "Expiry date"
          },
          cvv: {
            selector: "#cvv",
            placeholder: "CVV"
          }
        },

	//set the CSS styles to apply to the payment fields		
	style: {
	  input: {
            "font-family": "robotoregular,Helvetica,Arial,sans-serif",
            "font-weight": "normal",
            "font-size": "30px",
            "color": "#ff0000"
          }
	}	
      };

      // initalize the hosted iframes using the SDK setup function
      paysafe.fields.setup(apiKey, options, function(instance, error) {

        // Add event handling. Responds to the user selecting / deselecting a field by changing the border color
        instance.fields("cvv cardNumber expiryDate").on("Focus Blur", function(instance, event) {
	  this.style.borderColor = event.type === "Focus" ? "#00ff00" : initialcolor;
        })

        // When the customer clicks Pay Now,
        // call the SDK tokenize function to create
        // a single-use payment token corresponding to the card details entered
        document.getElementById("payNow").addEventListener("click", function(event) {
          instance.tokenize(function(instance, error, result) {
            if (error) {
              // display the tokenization error in dialog window
              alert(JSON.stringify(error));
            } else {
              // write the Payment token value to the bottom of the page
              $( "#token" ).text( "Token: " + result.token );
              // write the Payment token value to the browser console
              console.log(result.token);
            }
          });
        }, false);
      });