Mobile and Offline Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
PaymentsService Example
Here’s a basic example of a Lightning web component minimal HTML template that
includes a button that initiates collecting payment.
1<template>
2 <lightning-card title="Payment Processing">
3 <div class="slds-m-around_medium">
4 <lightning-button
5 label="Validate Supported Methods"
6 onclick={handleValidateMethods}
7 variant="neutral"
8 class="slds-m-right_x-small">
9 </lightning-button>
10 <lightning-button
11 label="Collect Payment"
12 onclick={handleCollectPayment}
13 variant="brand">
14 </lightning-button>
15 </div>
16<div class="slds-var-m-around_medium">
17 <div if:true={spinnerEnabled} class="spinnerHolder">
18 <lightning-spinner alternative-text="Processing" size="large"></lightning-spinner>
19 </div>
20 <lightning-formatted-rich-text value={paymentsServiceResponse}></lightning-formatted-rich-text>
21 </div>
22 </lightning-card>
23</template>This example uses PaymentsService to let the user collect a payment.
1import { LightningElement, track } from 'lwc';
2import { ShowToastEvent } from 'lightning/platformShowToastEvent';
3import { getPaymentsService } from 'lightning/mobileCapabilities';
4
5
6export default class PaymentsService extends LightningElement {
7 myPaymentsService;
8 paymentServiceUnavailable = false;
9 tapToPayUnAvailable = true;
10
11 paymentsServiceResponse = '';
12 spinnerEnabled = false;
13 amountValue = '150.00';
14 currencyCodeValue = 'USD';
15 paymentMethodValue = 'TAP_TO_PAY';
16 merchantNameValue = 'Play Board';
17 merchantAccountIdValue = '8zbXXXXXXXXXXXXX';
18 payerAccountIdValue = '001XXXXXXXXXXXXX';
19 sourceObjectIdValue = 'XXXXXXXXXXXXXXXX';
20
21
22 showSpinner() { this.spinnerEnabled = true; }
23 hideSpinner() { this.spinnerEnabled = false; }
24
25
26 // When the component is initialized, determine whether to enable the buttons
27 connectedCallback() {
28 this.myPaymentsService = getPaymentsService();
29 if (!this.myPaymentsService?.isAvailable()) {
30 this.paymentServiceUnavailable = true;
31 this.paymentsServiceResponse = 'Payments Service is unavailable.';
32 }
33 }
34
35
36 processResult(result) {
37 var confirmationId = JSON.stringify(result.guid, undefined, 2);
38 var confirmationStatus = JSON.stringify(result.status, undefined, 2);
39 this.paymentsServiceResponse = "Confirmation Status: " + confirmationStatus + ", Confirmation ID: " + confirmationId;
40 }
41
42
43 processError(error) {
44 // The user canceled the operation
45 if (error.code === 'USER_DISMISSED') {
46 this.dispatchEvent(
47 new ShowToastEvent({
48 title: 'Operation Canceled',
49 message: 'Operation canceled by the user.',
50 mode: 'sticky'
51 })
52 );
53 }
54 else {
55 // There was some other kind of error so inform the user we ran into something unexpected
56
57
58 this.dispatchEvent(
59 new ShowToastEvent({
60 title: 'Payments Service Error',
61 message: 'Message: ${error.message}\nCode: ${error.code}',
62 variant: 'error',
63 mode: 'sticky'
64 })
65 );
66 }
67 }
68
69
70 handleBeginSupportedMethodsClick() {
71 let options = {
72 'countryIsoCode': this.currencyCodeValue,
73 'merchantAccountId': this.merchantAccountIdValue
74 }
75
76
77 this.paymentsServiceResponse = '';
78 this.showSpinner();
79
80
81 this.myPaymentsService.getSupportedPaymentMethods(options)
82 .then((result) => {
83 if (result.contains("TAP_TO_PAY")) {
84 this.tapToPayUnAvailable = false;
85}
86
87 })
88 .catch((error) => {
89 this.tapToPayUnAvailable = true;
90 })
91 .finally(() => this.hideSpinner());
92 }
93
94
95 handleBeginCollectPaymentClick() {
96
97 let options = {
98 'amount': Number(this.amountValue),
99 'currencyIsoCode': this.currencyCodeValue,
100 'paymentMethod': this.paymentMethodValue,
101 'merchantName': this.merchantNameValue,
102 'merchantAccountId': this.merchantAccountIdValue,
103 'payerAccountId': this.payerAccountIdValue,
104 'sourceObjectIds': [this.sourceObjectIdValue]
105 }
106
107
108 this.paymentsServiceResponse = '';
109 this.showSpinner();
110
111 this.myPaymentsService.collectPayment(options)
112 .then((result) => this.processResult(result))
113 .catch((error) => this.processError(error))
114 .finally(() => this.hideSpinner());
115 }
116}