Sarkar · July 23, 2019 22:09
diff --git a/gistfile1.txt b/gistfile1.txt
 <!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>
	<!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>