sardar7110/cc_iframe_classic.html

## cc_iframe_classic.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://static.wepay.com/min/js/tokenization.4.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": "31506",
                "user_name": "SAMPLE USERNAME",
                "email": "test@test.com",
                "address": {
                    "postal_code": "10001"
                 }

            }, function (response) {
                if (response.error){
                  // error will have error message which explains why submitToken is not be able to generate token
                    console.log(response);
                }else {
                   // response will has credit card token if all the user information are valid
                    console.log(response);
                }
            });
   });
   </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://static.wepay.com/min/js/tokenization.4.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": "31506",
	"user_name": "SAMPLE USERNAME",
	"email": "test@test.com",
	"address": {
	"postal_code": "10001"
	}

	}, function (response) {
	if (response.error){
	// error will have error message which explains why submitToken is not be able to generate token
	console.log(response);
	}else {
	// response will has credit card token if all the user information are valid
	console.log(response);
	}
	});
	});
	</script>
	</html>