<script src="https://token.monetary.co/v1/client"></script>
<form id="payment_form">
<input type="text" data-token="card_number" />
<input type="text" data-token="exp_month" />
<input type="text" data-token="exp_year" />
<input type="text" data-token="cvv" />
Note: The payment info input controls must not have ID or Name attributes.
<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;
}
}
MonetaryWebToken.requestToken("[Public Key Goes Here]", "payment_form", tokenCallback);
{
Token: "otuABCDEFGHIJ",
Brand: "Visa",
ExpirationMonth: "12",
ExpirationYear: "2020",
Last4: "1111"
}
{
Error: "Failed to create token"
}
The Monetary WebToken client provides a few methods to help integrators validate their input fields, for card number, expiration date, and CVV that return bool
values indicating input validity.
var validCard = MonetaryWebToken.validateCardNumber("4242424242424242");
var validExpirationDate = MonetaryWebToken.validateExpirationDate("06", "2020");
var validCVV = MonetaryWebToken.validateCVV("123");
Now that you've got fresh tokens 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!