Skip to main content

Client-side card tokenization

This is the suitable solution if you want to be able to host the card data collection form on your own page without having to directly manipulate such sensitive information.

The flow is the following:

  1. The customer fills in his card data (card number, expiration month/year, cardholder name, security code) on a form hosted on your own page.
  2. The customer submits the form. This should preferably be validated on the client-side first.
  3. A javascript listener (provided by you) bound to the form submission will first send the card information to our API in the background by using the syspay.tokenizer.tokenizeCard({...}, callback) function provided by our javascript library.
  4. A JS token is returned and a javascript callback (provided by you) is triggered. This callback should take care of submitting the returned token together with other form elements (email, etc...) but without the actual card data.
  5. The merchant makes a Server-2-server request but instead of submitting the whole payment_method data to our API, you only send the token you received from the client.

Note: This JS token can only be used once and within 5 minutes after it has been submitted by the client. If the payment attempt fails a new JS token has to be requested.