Getting started with Datacap Hosted WebToken

Include the client on your page

Add the secure, hosted JavaScript client in the `<head>` of your page:

                    <script src="https://token.dcap.com/v1/client/hosted"></script>
        
                

Define the required iframe control

Create an iframe and give it an ID:

                    <iframe id="token-iframe" frameborder="0"></iframe>
        
                

Define an input control to insert the token resulting into:

                    <input type="hidden" id="token" />
        
                

Define required JavaScript

Define a JavaScript callback method for token events:

                    var tokenCallback = function(response) {
          if (response.Error)
          {
            alert("Token error: " + response.Error);
          }
          else
          {
            var token = response.Token;
            document.getElementById("token").value = token;
          }
        }
        
                

Initialize the hosted iframe

Call `init` with your token key, iframe control ID, and token callback method:

                    DatacapHostedWebToken.init('[Token Key Goes Here]', 'token-iframe', tokenCallback);
        
                

Optional: Provide `init` with a string of your custom CSS to style the iframe contents:

                    var customCSS = ".card-data { background-color: #ADD8E6; color: white; }";
        DatacapHostedWebToken.init('[Token Key Goes Here]', 'token-iframe', tokenCallback, customCSS);

The layout of the iframe contents and their classes can be found here: https://token.dcap.com/v1/view/i

Note: When custom CSS is provided, Datacap’s default styling is entirely cleared.

Request a token!

Call `requestToken` from your page to trigger tokenization:

                    <input type="button" onclick="DatacapHostedWebToken.requestToken()" value="Submit" />
        
                

The response object received by your callback method looks like this:

On Success

                    {
          Token: "DC4:AADHAusosfTEnSKSVT1ro4pTxzJW6Avo9TuryyUmfheTQz05XjWQgtMbFlq405h2qcgNLb4lImhBYESG/IcztURUGbktK1/s7LDKHwnz3tpiCWeOQn+4tGppff8XWV+xtEU=",
          Brand: "Visa",
          ExpirationMonth: "12",
          ExpirationYear: "2020",
          Last4: "1111"
        }
        
                

On Field Validation Failure

                    {
          Error: "Invalid Card Number"
        }
        
                

On Failure

                    {
          Error: "Failed to create token"
        }
        
                

Use your tokens!

Now that you’ve got a fresh token in your payment form, you can submit the form and process token payments on Datacap’s payment platform!

Report bugs

If you encounter any bugs or issues with the latest version of WebToken, please report them to us by opening a GitHub Issue!