@rnw-community/react-native-payments 0.54.4 → 0.54.6

package/readme.md

@@ -36,7 +36,8 @@ integration experience for your applications.
 
 - Streamlined. Say goodbye to complicated checkout forms.
 - Efficient. Accelerate checkouts for higher conversion rates.
-- Forward-looking. Utilize a [W3C Standards API](https://www.w3.org/) endorsed by major companies such as Google, Firefox, and more.
+- Forward-looking. Utilize a [W3C Standards API](https://www.w3.org/) endorsed by major companies such as Google, Firefox,
+  and more.
 - Versatile. Share payment code seamlessly across iOS, Android, and web applications.
 
 ## Installation
@@ -45,21 +46,43 @@ integration experience for your applications.
 
 ### ApplePay setup
 
+- ApplePay [overview](https://developer.apple.com/apple-pay/planning/).
 - Create [Apple developer account](https://developer.apple.com/programs/enroll/).
 - Follow [this guide](https://developer.apple.com/library/archive/ApplePay_Guide/Configuration.html) to setup ApplePay in
   your application.
+- [Payment token reference](https://developer.apple.com/documentation/passkit/apple_pay/payment_token_format_reference?language=objc)
+- Add following code to your `AppDelegate.h`:
+```objc
+#import <RCTAppDelegate.h>
+#import <UIKit/UIKit.h>
+#import <PassKit/PassKit.h> // Add this import
+
+@interface AppDelegate : RCTAppDelegate
+
+```
 
 ### AndroidPay setup
 
 - Create [Google developer account](https://support.google.com/googleplay/android-developer/answer/6112435?hl=en).
 - Follow [this guide](https://developers.google.com/pay/api/android/guides/setup) to setup Google Pay Api in your
   application.
+- [Google payments tutorial](https://developers.google.com/pay/api/android/guides/tutorial)
+- [Google brand guidelines](https://developers.google.com/pay/api/android/guides/brand-guidelines)
+
+- Use should use `19.0.0+` version of Google play services in your application:
+```groovy
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    implementation 'com.google.android.gms:play-services-wallet:19.2.0'
+```
 
 ## Usage
 
-> Detailed guide should be found
-> at [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
-> as API is fully compliant.
+Detailed guide should be found at:
+- [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API) as API is fully compliant.
+- [Google Web Payments guide](https://web.dev/payments/).
 
 The PaymentRequest class is designed to facilitate the integration of payment processing into your React Native application.
 It leverages TypeScript for robust typing and ensures seamless payment experiences across both iOS and Android platforms.
@@ -94,7 +117,8 @@ const paymentRequest = new PaymentRequest(methodData, paymentDetails);
 #### 2.1 PaymentDetailsInterface
 
 The `PaymentDetailsInterface` is a mapping interface used in React Native Payments to represent the payment details required
-for initiating a payment request. It extends the `PaymentDetailsInit` interface from the [W3C Payment Request API(version 08 September 2022)](https://www.w3.org/TR/payment-request/)
+for initiating a payment request. It extends the `PaymentDetailsInit` interface from
+the [W3C Payment Request API(version 08 September 2022)](https://www.w3.org/TR/payment-request/)
 specification and includes additional fields specific to React Native Payments.
 
 The `PaymentDetailsInterface` includes the following additional properties:
@@ -150,16 +174,22 @@ including the payment method used, the payer's information, and transaction-rela
 
 ```ts
 const paymentResponse = paymentRequest.show().then((paymentResponse) => {
-    // Will provide all plaform related information needed for transaction processing
-    paymentDetails.details
+    // This field will have all plaform related information needed for transaction processing
+    paymentDetails.details;
     // Aditionally if was requested, shipping, billing and payer info would be available
+    paymentDetails.billingAddress;
+    paymentDetails.payerEmail;
+    paymentDetails.payerName;
+    paymentDetails.payerPhone;
+    paymentDetails.shippingAddress;
 }).catch(...);
 ```
 
 ### 6. Closing the Payment Sheet
 
 Once the payment process is successfully completed, it's essential to close the payment sheet by calling the
-`PaymentResponse.complete()` method. This method takes a parameter from the `PaymentComplete` enum to indicate the outcome of the
+`PaymentResponse.complete()` method. This method takes a parameter from the `PaymentComplete` enum to indicate the outcome of
+the
 payment and hide the payment sheet accordingly.
 
 ```ts
@@ -169,51 +199,53 @@ paymentResponse.complete(PaymentComplete.Success) // OR PaymentComplete.Fail
 > This will have no affect in the Android platform due to AndroidPay implementation.
 
 ### 7. Aborting the Payment
-The `PaymentRequset.abort()` method in the Payment Request API allows developers to programmatically cancel an ongoing payment request or dismiss
-the payment sheet when it is in an interactive state. This method is used to handle scenarios where the user decides to cancel the
+
+The `PaymentRequset.abort()` method in the Payment Request API allows developers to programmatically cancel an ongoing
+payment request or dismiss
+the payment sheet when it is in an interactive state. This method is used to handle scenarios where the user decides to
+cancel the
 payment process or when specific conditions require the payment request to be aborted.
 
 > This will have no affect in the Android platform due to AndroidPay implementation.
 
-
 ## Example
 
 You can find working example in the `App` component of
 the [react-native-payments-example](../react-native-payments-example/README.md) package.
 
 ## TODO
+
+### Docs
+
 - [ ] Add gifs to the docs showing payment sheets appearing on IOS and Android.
+
+### Native
+
 - [ ] Investigate and implement unified shipping option selection between IOS and Android.(PR are welcome =)) W3C Payment
-  Request does not provide anything related to the Shipping options selection, only mentiones
+  Request does not provide anything related to the Shipping options selection, only mentions
   it [here](https://www.w3.org/TR/payment-request/#describing-what-is-being-paid-for) as a part of the `PaymentRequest`
   details.
+- [ ] Rewrite IOS to swift?
+- [ ] Rewrite Android to Kotlin?
+- [ ] Can we avoid modifying `AppDelegate.h` with importing `PassKit`?
+
+### W3C spec:
+
 - [ ] Implement events:
     - [ ] [PaymentRequestUpdateEvent](https://www.w3.org/TR/payment-request/#dom-paymentrequestupdateevent)
     - [ ] [PaymentMethodChangeEvent](https://www.w3.org/TR/payment-request/#dom-paymentmethodchangeevent)
+- [ ] Implement [PaymentDetailsModifier](https://www.w3.org/TR/payment-request/#dom-paymentdetailsmodifier)
+- [ ] Improve and unify errors according to the spec
+- [ ] Implement `PaymentResponse` `retry()` method
+- [ ] Implement `PaymentResponse` `toJSON()` method
+
+### Other
+
 - [ ] Add unit tests
 - [ ] Add web support
-- [ ] Improve and unify errors according to the spec
 - [ ] Merge react-native-payments-example into this package, and setup it properly
 - [ ] CI/CD:
     - [ ] check/setup pull request
     - [ ] check/setup push to master and release to NPM
     - [ ] add e2e via maestro for IOS
     - [ ] add e2e via maestro for Android
-- [ ] Rewrite IOS to swift?
-- [ ] Rewrite Android to Kotlin?
-- [x] Improve, update and finish the docs
-- [x] Implement canMakePayments
-- [x] Implement Android implementation
-- [x] Add lib.dom and comply with the spec - We do not need it
-- [x] Create TurboModule
-- [x] Transfer JS and convert to TS
-- [x] Implement iOS implementation
-- [x] Improve PaymentRequest usage, no index.js changes
-- [x] External dependencies:
-    - [x] Do we need validator lib? - Yes, for now
-    - [x] Do we need uuid lib? - Yes, for now
-- [x] Check `package.json` files and react-native config, can we use `dist/esm` for metro?
-
-
-
-

package/src/@standard/android/response/android-intermediate-signing-key.ts

@@ -0,0 +1,7 @@
+import type { AndroidSignedKey } from './android-signed-key';
+
+// https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#intermediate-signing-key
+export interface AndroidIntermediateSigningKey {
+    signatures: string;
+    signedKey: AndroidSignedKey;
+}

package/src/@standard/android/response/android-payment-method-token.ts

@@ -0,0 +1,9 @@
+import type { AndroidIntermediateSigningKey } from './android-intermediate-signing-key';
+import type { AndroidSignedMessage } from './android-signed-message';
+
+export interface AndroidPaymentMethodToken {
+    intermediateSigningKey: AndroidIntermediateSigningKey;
+    protocolVersion: string;
+    signature: string;
+    signedMessage: AndroidSignedMessage;
+}

package/src/@standard/android/response/android-payment-method-tokenization-data.ts

@@ -2,6 +2,7 @@ import type { AndroidPaymentMethodTokenizationType } from '../enum/android-payme
 
 // https://developers.google.com/pay/api/android/reference/response-objects#PaymentMethodTokenizationData
 export interface AndroidPaymentMethodTokenizationData {
+    // AndroidRawPaymentMethodToken is a stringified JSON object
     token?: string;
     type: AndroidPaymentMethodTokenizationType;
 }

package/src/@standard/android/response/android-raw-intermediate-signing-key.ts

@@ -0,0 +1,5 @@
+// https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#intermediate-signing-key
+export interface AndroidRawIntermediateSigningKey {
+    signatures: string;
+    signedKey: string;
+}

package/src/@standard/android/response/android-raw-payment-method-token.ts

@@ -0,0 +1,9 @@
+import type { AndroidRawIntermediateSigningKey } from './android-raw-intermediate-signing-key';
+
+// https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#payment-method-token-structure
+export interface AndroidRawPaymentMethodToken {
+    intermediateSigningKey: AndroidRawIntermediateSigningKey;
+    protocolVersion: string;
+    signature: string;
+    signedMessage: string;
+}

package/src/@standard/android/response/android-signed-key.ts

@@ -0,0 +1,5 @@
+// https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#signed-key
+export interface AndroidSignedKey {
+    keyExpiration: string;
+    keyValue: string;
+}

package/src/@standard/android/response/android-signed-message.ts

@@ -0,0 +1,7 @@
+// https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#signed-message
+export interface AndroidSignedMessage {
+    // https://developers.google.com/pay/api/android/guides/resources/payment-data-cryptography#encrypted-message
+    encryptedMessage: string;
+    ephemeralPublicKey: string;
+    tag: string;
+}

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

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */
-import { isAndroid } from '@rnw-community/platform/src';
 import uuid from 'react-native-uuid';
 
-import { isIOS } from '@rnw-community/platform';
+import { isAndroid, isIOS } from '@rnw-community/platform';
 import { emptyFn, getErrorMessage, isDefined, isNotEmptyArray, isNotEmptyString } from '@rnw-community/shared';
 
 import { AndroidPaymentMethodTokenizationType } from '../../@standard/android/enum/android-payment-method-tokenization-type.enum';

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

@@ -5,16 +5,19 @@ 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 { AndroidPaymentMethodToken } from '../../@standard/android/response/android-payment-method-token';
+import type { AndroidRawPaymentMethodToken } from '../../@standard/android/response/android-raw-payment-method-token';
+import type { AndroidSignedKey } from '../../@standard/android/response/android-signed-key';
+import type { AndroidSignedMessage } from '../../@standard/android/response/android-signed-message';
 import type { PaymentResponseAddressInterface } from '../../interface/payment-response-address.interface';
 
-export class AndroidPaymentResponse extends PaymentResponse<AndroidPaymentDataToken> {
+export class AndroidPaymentResponse extends PaymentResponse<AndroidPaymentMethodToken> {
     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,
+            details: AndroidPaymentResponse.parseToken(data.paymentMethodData.tokenizationData.token),
             payerEmail: data.email,
             ...(isDefined(data.shippingAddress) && {
                 payerName: (data.shippingAddress as AndroidMinAddress).name,
@@ -28,6 +31,39 @@ export class AndroidPaymentResponse extends PaymentResponse<AndroidPaymentDataTo
         });
     }
 
+    private static parseToken(input = '{}'): AndroidPaymentMethodToken {
+        if (input === 'examplePaymentMethodToken') {
+            return {
+                intermediateSigningKey: {
+                    signatures: '',
+                    signedKey: {
+                        keyExpiration: '',
+                        keyValue: '',
+                    },
+                },
+                protocolVersion: '',
+                signature: '',
+                signedMessage: {
+                    encryptedMessage: '',
+                    ephemeralPublicKey: '',
+                    tag: '',
+                },
+            };
+        }
+
+        const rawToken = JSON.parse(input) as AndroidRawPaymentMethodToken;
+
+        // TODO: If needed we can add parsing of rawToken.intermediateSigningKey
+        return {
+            ...rawToken,
+            intermediateSigningKey: {
+                ...rawToken.intermediateSigningKey,
+                signedKey: JSON.parse(rawToken.intermediateSigningKey.signedKey) as AndroidSignedKey,
+            },
+            signedMessage: JSON.parse(rawToken.signedMessage) as AndroidSignedMessage,
+        };
+    }
+
     private static parseFullAddress(input?: AndroidFullAddress): PaymentResponseAddressInterface {
         return {
             countryCode: input?.countryCode ?? '',

package/dist/cjs/@standard/android/response/android-payment-data-token.d.ts

@@ -1,8 +0,0 @@
-export interface AndroidPaymentDataToken {
-    encryptedMessage: string;
-    ephemeralPublicKey: string;
-    protocolVersion: string;
-    signedMessage: string;
-    tag: string;
-}
-//# sourceMappingURL=android-payment-data-token.d.ts.map

package/dist/cjs/@standard/android/response/android-payment-data-token.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"android-payment-data-token.d.ts","sourceRoot":"","sources":["../../../../../src/@standard/android/response/android-payment-data-token.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;CACf"}

package/dist/cjs/@standard/android/response/android-payment-data-token.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"android-payment-data-token.js","sourceRoot":"","sources":["../../../../../src/@standard/android/response/android-payment-data-token.ts"],"names":[],"mappings":""}

package/dist/esm/@standard/android/response/android-payment-data-token.d.ts

@@ -1,8 +0,0 @@
-export interface AndroidPaymentDataToken {
-    encryptedMessage: string;
-    ephemeralPublicKey: string;
-    protocolVersion: string;
-    signedMessage: string;
-    tag: string;
-}
-//# sourceMappingURL=android-payment-data-token.d.ts.map

package/dist/esm/@standard/android/response/android-payment-data-token.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"android-payment-data-token.d.ts","sourceRoot":"","sources":["../../../../../src/@standard/android/response/android-payment-data-token.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACpC,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;CACf"}

package/dist/esm/@standard/android/response/android-payment-data-token.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=android-payment-data-token.js.map

package/dist/esm/@standard/android/response/android-payment-data-token.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"android-payment-data-token.js","sourceRoot":"","sources":["../../../../../src/@standard/android/response/android-payment-data-token.ts"],"names":[],"mappings":""}

package/src/@standard/android/response/android-payment-data-token.ts

@@ -1,7 +0,0 @@
-export interface AndroidPaymentDataToken {
-    encryptedMessage: string;
-    ephemeralPublicKey: string;
-    protocolVersion: string;
-    signedMessage: string;
-    tag: string;
-}