Skip to main content

Sample HTML page

The following example uses jQuery to handle the form submission and the retrieval of the card data, but it is not required by our library.

Note that the card data inputs do NOT have a name attribute so they are not submitted with the rest of the form. It is your responsibility to make sure that the card data is not submitted to your server.

<html>
<head>
    <!-- Required -->
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//cdn.syspay.com/js/syspay.tokenizer-current.js"></script>
    <script>
        // This is not required for production usage
        syspay.tokenizer.setBaseUrl("https://app-sandbox.syspay.com/api/v1/public/");

        // The public key will be provided by SysPay account manager or via Partner API calls
        syspay.tokenizer.setPublicKey("your-public-key");

        // The following function will be called back once the card data will have been submitted to the SysPay API
        var callback = function(response) {
            if (null === response.error) {
                // The request was successfully processed. Add the returned token to the form before submitting it for real.
                $('<input type="hidden" name="syspay-token" />')
                    .val(response.token)
                    .appendTo('#my-form');

                // Submit the form
                $('#my-form').get(0).submit();
            } else {
                alert('An error occurred: ' + response.message + '(Code: ' + response.error + ')');
                return false;
            }
        };

        $(function() {
            // Catch form submissions and send the card data to syspay
            $('#my-form').submit(function() {
                // Submit the card data to Syspay
                syspay.tokenizer.tokenizeCard({
                    number:     $('#number').val(),
                    cardholder: $('#cardholder').val(),
                    exp_month:  $('#exp-month').val(),
                    exp_year:   $('#exp-year').val(),
                    cvc:        $('#cvc').val()
                }, callback);

                // Prevent form submission
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="my-form" method="POST" action="/path/to/checkout">
        <!-- This will be submitted -->
        <label>Email <input type="text" id="email" name="email" /></label>

        <!-- This won't -->
        <label>Cardholder <input type="text" id="cardholder" /></label>
        <label>Card number <input type="text" id="number" /></label>
        <label>Expiration month <input type="text" id="exp-month" /></label>
        <label>Expiration year <input type="text" id="exp-year" /></label>
        <label>CVC <input type="text" id="cvc" /></label>
        <input type="submit" value="Checkout" />
    </form>
</body>
</html>

Sample server-2-server request​

{
    "flow": "API",
    "return_url": "http:\/\/www.mysite.com\/return.php",
    "ems_url": "http:\/\/www.mysite.com\/ems.php",
    "customer": {
        "email": "test@domain.com",
        "language": "en"
    },
    "payment_method": {
        "token_key": "4f7964aef61b02dd00d3617a3fa0652dff49d99d94955f8907e4e4210e366d78:mia5z816e8dc8dcizpfcdrdgdaayjylf"
    }
}