
Platon P2P
The card-to-card transfer page and its embeddable form for a Ukrainian payment provider
Platon is a Ukrainian payment service provider, in business since 2012. One of the things it sells is a card-to-card transfer: a person sends money from their own bank card straight to somebody else's card, and the transfers go over Visa Direct and Mastercard MoneySend. So somebody sits in front of a form and types a full card number into it. That form is built to be embedded, which means it lives inside other pages as well as on Platon's own site.
I worked on that form between 2019 and 2020. Platon was a client of Qberry, the outsourcing company where I had my first real job, and that's how I got there.
The form started out as a jQuery build, with jQuery Mask handling the card fields, and it grew into a Vue one. Here's what the Vue build does for whoever is sending the money. The card number goes into 4 masked fields, with vue-the-mask doing the masking, and focus jumps to the next field as you type, then back again when you delete. The browser checks the card number and the expiry date before anything is sent: card-validator runs the Luhn and card-brand checks, and vuelidate keeps the rules for each field. And the whole form speaks 3 languages, Ukrainian, Russian and English.
Btw, The form is in service on Platon's own site!
Stack
- Vue
- vuelidate
- card-validator
- vue-the-mask
- jQuery
- jQuery Mask
- webpack
Credits
- Platon
- Wordmark, white on a dark ground
- Wordmark, dark on a light ground
- Live card-to-card transfer form