Created
September 13, 2019 19:41
-
-
Save wehub/9bb8622714696c6583bd15d3598380f2 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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": "[email protected]", | |
| "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> |
sardar7110
commented
Dec 14, 2019
- @ #
Hi @sardar7110 - were you looking to ask a question about the iframe?
yes plz if u can thnx
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment