PaymentsService Example

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>

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}