Standard Web Payment APIs

Payment Request API is a new, streamlined way to collect payment and shipping details from the user. Its primary goal is to eliminate checkout forms by standardizing the payment communication flow as much as possible. Some benefits of using Payment Request API over traditional checkout forms are:

Many third-party vendors have provided online payment solutions to tackle some of those issues, but the usage of third-party solutions comes with a user limitation: whether or not they have accounts with those third parties, and whether their platform and devices support it. Some developers went with the extreme of adding all possible "checkout" buttons to their forms, which is not helpful from a user experience point of view.

With a standardized API, you no longer need to rely on a specific vendor, and you can eliminate the unneeded checkout buttons. However, it’s important to notice that the standard payment request API is not a payment gateway and does not process the credit card data. It’s merely moving the issue to the server, in which you can easily choose your preferred vendor to process the card data without any hassle to your users.

If you are using Vaadin Flow, here is an add-on available that you can use right away.

Start by adding the maven dependency:

<dependency>
  <groupId>com.vaadin.tutorial.webcomponent</groupId>
  <artifactId>payment-request</artifactId>
  <version>1.0.0</version>
</dependency>

And here is a sample code to use it:

``java
// Define payment methods:
PaymentMethod paymentMethod = new PaymentMethod();
paymentMethod.addSupported("basic-card");
paymentMethod.getElement().setAttribute("slot", "method");

// Show items to pay for:
PaymentItem paymentItem = new PaymentItem();
paymentItem.setLabel("Item 1");
paymentItem.setCurrency("EUR");
paymentItem.setValue(1337D);

// Add a slot for payment total:
PaymentItem paymentTotal = new PaymentItem();
paymentTotal.getElement().setAttribute("slot", "total");

// Define the buy button:
Button buyButton = new Button("Buy");
buyButton.getElement().setAttribute("id", "buyButton");

// Define the Payment Request:
PaymentRequest paymentRequest = new PaymentRequest();
paymentRequest.setLabel("Total");
paymentRequest.setCurrency("EUR");

// Add payment methods and items to the request:
paymentRequest.getElement()
  .appendChild(paymentMethod.getElement())
  .appendChild(paymentItem.getElement())
  .appendChild(paymentTotal.getElement())
  .appendChild(buyButton.getElement());

// Add the component to the UI:
add(paymentRequest);
```

There is also another similar add-on that uses the same approach but written differently.

You can also write your style of handling the payment request on the browser in a form or a standard web component.

The add-on mentioned above is based on a community-driven web component.

You can implement Payment Request APIs from scratch on the client-side using Javascript. Here is a sample of the minimal code needed to get started. Constructing the payload for the supported payment methods and payment details to display to the user:

const supportedPaymentMethods = [
  {
    supportedMethods: 'basic-card',
  }
];

const paymentDetails = {
  total: {
    label: 'Total',
    amount:{
      currency: 'USD',
      value: 0
    }
  }
};

Followed by using the PaymentRequest constructor, and call the object’s show() method:

``javascript
const request = new PaymentRequest(
  supportedPaymentMethods,
  paymentDetails
);

request.show()
.then(..).catch(..);
```

The constructor has two mandatory arguments: supported methods of payment and payment details. The show method returns a promise which is fulfilled with the payment data once the user has authorized the payment. You can read more about the API variants and the other parameters that you can use, and also this documentation on how to integrate a client-side web component into Vaadin Flow.

Source code on GitHub.