Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Credit-Card-iFrame-Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Credit Card iFrame demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.wepay.com/wepay.min.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 tokenize function -->
<button id="submit-credit-card-button">submit</button>
<div id="token"></div>
<script>
//--------------------------- this parts were documented --------------------------------------
// https://partner.wepay.com - sign up and get an App ID here.
var myAppId = "INSERT-APP-ID-HERE";
var apiVersion = "3.0";
var error = WePay.configure("stage", myAppId, apiVersion);
if (error) {
// An error is returned if any fields are missing or invalid.
console.log(error);
}
// -----------------------------------END--------------------------------------------------
// String only
var iframe_container_id = "credit-card-iframe";
// Object. Default is null.
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(iframe_container_id, options);
if (creditCard.error_code) {
console.log(creditCard.error_code);
}
document.getElementById('submit-credit-card-button').addEventListener('click', function (event) {
creditCard.tokenize()
.then(function (response) {
console.log('response', JSON.stringify(response));
var node = document.createElement('div');
node.innerHTML = JSON.stringify(response);
document.getElementById('token').appendChild(node);
/*
success
{
"id": "payment_methods-a2e2240d-d5fc-4609-9b4e-56e591fc8ea5",
"resource": "tokens",
"path": null,
"owner": {
"id": "15588",
"resource": "applications",
"path": null
},
"create_time": 1551491016,
"expire_time": 1551492816,
"api_version": "3.0"
}
*/
})
.catch(function (error) {
console.log('error', error);
var node = document.createElement('div');
node.innerHTML = JSON.stringify(error);
document.getElementById('token').appendChild(node);
/*
tokenize error messages
1. wepay has issues
"error_code": "UNEXPECTED_ERROR",
"error_message": "There was an unknown error."
2. when user does not enter valid value in html input element
{
"error_code": "INVALID_PARAMS",
"error_message": "Invalid parameter(s).",
"details": [
{
"target": payment_methods, // payment_methods, credit_card, expiration_month
"target_type": "HTML_INPUT_ELEMENT_VALIDATION",
"reason_code": "PARAM_IS_WRONG_TYPE",
"message": "Expected type in [ integer ] but found type null."
},
{
"target": "payment_methods", // payment_methods, credit_card, expiration_month
"target_type": "HTML_INPUT_ELEMENT_VALIDATION",
"reason_code": "PARAM_IS_WRONG_TYPE",
"message": "Expected type in [ integer ] but found type string."
},
{
"target": payment_methods, // payment_methods, credit_card, expiration_month
"target_type": "HTML_INPUT_ELEMENT_VALIDATION",
"reason_code": "PARAM_VALUE_IS_INVALID_PATTERN",
"message": "Expected a value matching the regular expression '^[0-9]{12,19}$'."
}
]
}
*/
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.