#PERF - Google Pay RN
teal trail
hello
sturdy pendant
Okay I can confirm that simply by specifying the Google Pay options in the initPaymentSheet function will make Google Pay available
teal trail
yea I can see it as an option when presenting the sheet. However when attempting to confirm via
const res = await apple.confirmApplePayPayment(
paymentIntentClientSecret,
);
the following modal appears
sturdy pendant
You were talking about Google pay, and the you are calling apple.confrimApplePayPayment?
teal trail
sorry wrong code snippet !
const res = await google.presentGooglePay({
clientSecret: paymentIntentClientSecret,
forSetupIntent: false,
});
sturdy pendant
Okay so are you looking to display Google pay separate from the PaymenetSheet?
The point of the Payment Sheet is that it presents all valid options
teal trail
yes, i know that is the point. I can select google pay from the sheet after presenting it. After selecting google pay and attempting to pay via google pay with
const res = await google.presentGooglePay({
clientSecret: paymentIntentClientSecret,
forSetupIntent: false,
});
i see the above modal error
this is following the guide here https://stripe.com/docs/google-pay?platform=react-native#react-native-present
sleek bramble
👋
Stepping in as Snufkin has to step away
If you are using Google Pay in Payment Sheet you shouldn't be calling google.presentGooglePay
teal trail
is that guide out of date? with the newer version of the react-native sdk?
according to the typescript definition the goooglePay field is the following
export declare type GooglePayParams = {
/** The two-letter ISO 3166 code of the country of your business, e.g. "US" */
merchantCountryCode: string;
/** The three-letter ISO 4217 alphabetic currency code, e.g. "USD" or "EUR". Required in order to support Google Pay when processing a Setup Intent. */
currencyCode?: string;
/** Whether or not to use the Google Pay test environment. Set to `true` until you have applied for and been granted access to the Production environment. */
testEnv?: boolean;
};
in the initPaymentSheet call
not just a boolean
i am using ```json
"@stripe/stripe-react-native": "^0.15.0",
Ah good catch
I'll get those docs updated
Changed the googlePay field. Previously this field accepted a boolean, now it accepts an object of type GooglePayParams, which includes the merchantCountryCode, currencyCode, and testEnv fields.
teal trail
which i am doing
googlePay: {
merchantCountryCode: MERCHANT_COUNTRY_CODE,
testEnv: config.ENV !== 'production',
currencyCode: MERCHANT_CURRENCY_CODE,
},
export const MERCHANT_COUNTRY_CODE = 'US';
export const MERCHANT_CURRENCY_CODE = 'usd';
so one thing I did not include is
dependencies {
implementation 'com.stripe:stripe-android:20.8.0'
}
in my build.gradle but would that make all stripe requests fail not just google pay
sleek bramble
Why would it make all fail?
Also I still would assume the error you saw is related to calling presentGooglePay
teal trail
it does happen when calling presentGooglePay
sleek bramble
Right... no reason to call that method if you are using PaymentSheet
teal trail
how do you finalize a google pay payment then? just calling confirmPaymentSheetPayment?
sleek bramble
If you are using the custom flow then yes
teal trail
the same modal is appearing when calling const res = await confirmPaymentSheetPayment();
sleek bramble
Can you provide your full PaymentSheet code snippet?
teal trail
one moment, normal credit cards work using the same method btw
sleek bramble
And you are testing on a physical device vs. emulator?
teal trail
physical
const res = await initPaymentSheet({
merchantDisplayName: MERCHANT_DISPLAY_NAME,
customFlow: true,
googlePay: {
merchantCountryCode: MERCHANT_COUNTRY_CODE,
testEnv: config.ENV !== 'production',
currencyCode: MERCHANT_CURRENCY_CODE,
},
returnURL: MERCHANT_RETURN_URL,
customerId: stripeCustomerId,
paymentIntentClientSecret: paymentIntentClientSecret,
customerEphemeralKeySecret: ephemeralKey,
});
the presentPaymentSheet and confirmPaymentSheetPayment are called with no params
sleek bramble
Okay and can you share your AndroidManifest?
Also have you logged out the resolved promise of confirmPaymentSheetPayment()?
teal trail
the promise does not return until the modal is dismissed with the following
{"error": {"code": "Canceled", "declineCode": null, "localizedMessage": "The payment flow has been canceled", "message": "The payment flow has been canceled", "stripeErrorCode": null, "type": null}}
sleek bramble
Huh interesting. Can you share the PaymentIntent related to that test?
teal trail
pi_3LW1nTFdV4bT3T5F1ctK7KTo there doesn't appear to be any errors reported on the payment intent either
i have ```
<meta-data
android:name="com.google.android.gms.wallet.api.enabled"
android:value="true" />
in the manifest as wellAnd what version of the Android SDK is used by 0.15.0? Am I remembering it is 20.5.0?
(What does it show in your gradle?)
teal trail
sorry i am #dumb when it comes to native android and iOS code. Not really sure what you are asking
sleek bramble
If you open up your android directory there should be a build.gradle file
Can you share the contents of that file?
teal trail
sleek bramble
Hmm that looks fine mostly. Let's try bumping to 20.8.0 to make sure... add
implementation 'com.stripe:stripe-android:20.8.0'
}```
to that file and let's see if that changes anything?dependencies {
classpath('com.android.tools.build:gradle:4.2.2')
classpath 'com.google.gms:google-services:4.3.10'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
// NOTE: Do not place application dependencies here; they belong
// in the individual module build.gradle files
implementation 'com.stripe:stripe-android:20.8.0'
}
Like that?
sleek bramble
Yep
Ah wait, sorry. I think I'm mixing up the gradle files
I'm also not intimately familiar with Android
There are two gradle files, one top level and an app/build.gradle file
I think we want the latter one here
Yeah sorry, we call this out here (https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet#setup-client-side)
So it should be the app/build.gradle file instead
teal trail
oh ok
one sec building
the init build failed. due to compileSdkVersion not being high enough.
it is at 31 one package required 32
sleek bramble
Ah okay, can you try bumping that?
teal trail
did that building again
sleek bramble
👍
teal trail
however, wouldn't this make all stripe related things fail if it wasn't set up right? vs just the google pay?
sleek bramble
No it shouldn't
Bumping forward to a newer Stripe Android SDK shouldn't break anything here
Since the React Native SDK relies on the Android SDK under the hood
And there shouldn't be any breaking changes between the version that you were using and what you are bumping to
teal trail
alrighty, build is still building
sleek bramble
Mmmk
Not sure this will solve things, but I'm a bit stumped at what might be causing this.
So let's try this and then go from here.
Also can you clarify exactly when the error occurs?
The modal opens fine, right?
And then you attempt to pay and that is when it errors?
teal trail
so after calling confirmPaymentSheetPayment before the promise actually returns that modal appears
then dismissing the modal shows that "cancel" error
sleek bramble
Wait wait wait
Oh shoot
Two things
First, you said you were calling presentPaymentSheet without any arguments?
If you are using the custom flow you need to call: await presentPaymentSheet({ confirmPayment: false, });
teal trail
that hasn't been an issue for anything else...
export declare function usePaymentSheet(): {
loading: boolean;
initPaymentSheet: (params: PaymentSheet.SetupParams) => Promise<import("../types").InitPaymentSheetResult>;
presentPaymentSheet: () => Promise<import("../types").PresentPaymentSheetResult>;
confirmPaymentSheetPayment: () => Promise<import("../types").ConfirmPaymentSheetPaymentResult>;
};
plus that couldn't be documented then
presentPaymentSheet: () => Promise<import("../types").PresentPaymentSheetResult>;
Why are you using the custom flow?
Like the whole reason for the custom flow is to complete the payment at a later time
Not when the payment sheet dismisses
The reason this is likely working with card payments right now is because you are never making it to your confirmPaymentSheetPayment
Since you aren't using await presentPaymentSheet({ confirmPayment: false, });
sleek bramble
So with cards your PaymentSheet dismisses after you enter card details and click your button without error
And the PaymentIntent isn't confirmed.
What are you using to trigger confirmPaymentSheetPayment()?
teal trail
the payment intent is confiremed after calling confirmPaymentSheetPayment
a button
within our own UI
sleek bramble
Okay
Do me a favor and test again with Google Pay using await presentPaymentSheet({ confirmPayment: false, });
I'm surprised that not using that isn't causing weird behavior with cards.
teal trail
also updating the implementation 'com.stripe:stripe-android:20.8.0' included compiles then app crashes on startup
so i am reverting that
sleek bramble
Yeah okay that's fine.
teal trail
I believe not doing that doesn't cause an issue because isn't that the point of the payment intents themselves?
sleek bramble
Yes and no.
PaymentSheet is built to handle the client confirmation without you having to call it
When you don't use the custom flow then all you need is presentPaymentSheet()
I don't know the full details of why we needed to build both customFlow: true and confirmPayment: false,
teal trail
is that a hole in the typescript def as well?
teal trail
according to the typescript doc the method takes no parameters
yea adding that param does nothing different
sleek bramble
Ugh why are our docs so outdated here. This actually was removed: https://github.com/stripe/stripe-react-native/pull/514
teal trail
for reference
teal trail
nope, to my knowledge that is coming from stripe's SDK.
esp. since it is presented while awating the return from the confirm call
sleek bramble
Oh I misunderstood. You are providing a custom "Pay with GPay" button after the Google pay modal has already been completed and the PaymentMethod was saved.
teal trail
it isn't really "Saved" since the payment intent isn't technically updated until i confirm it but ya.
sleek bramble
Right right
Okay let me think for a moment.
Alright... any chance you could spin up the sample app: https://github.com/stripe/stripe-react-native/tree/master/example ? It has the custom flow and Google Pay set up. I don't have an Android device so I can't try and repro.
Curious if you would hit the same error on that or not.
teal trail
sure one moment. I will need to leave the office soon but if I was to re-pickup this conversation later. Aka Monday how would I do that?
sleek bramble
Just ping in the main channel and we will be around
We staff this 24/5
Someone would be happy to look with you.
teal trail
mmk i am building the example app now
sleek bramble
Random... can you go to your Dashboard real quick here: https://dashboard.stripe.com/test/settings/radar/rules
You don't happen to have the Request 3DS if 3D Secure is supported for card rule enabled, do you?
teal trail
talking about this ?
sleek bramble
Yep, thanks. That looks fine.
teal trail
build taking a while sorry 💤
sleek bramble
Yeah no worries.
teal trail
build failed to build
sleek bramble
oh boy
teal trail
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':reactnativestripesdk:compileDebugKotlin'.
> Compilation error. See log for more details
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 8m 29s
error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
Note: /Users/jasperforest/Documents/Github/stripe-react-native/example/node_modules/react-native-gradle-plugin/src/main/java/com/facebook/react/codegen/generator/SchemaJsonParser.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
e: /Users/jasperforest/Documents/Github/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt: (78, 35): Unresolved reference: id
e: /Users/jasperforest/Documents/Github/stripe-react-native/android/src/main/java/com/reactnativestripesdk/PaymentSheetFragment.kt: (166, 35): Unresolved reference: id
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':reactnativestripesdk:compileDebugKotlin'.
> Compilation error. See log for more details
Ah I actually hit that recently when trying to build using react-native run-android and never really figured out why. If you open up Android Studio and build directly in Android Studio it worked for me.
I just noticed in your video that there is a cursor on the screen... you did say you are using a physical device, right?
teal trail
yea! i am using this cool software https://github.com/Genymobile/scrcpy
to control my physical device
sleek bramble
Oh wow that's neat. Never seen that.