Coming Soon: The New Paystack Checkout Form

Every month, over 1,000,000 transactions are processed through the Paystack Checkout Form for over 12,000 business. Checkout is one of the most important touchpoints of the Paystack experience, and we’re thrilled to announce that the Paystack Checkout Form will be getting a major upgrade in the next few weeks.

Say hello to Paystack Checkout Form 2.0!

A Brief History of the Paystack Checkout Form (2016 - 2018)

In January 2016, Paystack went live with a simple Javascript file that anyone could put on their site to load a checkout form. The first version of the Checkout Form was designed and developed within a week, and updated incrementally over time.

Hundreds of thousands of customers have interacted with the first version of the Checkout Form, funneling millions of dollars worth of payments into the pockets of businesses in Nigeria. 

For the first year and half of Paystack’s existence, we supported only card payments. In mid-2017, we introduced a second payment channel, Pay with Bank. In 2018, we’ll be unleashing many new payment channels, ensuring that once a business integrates with Paystack, you’ll be able to unlock numerous payment options with only a few clicks.

When we started work on implementing new payment channels, we realized that our trusted tab design for the Checkout Form could only handle about two or three payment channels elegantly. As the number of people who use our checkout form increased, and as we needed to support more payment methods, it was time to take another stab at the Checkout Form.

We set to work.

Rethinking the Checkout Experience

While the original motivation for the new Checkout Form was to support new payment channels, we quickly realized that this was an opportunity to fundamentally rethink the checkout experience, while retaining the familiar elements that both merchants and customers have come to know and love.

If you designed an online checkout form specifically engineered for high conversions amongst Africans, what would it look like?

This is the question that Paystack designer/developers Ope Aikomo, Onyekachi Mbaike, and Olumide Ojo obsessed over. We broke this down into themed questions, including How will it handle multiple payments channels?, How will it inspire trust?, How will it drive better success rates?, and more. Here're the full list of questions that shaped our thinking.

Using this as a base, we started a 6 month-long process involving research, many (many) design iterations, development, and testing, and now we’re excited to share a first look at the new Paystack Checkout Form, which will be rolling out to all merchants in early August 2018.

This is what the new Checkout Form looks like with multiple Payment Channels.

And this is what it looks like with only one Payment Channel.

As always, Paystack merchants will be able to select exactly which Payment Channels they want to enable for their business, and the design of the checkout will update to make sure it always looks great.

Completely rebuilt from the ground up

The new Paystack Checkout Form was completely rebuilt from the ground up with modern development tools and frameworks. One of the first things we did was create a foundation for this new product in the form of a Javascript library we call Paystack JS.

Paystack JS

Paystack JS is the foundation for our new checkout form as well as a nifty tool for developers across the Paystack network. With this library, developers and merchants can now design your own payment forms exactly as you wish. 

What this means is that developers can use Paystack JS to build an entirely custom checkout experience to look and behave exactly as you desire. In fact, the new Paystack Checkout Form itself is built on Paystack JS. Basically, if you’d prefer that your Checkout look and behave differently, you’ll be able to implement that.

We’ll be publishing the documentation for Paystack JS within the next few weeks, so prepare to hear a lot more about this.

As soon as this was done, we moved to design.

Design

We focused on making the checkout form simple but yet sturdy enough to support many more payment channels. Even with scale, we wanted it to feel as good - if not better - than the old one. Our design goals also included making it very accessible, and to provide a great mobile experience.

In future articles, we’ll share some of the design directions we explored.

Mobile Experience

70% of payments on Paystack are done on mobile phones, and so paying with Paystack has to be a pleasant experience on mobile. We increased text sizes for readability, fine-tuned transitions, and designed a unique layout that expresses our ideas for what paying on your phone should feel like.

Testing on the new checkout
We also made it much easier to use checkout while testing. Test information is readily available and easy to use so developers can focus on their code and logic.

New Payment Channels

The new Paystack Checkout Form sets the stage for brand new payment channels, including GTB 737, Ghana Mobile Money, and Visa QR code payments.

The vertical tab design means that the checkout form is future proof - it’s now extremely easy for us to add more payment channels as they come. And it doesn’t matter how many channels a business owner has turned on - whether you choose to display only a single payment channel, or all of them, the Checkout Form will still look great.

Smart Error Resolution

Paystack merchants enjoy the best transaction success rates in the industry, but failed transactions happen from time to time, and every customer who encounters a “failed transaction” screen is a missed sales opportunity for our merchants.

There’re numerous reasons why a customer might run into a payment error. For example, the customer might have insufficient funds, or the customer’s bank might not have authorized that card for online payments.

Whatever the reason for the error, the new Paystack Checkout Form is smart enough to know WHY a customers’ payment failed, and then recommend alternative payment options to ensure that the customer successfully completes the transaction.

For example, say that the transaction is failing because the customer has insufficient funds in their account. The new Checkout Form will:

• explain to the customer exactly why the payment failed
• helpfully serve up alternate ways that the customer can complete the payment from other bank accounts

Much more coming down the pipeline

This is just the beginning. Here’s a peek at further enhancements we’re considering for later in the year.

Language Translations

Paystack merchants have customers from all over the world, and the best Checkout Form is one that speaks their language. If a customer is looking at the checkout form in Francophone Africa, for instance, the Paystack Checkout Form should ideally display text in French, while a customer in Madrid should see instructions in Spanish.

Closer to home, not everyone is fluent in English. A Yoruba, Igbo, and Hausa native speaker should be able to navigate the Paystack Checkout Form as easily as anyone else.

After-Purchase Actions

The moment right after a customer makes a successful payment is a high point in a merchant’s relationship with that customer. What if it were possible to leverage that magical moment to further help businesses drive their goals?

We’re considering a range of post-purchase actions that Paystack merchants can enable if they desire.

• Click to share product: Prompt customers to share your product or service with friends via WhatsApp, SMS, Facebook, or Twitter
• Click to follow on social: Effortlessly grow your social audience on Instagram, Twitter, Facebook, etc.
• Collect feedback & reviews: Collect constructive product feedback as well as reviews that can be used in future marketing

What the new Paystack Checkout Form means for Developers

If you're a developer who has integrated Paystack previously (or if you've built a plugin for Paystack), there's nothing you need to do to prepare for the rollout of the new Paystack Checkout Form.

The only thing worth knowing is that if you implemented Paystack via Inline Embed, customers will see the old Checkout Form, instead of the new one.

The new Checkout Form was designed and developed to be backwards compatible, but we encourage you to test your integrations to ensure that everything looks and behaves as expected. If you have any questions, please swing by the Paystack Developer Slack community.

Try the new Paystack Checkout Form right now

The new checkout form is currently in beta while we test it for a few weeks. 

Want to see it in action? You can try it on the Paystack Demo: paystack.com/demo

If you see anything funky, please shoot us an email to let us know at [email protected]!

Join the Beta and get the new Checkout Form before everyone else

The new Paystack Checkout Form will be rolling out to all Paystack merchants in late July/early August. In the meantime, we’re running a Beta for a handful of Paystack businesses who’re interested in helping us take it through its paces.

Here’s what you need to be able to join the Beta:

• You must have a live Paystack business
• You must be willing to be super engaged with giving feedback (eg. by answering surveys about your experience, or doing 10 mins phone interviews)

If that sounds like you, please apply to join the Beta.

(Please note that the new payment channels will only appear in the latter parts of the Beta, not immediately.)

The world’s best checkout form, working hard for businesses in Africa

The new Paystack Checkout Form is a performant powerhouse, able to power payments for all scales of business, from a global airline to an Instagram clothing store.

Think of it as your business’ additional employee - a robust growth engine working hard to convert visitors into paying customers. Your customers will also enjoy a fast, intuitive, beautiful payment experience that elevates your brand, and gives them the confidence to enter their payment details.

We’ve set out to create the world’s best Checkout Form, and to put it to work in the service of African businesses. Over the next few weeks, we’ll be going under the hood and sharing more details about its design and development, so look out for that.

Questions or feedback?

Is there anything you’d like to know about the new Checkout Form? Or would you like to suggest useful features for the future? Please shoot us a message at [email protected]! We look forward to hearing from you.