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      >
10      </lightning-button>
11      <lightning-button label="Collect Payment" onclick="{handleCollectPayment}" variant="brand">
12      </lightning-button>
13    </div>
14    <div class="slds-var-m-around_medium">
15      <div if:true="{spinnerEnabled}" class="spinnerHolder">
16        <lightning-spinner alternative-text="Processing" size="large"></lightning-spinner>
17      </div>
18      <lightning-formatted-rich-text
19        value="{paymentsServiceResponse}"
20      ></lightning-formatted-rich-text>
21    </div>
22  </lightning-card>
23</template>

1import { LightningElement, track } from 'lwc'; import { ShowToastEvent } from
2'lightning/platformShowToastEvent'; import { getPaymentsService } from
3'lightning/mobileCapabilities'; export default class PaymentsService extends LightningElement {
4myPaymentsService; paymentServiceUnavailable = false; tapToPayUnAvailable = true;
5paymentsServiceResponse = ''; spinnerEnabled = false; amountValue = '150.00'; currencyCodeValue =
6'USD'; paymentMethodValue = 'TAP_TO_PAY'; merchantNameValue = 'Play Board'; merchantAccountIdValue =
7'8zbXXXXXXXXXXXXX'; payerAccountIdValue = '001XXXXXXXXXXXXX'; sourceObjectIdValue =
8'XXXXXXXXXXXXXXXX'; showSpinner() { this.spinnerEnabled = true; } hideSpinner() {
9this.spinnerEnabled = false; } // When the component is initialized, determine whether to enable the
10buttons connectedCallback() { this.myPaymentsService = getPaymentsService(); if
11(!this.myPaymentsService?.isAvailable()) { this.paymentServiceUnavailable = true;
12this.paymentsServiceResponse = 'Payments Service is unavailable.'; } } processResult(result) { var
13confirmationId = JSON.stringify(result.guid, undefined, 2); var confirmationStatus =
14JSON.stringify(result.status, undefined, 2); this.paymentsServiceResponse = "Confirmation Status: "
15+ confirmationStatus + ", Confirmation ID: " + confirmationId; } processError(error) { // The user
16canceled the operation if (error.code === 'USER_DISMISSED') { this.dispatchEvent( new
17ShowToastEvent({ title: 'Operation Canceled', message: 'Operation canceled by the user.', mode:
18'sticky' }) ); } else { // There was some other kind of error so inform the user we ran into
19something unexpected this.dispatchEvent( new ShowToastEvent({ title: 'Payments Service Error',
20message: 'Message: ${error.message}\nCode: ${error.code}', variant: 'error', mode: 'sticky' }) ); }
21} handleBeginSupportedMethodsClick() { let options = { 'countryIsoCode': this.currencyCodeValue,
22'merchantAccountId': this.merchantAccountIdValue } this.paymentsServiceResponse = '';
23this.showSpinner(); this.myPaymentsService.getSupportedPaymentMethods(options) .then((result) => {
24if (result.contains("TAP_TO_PAY")) { this.tapToPayUnAvailable = false; } }) .catch((error) => {
25this.tapToPayUnAvailable = true; }) .finally(() => this.hideSpinner()); }
26handleBeginCollectPaymentClick() { let options = { 'amount': Number(this.amountValue),
27'currencyIsoCode': this.currencyCodeValue, 'paymentMethod': this.paymentMethodValue, 'merchantName':
28this.merchantNameValue, 'merchantAccountId': this.merchantAccountIdValue, 'payerAccountId':
29this.payerAccountIdValue, 'sourceObjectIds': [this.sourceObjectIdValue] }
30this.paymentsServiceResponse = ''; this.showSpinner();
31this.myPaymentsService.collectPayment(options) .then((result) => this.processResult(result))
32.catch((error) => this.processError(error)) .finally(() => this.hideSpinner()); } }