A good payment form should look native within any given website. It should render appropriately on both mobile and desktop devices. Finally, it should be short and clearly laid out. Minor details can significantly impact the user experience and affect conversion rates.
PayForm is newest payment tool in Beanstream’s payment suite. It allows you to side-step the design and implementation of a custom payment UI. PayForm is simple to integrate – requiring just a single tag. It is configurable – allowing you to control what fields are collected. It is secure – ensuring that the customer’s card data never touches your server.
Take a peek (click the button to preview the form).
As you can see PayForm appears as an overlay on the page. This provides a small separation between the UI for the form and the UI of the page while reassuring users that they have not left the site. PayForm will render effectively on both mobile and desktop devices.
<form action="/charge" method="POST"> <script src="https://payform.beanstream.com/payform/beanstream_payform.js" data-image="https://yoursite.com/path/to/your/logo.svg" data-name="Acme Corporation" data-description="Item, Item, Item" data-amount="99" data-currency="cad"> </script> </form>
PayForm contains a set of payment fields we call PayFields. These fields can be used independently of PayForm. This allows you to design and implement your custom payment form without the worry of PCI compliance as the customer’s card data will not touch your server.
PayFields includes some terrific features, including the validation of card type and number, CVV number and date. It even streamlines user interaction by moving focus when a field has been completed. It then passes the card data to Beanstream’s server and returns a single-use token that you can safely pass through your server. All of these feature extend to PayForm as well.
<form action="/charge" method="POST"> <script src="https://payform.beanstream.com/payfields/beanstream_payfields.js"> </script> </form>
PayForm is still in active development. Over the coming months, we will be tweaking and refining the UI and behaviour. We will also be increasing the extent to which you will be able to customise and brand the UI. We will continue to keep you updated on the blog and developer portal, and as always if you should have any questions or suggestions, please reach out to us at email@example.com