Understand Web Payments API using Hashnode Sponsors | SrishCodes

Understand Web Payments API using Hashnode Sponsors | SrishCodes

Hi everyone, welcome back to SrishCodes where I teach you interesting tech concepts that you should know about as a current or aspiring software developer. Today I will be sharing with you about the Web Payment API using a brand new feature on Hashnode - Hashnode Sponsors.

image.png

Introducing Hashnode Sponsors

Hashnode Sponsors is a new way to monetize your developer blogs. If you are now thinking that you will have to pay a subscription fee to access the thousands of articles posted on Hashnode, you are wrong. The best part about Hashnode Sponsors is that it is a no paywall system, where instead of paying a monthly subscription fee users can simply choose to sponsor their favourite bloggers.

All they need to do is enter an amount and their payment details. They can also choose to leave a note for the content creator. Bonus: Hashnode Sponsors is completely commission free. Isn't this the most rewarding feature?!

Now let's understand how the Web Payments API powers dedicated payment features like Hashnode Sponsors in the browser.

Introduction to Web Payments API

Web Payments is a series of standardized payments APIs available in modern browsers like Payment Request API, Payment Handler API and others. These APIs work with any browser on any device as they are standardized by the World Wide Web Consortium.

This flexibility enables apps to integrate with browsers easier than ever by simplifying development and compatibility with emerging payment technologies. You can get a glimpse of this API in action on most major payments methods like Google Pay, Apple Pay and Samsung Pay. If you are looking to develop an app that includes payments as one of its features, keep reading!

Benefits of Web Payments

As mentioned above, there are several benefits of using Web Payments.

Better user experience

Payments are now made within the context of the merchant website, without redirects or pop-up windows. There is also an option for customers to save their payment details securely in their browser or payment app, complete their payments without filling in additional details and returning to where they left off.

This seamless experience encourages more users to complete their transactions and leads to higher conversion rates for businesses. In older versions, by the time I fill in the long, multi page payment form I have lost interest in purchasing the item.

Better developer experience

Great products that are easy to integrate are always appreciated by developers like me. Web Payments definitely ticks this box as it can be integrated with JavaScript and basic server-side integration. Merchants can also dynamically change the shipping cost based on the address selected without too much technical complexity, where previously this required hundreds of lines of platform-specific server-side code.

Improved security

We are all aware of the security hazards of online payments. In university, we were told to not integrate payments in our apps purely due to the security concerns. Web Payments addresses some of those concerns by using the latest security and privacy paradigms in mind. For example, it includes sideloading prevention when invoking platform-specific payment apps.

How Does It Work?

Let's now deep dive into the details of how the Web Payments API works.

image.png Source

  • When a customer decides to make a purchase, the merchant initiates the payment transaction. With the transaction information, the browser determines the payment app to launch. In Hashnode, this is like clicking on the "Sponsor" button, where we can then fill in details of the amount we want to sponsor.

image.png

Source

  • The merchant shows payment buttons for payment methods that the customer can use, like Apple Pay, Google Pay etc.

image.png Source

  • When the customer presses the payment button, the payment UI is launched, this can be an alert to confirm the transaction or a prompt to enter a CVC for your credit card.
  • The browser can then launch a payment app, which receives the transaction information from the Step 1. This information contains details like the total price, payment method data etc.
  • Customers can update details like their shipping address, or shipping option (standard or express shipping) and the merchant receives these changes.
  • The merchant validates the payment and completes the transaction.

Back to Hashnode Sponsors

Honestly, I think this is a great feature that I look forward to using myself. By supporting our favourite bloggers, we can support and encourage their work hence making Hashnode a better platform for everyone!

As a content creator, you will not need to attach a separate link to your BuyMeACoffee or Patreon accounts. Hashnode takes care of all that for you. You can find more information about it here.

Do note that this feature is currently launched in beta preview.


And that was all for now! Make sure to follow me and subscribe for the latest posts! Until next time