payments icon indicating copy to clipboard operation
payments copied to clipboard

[Google Pay] createPaymentRequest results in PaymentError

Open msn444 opened this issue 2 years ago • 1 comments

I'm basically following the Google Pay example in a Vue app. Calling createPaymentRequest on the GooglePayButton object immediately results in the PaymentError handler being called, with statusCode 10 and statusMessage "10: ". I don't see any other error information being returned. The Google Pay sheet does not appear. Using "@nativescript/core": "^8.5.6", "@nativescript/google-pay": "^0.1.2"

async onGooglePayTap(args) {
      try {
        if (global.isAndroid) {
          const googlePayBtn = args.object;

          // setup the event listeners
          googlePayBtn.once(GooglePayEvents.PaymentCancelled, (args) => {
            console.log("payment cancelled, not much to do here");
          });

          googlePayBtn.once(GooglePayEvents.PaymentSuccess, async (args) => {
            console.log("PaymentSuccess");
            // this is where you handle the response with the token from google pay to send to payment provider
            const payloadToBackend = {
              amount: 25.2,
              method: "3DS",
              "3DS": {
                signature:
                  args.data.paymentMethodData.tokenizationData.token.signature,
                type: "G", // for Google
                version:
                  args.data.paymentMethodData.tokenizationData.token
                    .protocolVersion,
                data: args.data.paymentMethodData.tokenizationData.token
                  .signedMessage,
              },
            };

            // send your payload to your payment provider here
            // const result = await this.someHttpMethodToYourProviderBackend(payloadToBackend);

            if (result) {
              // now show the user the confirmation screen
            } else {
              // show the user that something went wrong here
            }
          });

          googlePayBtn.once(GooglePayEvents.PaymentError, (args) => {
            console.log("PaymentError");
            console.dir(args, { depth: null });
            // TODO: let user know some error happened
          });

          const options = {
            environment: "development",
            theme: "light",
            merchantInfo: {
              merchantName: "Test Merchant",
            },
            allowedPaymentMethods: {
              type: AllowedPaymentMethodsType.CARD,
              parameters: {
                allowPrepaidCards: true,
                allowCreditCards: true,
                billingAddressRequired: true,
                billingAddressParameters: {
                  format: BillingAddressParametersFormat.MIN,
                  phoneNumberRequired: true,
                },
              },
              tokenizationSpecification: {
                type: TokenizationSpecificationType.PAYMENT_GATEWAY,
                parameters: {
                  gateway: "stripe",
                  "stripe:version": "2018-10-31",
                  "stripe:publishableKey":
                    "redacted",
                },
              },
            },
            transactionInfo: {
              currencyCode: "USD",
              countryCode: "US",
              transactionId: "283999292929929", // A unique ID that identifies a transaction attempt. Merchants can use an existing ID or generate a specific one for Google Pay transaction attempts. This field is required when you send callbacks to the Google Transaction Events API.
              totalPriceStatus: TotalPriceStatusValue.FINAL,
              totalPrice: 25.2,
              totalPriceLabel: "Total",
              checkoutOption: CheckoutOptionValue.DEFAULT,
            },
            emailRequired: true,
            shippingAddressRequired: true,
            shippingAddressParameters: {
              allowedCountryCodes: ["US"],
              phoneNumberRequired: true,
            },
          };

          // this creates the payment request to the Google Pay SDK and will present the user with the payment sheet to complete the transaction

          googlePayBtn.createPaymentRequest(options).catch((err) => {
            console.log("error with create payment request", err);
          });
          console.log("created payment request");
        }
      } catch (error) {
        console.log("Error with google pay", error);
      }
    },

msn444 avatar Aug 23 '23 18:08 msn444

logcat revealed the cause of the issue: WalletMerchantError: Error in loadPaymentData: totalPrice must be a String!

Might be a good idea to change the example code to show that the totalPrice needs to be a string.

msn444 avatar Aug 23 '23 21:08 msn444