Skip to content

Instantly share code, notes, and snippets.

@sardar7110
Forked from wehub/cc_iframe_classic.html
Created September 19, 2019 21:10
Show Gist options
  • Save sardar7110/46ac2531aa93afc37ea57ed06314f7f6 to your computer and use it in GitHub Desktop.
Save sardar7110/46ac2531aa93afc37ea57ed06314f7f6 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment