@rnw-community/react-native-payments 0.54.3

package/src/class/payment-response/android-payment-response.ts

@@ -0,0 +1,43 @@
+import { isDefined } from '@rnw-community/shared';
+
+import { PaymentResponse } from './payment-response';
+
+import type { AndroidFullAddress } from '../../@standard/android/response/android-full-address';
+import type { AndroidMinAddress } from '../../@standard/android/response/android-min-address';
+import type { AndroidPaymentData } from '../../@standard/android/response/android-payment-data';
+import type { AndroidPaymentDataToken } from '../../@standard/android/response/android-payment-data-token';
+import type { PaymentResponseAddressInterface } from '../../interface/payment-response-address.interface';
+
+export class AndroidPaymentResponse extends PaymentResponse<AndroidPaymentDataToken> {
+    constructor(requestId: string, methodName: string, jsonData: string) {
+        const data = JSON.parse(jsonData) as AndroidPaymentData;
+
+        super(requestId, methodName, {
+            billingAddress: AndroidPaymentResponse.parseFullAddress(data.paymentMethodData.info.billingAddress),
+            details: JSON.parse(data.paymentMethodData.tokenizationData.token ?? '{}') as AndroidPaymentDataToken,
+            payerEmail: data.email,
+            ...(isDefined(data.shippingAddress) && {
+                payerName: (data.shippingAddress as AndroidMinAddress).name,
+                payerPhone: (data.shippingAddress as AndroidMinAddress).phoneNumber ?? '',
+            }),
+            ...(isDefined(data.paymentMethodData.info.billingAddress) && {
+                payerName: (data.paymentMethodData.info.billingAddress as AndroidMinAddress).name,
+                payerPhone: (data.paymentMethodData.info.billingAddress as AndroidMinAddress).phoneNumber ?? '',
+            }),
+            shippingAddress: AndroidPaymentResponse.parseFullAddress(data.shippingAddress),
+        });
+    }
+
+    private static parseFullAddress(input?: AndroidFullAddress): PaymentResponseAddressInterface {
+        return {
+            countryCode: input?.countryCode ?? '',
+            postalCode: input?.postalCode ?? '',
+            address1: input?.address1 ?? '',
+            address2: input?.address2 ?? '',
+            address3: input?.address3 ?? '',
+            administrativeArea: input?.administrativeArea ?? '',
+            locality: input?.locality ?? '',
+            sortingCode: input?.sortingCode ?? '',
+        };
+    }
+}

package/src/class/payment-response/ios-payment-response.ts

@@ -0,0 +1,49 @@
+import { isNotEmptyString } from '@rnw-community/shared';
+
+import { PaymentResponse } from './payment-response';
+
+import type { IosCNPhoneNumber } from '../../@standard/ios/response/ios-cn-phone-number';
+import type { IosCNPostalAddress } from '../../@standard/ios/response/ios-cn-postal-address';
+import type { IosNSPersonNameComponents } from '../../@standard/ios/response/ios-ns-person-name-components';
+import type { IosPKPayment } from '../../@standard/ios/response/ios-pk-payment';
+import type { IosPKToken } from '../../@standard/ios/response/ios-pk-token';
+import type { PaymentResponseAddressInterface } from '../../interface/payment-response-address.interface';
+
+export class IosPaymentResponse extends PaymentResponse<IosPKToken> {
+    constructor(requestId: string, methodName: string, jsonData: string) {
+        const data = JSON.parse(jsonData) as IosPKPayment;
+
+        super(requestId, methodName, {
+            billingAddress: IosPaymentResponse.parsePKContact(data.billingContact?.postalAddress),
+            details: data.token,
+            payerEmail: data.shippingContact?.emailAddress ?? '',
+            payerName: IosPaymentResponse.parseNSPersonNameComponents(data.shippingContact?.name),
+            payerPhone: IosPaymentResponse.parseCNPhoneNumber(data.shippingContact?.phoneNumber),
+            shippingAddress: IosPaymentResponse.parsePKContact(data.shippingContact?.postalAddress),
+        });
+    }
+
+    // TODO: Validate if this mapping is correct
+    private static parsePKContact(input?: IosCNPostalAddress): PaymentResponseAddressInterface {
+        return {
+            countryCode: input?.ISOCountryCode ?? '',
+            postalCode: input?.postalCode ?? '',
+            address1: input?.street ?? '',
+            address2: input?.city ?? '',
+            address3: input?.state ?? '',
+            administrativeArea: input?.subAdministrativeArea ?? '',
+            locality: input?.subLocality ?? '',
+            sortingCode: '',
+        };
+    }
+
+    // TODO: Validate if this is correct
+    private static parseNSPersonNameComponents(input?: IosNSPersonNameComponents): string {
+        return [input?.familyName, input?.middleName, input?.givenName].filter(isNotEmptyString).join('');
+    }
+
+    // TODO: Validate if this is correct
+    private static parseCNPhoneNumber(input?: IosCNPhoneNumber): string {
+        return input?.stringValue ?? '';
+    }
+}

package/src/class/payment-response/payment-response.ts

@@ -0,0 +1,47 @@
+import { NativePayments } from '../native-payments/native-payments';
+
+import type { PaymentValidationErrors } from '../../@standard/w3c/payment-validation-errors';
+import type { PaymentComplete } from '../../enum/payment-complete.enum';
+import type { PaymentResponseDetailsInterface } from '../../interface/payment-response-details.interface';
+
+/*
+ * https://www.w3.org/TR/payment-request/#paymentresponse-interface
+ * TODO: Many of fields and methods of this class does not correspond to the spec, should we change it?
+ */
+export class PaymentResponse<TokenDetails> {
+    private completeCalled = false;
+
+    // TODO: Should we extract type? Spec does not provide such data
+    constructor(
+        // https://www.w3.org/TR/payment-request/#dom-paymentresponse-requestid
+        readonly requestId: string,
+        // https://www.w3.org/TR/payment-request/#dom-paymentresponse-methodname
+        readonly methodName: string,
+        // https://www.w3.org/TR/payment-request/#dom-paymentresponse-details
+        readonly details: PaymentResponseDetailsInterface<TokenDetails>
+    ) {}
+
+    // https://www.w3.org/TR/payment-request/#complete-method
+    complete(result: PaymentComplete): Promise<void> {
+        if (this.completeCalled) {
+            throw new Error('InvalidStateError');
+        }
+
+        this.completeCalled = true;
+
+        // TODO: Implement logic https://www.w3.org/TR/payment-request/#complete-method
+
+        return NativePayments.complete(result);
+    }
+
+    // https://www.w3.org/TR/payment-request/#dom-paymentresponse-retry
+    retry(_errorFields?: PaymentValidationErrors): Promise<undefined> {
+        if (this.completeCalled) {
+            throw new Error('InvalidStateError');
+        }
+
+        // TODO: Implement logic https://www.w3.org/TR/payment-request/#retry-method
+
+        return Promise.resolve(undefined);
+    }
+}

package/src/enum/environment.enum.ts

@@ -0,0 +1,4 @@
+export enum EnvironmentEnum {
+    PRODUCTION = 'PRODUCTION',
+    TEST = 'TEST',
+}

package/src/enum/payment-complete.enum.ts

@@ -0,0 +1,6 @@
+// https://www.w3.org/TR/payment-request/#paymentcomplete-enum
+export enum PaymentComplete {
+    FAIL = 'fail',
+    SUCCESS = 'success',
+    UNKNOWN = 'unknown',
+}

package/src/enum/payment-method-name.enum.ts

@@ -0,0 +1,4 @@
+export enum PaymentMethodNameEnum {
+    AndroidPay = 'android-pay',
+    ApplePay = 'apple-pay',
+}

package/src/enum/payments-error.enum.ts

@@ -0,0 +1,7 @@
+export enum PaymentsErrorEnum {
+    AbortError = 'The operation was aborted.',
+    InvalidStateError = 'The object is in an invalid state.',
+    NotAllowedError = 'The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.',
+    NotSupportedError = 'The operation is not supported.',
+    SecurityError = 'The operation is insecure.',
+}

package/src/enum/supported-networks.enum.ts

@@ -0,0 +1,5 @@
+export enum SupportedNetworkEnum {
+    Amex = 'Amex',
+    Mastercard = 'Mastercard',
+    Visa = 'Visa',
+}

package/src/error/constructor.error.ts

@@ -0,0 +1,7 @@
+import { PaymentsError } from './payments.error';
+
+export class ConstructorError extends PaymentsError {
+    constructor(message: string) {
+        super(`Failed to construct 'PaymentRequest':  ${message}`);
+    }
+}

package/src/error/dom.exception.ts

@@ -0,0 +1,19 @@
+import { PaymentsErrorEnum } from '../enum/payments-error.enum';
+
+import { PaymentsError } from './payments.error';
+
+// TODO: Should we rename to DOMError?
+export class DOMException extends PaymentsError {
+    private static readonly messages: Record<PaymentsErrorEnum, string> = {
+        [PaymentsErrorEnum.AbortError]: 'The operation was aborted.',
+        [PaymentsErrorEnum.InvalidStateError]: 'The object is in an invalid state.',
+        [PaymentsErrorEnum.NotAllowedError]:
+            'The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.',
+        [PaymentsErrorEnum.NotSupportedError]: 'The operation is not supported.',
+        [PaymentsErrorEnum.SecurityError]: 'The operation is insecure.',
+    };
+
+    constructor(errorType: PaymentsErrorEnum) {
+        super(`[DOMException]: ${DOMException.messages[errorType]}`);
+    }
+}

package/src/error/payments.error.ts

@@ -0,0 +1,5 @@
+export class PaymentsError extends Error {
+    constructor(message: string) {
+        super(`[ReactNativePayments] ${message}`);
+    }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+export { PaymentMethodNameEnum } from './enum/payment-method-name.enum';
+export { EnvironmentEnum } from './enum/environment.enum';
+export { PaymentComplete } from './enum/payment-complete.enum';
+export { PaymentsErrorEnum } from './enum/payments-error.enum';
+export { SupportedNetworkEnum } from './enum/supported-networks.enum';
+
+export { IosPKMerchantCapability } from './@standard/ios/enum/ios-pk-merchant-capability.enum';
+
+export type { AndroidPaymentMethodDataInterface } from './@standard/android/mapping/android-payment-method-data.interface';
+export type { IosPaymentMethodDataInterface } from './@standard/ios/mapping/ios-payment-method-data.interface';
+export type { PaymentMethodData } from './@standard/w3c/payment-method-data';
+export type { PaymentDetailsInterface } from './interface/payment-details.interface';
+
+export { PaymentRequest } from './class/payment-request/payment-request';
+export { PaymentResponse } from './class/payment-response/payment-response';

package/src/interface/generic-payment-method-data-data.interface.ts

@@ -0,0 +1,10 @@
+import type { SupportedNetworkEnum } from '../enum/supported-networks.enum';
+
+/**
+ * Common PaymentMethod data field shared across platforms
+ */
+export interface GenericPaymentMethodDataDataInterface {
+    countryCode?: string;
+    currencyCode: string;
+    supportedNetworks: SupportedNetworkEnum[];
+}

package/src/interface/payment-details.interface.ts

@@ -0,0 +1,20 @@
+import type { PaymentDetailsInit } from '../@standard/w3c/payment-details-init';
+import type { PaymentItem } from '../@standard/w3c/payment-item';
+import type { EnvironmentEnum } from '../enum/environment.enum';
+
+/**
+ * ReactNativePayments mapping interface for PaymentDetailsInit, with additional fields.
+ * @see PaymentDetailsInit
+ */
+export interface PaymentDetailsInterface extends PaymentDetailsInit {
+    // Android environment https://developers.google.com/android/reference/com/google/android/gms/wallet/Wallet.WalletOptions.Builder#setEnvironment(int)
+    environment: EnvironmentEnum;
+    // If present PaymentResponse will have billingAddress
+    requestBilling?: boolean;
+    // If present PaymentResponse will have email
+    requestEmail?: boolean;
+    // If present PaymentResponse will have shippingAddress
+    requestShipping?: boolean;
+    // Android does not have displayItems, and only total field
+    total: PaymentItem;
+}

package/src/interface/payment-response-address.interface.ts

@@ -0,0 +1,11 @@
+// TODO: Validate IOS types
+export interface PaymentResponseAddressInterface {
+    address1: string;
+    address2: string;
+    address3: string;
+    administrativeArea: string;
+    countryCode: string;
+    locality: string;
+    postalCode: string;
+    sortingCode: string;
+}

package/src/interface/payment-response-details.interface.ts

@@ -0,0 +1,11 @@
+import type { PaymentResponseAddressInterface } from './payment-response-address.interface';
+
+export interface PaymentResponseDetailsInterface<TokenDetails> {
+    billingAddress?: PaymentResponseAddressInterface;
+    // TODO: Add IOS
+    details: TokenDetails;
+    payerEmail?: string;
+    payerName?: string;
+    payerPhone?: string;
+    shippingAddress?: PaymentResponseAddressInterface;
+}

package/src/type/amount-value.type.ts

@@ -0,0 +1 @@
+export type AmountValue = number | string;

package/src/util/is-number.util.ts

@@ -0,0 +1 @@
+export const isNumber = (value: unknown): value is number => typeof value === 'number';

package/src/util/is-valid-decimal-monetary-value.util.ts

@@ -0,0 +1,23 @@
+import isDecimal from 'validator/es/lib/isDecimal';
+
+import { isString } from '@rnw-community/shared';
+
+import { isNumber } from './is-number.util';
+
+import type { AmountValue } from '../type/amount-value.type';
+
+const isValidStringAmount = (stringAmount: string): boolean => {
+    if (stringAmount.endsWith('.')) {
+        return false;
+    }
+
+    return isDecimal(stringAmount);
+};
+
+export const isValidDecimalMonetaryValue = (amountValue: AmountValue): boolean => {
+    if (!isNumber(amountValue) && !isString(amountValue)) {
+        return false;
+    }
+
+    return isNumber(amountValue) || isValidStringAmount(amountValue);
+};

package/src/util/validate-display-items.util.ts

@@ -0,0 +1,23 @@
+import { type ClassType, isDefined } from '@rnw-community/shared';
+
+import { isValidDecimalMonetaryValue } from './is-valid-decimal-monetary-value.util';
+
+import type { PaymentItem } from '../@standard/w3c/payment-item';
+import type { PaymentsError } from '../error/payments.error';
+
+export const validateDisplayItems = (
+    displayItems: PaymentItem[] = [],
+    ErrorType: ClassType<PaymentsError> = Error
+): void => {
+    // Check that the value of each display item is a valid decimal monetary value
+    displayItems.forEach(item => {
+        // TODO: Can we improve this checks?
+        if (!isDefined(item) || !isDefined(item.amount) || !isDefined(item.amount.value)) {
+            throw new ErrorType(`required member value is undefined.`);
+        }
+
+        if (!isValidDecimalMonetaryValue(item.amount.value)) {
+            throw new ErrorType(`'${item.amount.value}' is not a valid amount format for display items`);
+        }
+    });
+};

package/src/util/validate-payment-methods.util.ts

@@ -0,0 +1,28 @@
+import { isDefined } from '@rnw-community/shared';
+
+import { ConstructorError } from '../error/constructor.error';
+
+import type { PaymentMethodData } from '../@standard/w3c/payment-method-data';
+
+export const validatePaymentMethods = (methodData: PaymentMethodData[]): void => {
+    // Check that at least one payment method is passed in
+    if (methodData.length < 1) {
+        throw new ConstructorError(`At least one payment method is required`);
+    }
+
+    // Check that each payment method has at least one payment method identifier
+    methodData.forEach(paymentMethod => {
+        if (!isDefined(paymentMethod.supportedMethods)) {
+            throw new ConstructorError(`required member supportedMethods is undefined.`);
+        }
+
+        if (!Array.isArray(paymentMethod.supportedMethods)) {
+            throw new ConstructorError(`required member supportedMethods is not iterable.`);
+        }
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (paymentMethod.supportedMethods.length < 1) {
+            throw new ConstructorError(`Each payment method needs to include at least one payment method identifier`);
+        }
+    });
+};

package/src/util/validate-total.util.ts

@@ -0,0 +1,36 @@
+import { type ClassType, isDefined } from '@rnw-community/shared';
+
+import { isNumber } from './is-number.util';
+import { isValidDecimalMonetaryValue } from './is-valid-decimal-monetary-value.util';
+
+import type { PaymentItem } from '../@standard/w3c/payment-item';
+import type { PaymentsError } from '../error/payments.error';
+import type { AmountValue } from '../type/amount-value.type';
+
+const isNegative = (amountValue: AmountValue): boolean =>
+    isNumber(amountValue) ? amountValue < 0 : amountValue.startsWith('-');
+
+export const validateTotal = (total: PaymentItem, ErrorType: ClassType<PaymentsError> = Error): void => {
+    // Should Validator take an errorType to pre populate "Failed to construct 'PaymentRequest'"
+
+    if (!isDefined(total)) {
+        throw new ErrorType(`required member total is undefined.`);
+    }
+
+    // Check that there is a total
+    if (!isDefined(total.amount) || !isDefined(total.amount.value) || Number(total.amount.value) === 0) {
+        throw new ErrorType(`Missing required member(s): amount, label.`);
+    }
+
+    const totalAmountValue = total.amount.value;
+
+    // Check that total is a valid decimal monetary value.
+    if (!isValidDecimalMonetaryValue(totalAmountValue)) {
+        throw new ErrorType(`'${totalAmountValue}' is not a valid amount format for total`);
+    }
+
+    // Check that total isn't negative
+    if (isNegative(totalAmountValue)) {
+        throw new ErrorType(`Total amount value should be non-negative`);
+    }
+};