<script src="https://token.monetary.co/v1/client/hosted"></script>
<iframe id="monetary-token-iframe" frameborder="0"></iframe>
<input type="hidden" id="token" />
var tokenCallback = function(response) {
if (response.Error)
{
alert("Token error: " + response.Error);
}
else
{
var token = response.Token;
document.getElementById("token").value = token;
}
}
MonetaryHostedWebToken.init('[Public Key Goes Here]', 'monetary-token-iframe', tokenCallback);
var customCSS = ".card-data { background-color: #ADD8E6; color: white; }";
MonetaryHostedWebToken.init('[Public Key Goes Here]', 'monetary-token-iframe', tokenCallback, customCSS);
The layout of the iframe contents and their classes can be found here: https://token.monetary.co/v1/view/i
Note: When custom CSS is provided, Monetary's default styling is entirely cleared.
<input type="button" onclick="MonetaryHostedWebToken.requestToken()" value="Submit" />
{
Token: "otuABCDEFGHIJ",
Brand: "Visa",
ExpirationMonth: "12",
ExpirationYear: "2020",
Last4: "1111"
}
{
Error: "Invalid Card Number"
}
{
Error: "Failed to create token"
}
Now that you've got a fresh token in your payment form, you can submit the form and process token payments on Monetary's payment platform!
If you encounter any bugs or issues with the latest version of WebToken, please report them to us by opening a GitHub Issue!