PayForm & PayFields

Introducing PayForm and PayFields

The payment form, or where a customer enters their payment information online, is one of the most crucial steps in the online sales flow. Your customer is within seconds of purchasing your product or service, and the form’s design and ease of use will have a determining factor on whether the sale is completed or not.

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.

Introducing PayForm

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>

Find out more on PayForms

PayFields

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>

Find out more on PayFields

What’s Next

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 dev@beanstream.com
Aengus Bates

Aengus Bates

Aengus is a developer advocate based in Victoria, BC with a background in communication and collaboration apps, and web payments. He is interested in transparent UX, lean development and open source. When not writing about himself in the third person he runs up hills, skis on the flat and rides his bike everywhere in between. Fiddle dee dee potatoes.
Aengus Bates

Latest posts by Aengus Bates (see all)