Sarkar/gist:7d24d4fa75a86ee6963e48d703ff2e80

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <script src="https://static.wepay.com/min/js/tokenization.3.latest.js"></script>
  </head>
<body>
 <!-- credit-card-iframe id will be the location for appending the credit card iframe -->
 <div id="credit-card-iframe"></div>
 <!-- this button will attach an onclick event to trigger submitToken function -->
 <button id="submit-credit-card-button">submit</button>
 <div id="token"></div>
 <script>
    // stage or production
    WePay.set_endpoint("stage");


    var iframe_container_id = "credit-card-iframe";
    var options = {
      'custom_style' : {
        'styles': {
          'base': {
            'border-color': '#ccc',
            'transition': ' border-color 0.6s linear, border-width 0.6s linear',
            'border-radius': '5px',
            ':hover': {
              'border-color': 'black'
              },
              ':focus': {
                'border-color': '#969696'
              },
              '::placeholder': {
                'color': '#ccc'
              },
              '::selection':{
                'color': 'red'
              }
          },
          'valid': {
            'border-color': '#5ca96d',
          },
          'invalid': {
            'border-color': '#d26172',
          }
        }
      }
    };


    var creditCard = WePay.createCreditCardIframe('credit-card-iframe', options);

    if (creditCard.error_code) {
        console.log('error', creditCard);
    }

    document.getElementById('submit-credit-card-button').addEventListener('click', function (event) {
    creditCard.tokenize({
        "client_id": "YOUR-CLIENT-ID-HERE",
        "user_name": "SAMPLE USERNAME",
        "email": "test@test.com",
        "address": {
            "postal_code": "10001"
        }
     })
    .then(function (response) {
        // response will has credit card token if all the user information are valid
        console.log('response_credit_card_test', response);
        var node = document.createElement('div');
        node.innerHTML = JSON.stringify(response);
       document.getElementById('token').appendChild(node);
    })
    .catch(function (error) {
         // error will have error message which explains why submitToken is not be able to generate token
         console.log('error_credit_card_test', error);
         var node = document.createElement('div');
         node.innerHTML = JSON.stringify(error);
        document.getElementById('token').appendChild(node);
    });
   });
   </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://static.wepay.com/min/js/tokenization.3.latest.js"></script>
	</head>
	<body>
	<!-- credit-card-iframe id will be the location for appending the credit card iframe -->
	<div id="credit-card-iframe"></div>
	<!-- this button will attach an onclick event to trigger submitToken function -->
	<button id="submit-credit-card-button">submit</button>
	<div id="token"></div>
	<script>
	// stage or production
	WePay.set_endpoint("stage");


	var iframe_container_id = "credit-card-iframe";
	var options = {
	'custom_style' : {
	'styles': {
	'base': {
	'border-color': '#ccc',
	'transition': ' border-color 0.6s linear, border-width 0.6s linear',
	'border-radius': '5px',
	':hover': {
	'border-color': 'black'
	},
	':focus': {
	'border-color': '#969696'
	},
	'::placeholder': {
	'color': '#ccc'
	},
	'::selection':{
	'color': 'red'
	}
	},
	'valid': {
	'border-color': '#5ca96d',
	},
	'invalid': {
	'border-color': '#d26172',
	}
	}
	}
	};


	var creditCard = WePay.createCreditCardIframe('credit-card-iframe', options);

	if (creditCard.error_code) {
	console.log('error', creditCard);
	}

	document.getElementById('submit-credit-card-button').addEventListener('click', function (event) {
	creditCard.tokenize({
	"client_id": "YOUR-CLIENT-ID-HERE",
	"user_name": "SAMPLE USERNAME",
	"email": "test@test.com",
	"address": {
	"postal_code": "10001"
	}
	})
	.then(function (response) {
	// response will has credit card token if all the user information are valid
	console.log('response_credit_card_test', response);
	var node = document.createElement('div');
	node.innerHTML = JSON.stringify(response);
	document.getElementById('token').appendChild(node);
	})
	.catch(function (error) {
	// error will have error message which explains why submitToken is not be able to generate token
	console.log('error_credit_card_test', error);
	var node = document.createElement('div');
	node.innerHTML = JSON.stringify(error);
	document.getElementById('token').appendChild(node);
	});
	});
	</script>
	</html>