Use the PaymentsService API

To develop an LWC with the Payments Service plug-in features, use the Payments Plugin API as your method for accessing a device’s native Tap to Pay functionality.

Import PaymentsService to make the PaymentsService API functions available to your code.
Test to make sure PaymentsService is available before you call payment functions.
Use the payment functions to start collecting payments.

Add PaymentsService to a Lightning Web Component

In your component’s JavaScript file, import PaymentsService using the standard JavaScript import statement. Specifically, import the getPaymenntsService() factory function from the lightning/mobileCapabilities module, like so:

1import { getPaymentsService } from "lightning/mobileCapabilities";

After it’s imported into your component, use the factory function to get an instance of PaymentsService. With your PaymentsService instance, use the utility functions and constants to verify availability. Then use the feature functions to perform the associated functionality.

Test PaymentsService Availability

PaymentsService depends on physical device hardware and platform features. A component that uses PaymentsService renders without errors on a desktop computer or in a mobile browser, but PaymentsService functions fail. To avoid these errors, test if PaymentsService functionality is available before you use it.

1handleCheckCollectPaymentServiceClick(event) {
2    const myPaymentsService = getPaymentsService();
3    if(myPaymentsService.isAvailable()) {
4	 // Perform next operations
5  } else {
6	// Payments Service isn’t available, or consuming app hasn’t implemented it
7	// Not running on hardware with TTP functionality, etc.
8	// Handle with message, error, beep, and so on
9  }
10}

Start PaymentsService to Collect Payments

The PaymentsService exposes two API endpoints. The first one is getSupportedPaymentMethods that returns a list of available payment methods for the current device running. The second API method is called collectPayment.

Start by checking which payment methods are available, and then call the collect payment method to collect the payment using one of the available methods.

1handleGetSupportedMethodsClicked(event) {
2	if (this.myPaymentsService != null && this.myPaymentsService.isAvailable()) {
3	let supportedMethodsOptions = {
4		countryIsoCode: "USD",
5		merchantAccountId: "8zbxxxxxxxxxxx"
6	}
7this.myPaymentsService.getSupportedPaymentMethods(supportedMethodsOptions).then((supportedMethodsResult) => {
8if (supportedMethods.contains("TAP_TO_PAY")) {
9		let collectPaymentOptions = {
10		amount: "350.50",
11		paymentMethod: "TAP_TO_PAY"
12		currencyIsoCode: "USD",
13		merchantAccountId: "8zbxxxxxxxxxxx",
14		merchantName: "My Service",
15		payerAccountId: "001xxxxxxxxxx",
16		sourceObjectIds: ["xxxxxxxxxxx", "xxxxxxxxxxx"]
17	}
18this.myPaymentsService.collectPayment(collectPaymentOptions).then((collectPaymentResult) => {
19let paymentStatus = collectPaymentResult.status;
20	// handle status. "success" status will reflect a successful payment collect
21}).catch((collectPaymentError) => {
22if (collectPaymentError.code !== 'USER_DISMISSED') {
23// handle error case
24}
25})
26
27
28}
29}).catch((error) => {
30	console.log(error);
31});
32}
33}

Considerations:

Calling getSupportedPaymentMethods or collectPayment requires passing in an options object.
The options object has some required fields and missing those fields results in the Payments plugin not working properly. See the PaymentsService API for the required fields.

See Also