#kalugny-payment-request-items
dawn lintel
sick scaffold
E.g., this is how it looks in Apple Pay - no line items
dawn lintel
Hey there, thanks for sharing. Taking a look
Can you share the full context of the Payment Request code?
Are there any errors in the browser console/integration?
sick scaffold
This is the only relevant warning in the console - no errors:
[Deprecation] The 'basic-card' payment method is deprecated and will be removed in M100, around March 2022. See https://www.chromestatus.com/features/5730051011117056 for more details.
if (stripe) {
const pr = stripe.paymentRequest({
country: 'US',
currency: pricingPlan.currency,
displayItems: [
{
label: '7 day trial',
amount: 0
},
{
label: '1 Year Subscription',
amount: pricingPlan.price
}
],
total: {
label: 'Total',
amount: pricingPlan.price
},
requestPayerName: true,
requestPayerEmail: true
})
// Check the availability of the Payment Request API.
pr.canMakePayment().then(result => {
if (result) {
pr.on('paymentmethod', async ev => {
try {
const createSubscriptionParams: ICreateSubscriptionRequest = {
paymentMethodId: ev.paymentMethod.id,
email: email,
plan: pricingPlan.stripeId,
rejectActiveSubscriber: true,
isTest: testMode
}
const result = await accounts.createSubscription(createSubscriptionParams)
if (isFailure(result)) {
ev.complete('fail')
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete('success')
track(startTrialEvent(pricingPlan))
}
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Error thrown incorrectly'
track(errorEvent(errorMessage, 'PaymentRequest'))
}
})
setPaymentRequest(pr)
}
})
}
}, [stripe, track, pricingPlan, email, testMode, nextStep])```and in the markup:
and paymentRequest is
const [paymentRequest, setPaymentRequest] = React.useState<PaymentRequest | null>(null)
dawn lintel
Out of interest, does it work with the Google Pay UI?
Can you provide a reproduction at a URL I can access?
sick scaffold
No, it's a similar issue in Google Pay. Note that clicking the ℹ️ icon does show the line items, but this is not how it looks when you use the "native" PaymentRequest
I was trying to publish a version for you to test and now it works for Apple Pay 😅
So thanks for being the rubber ducky 😄
For Google Pay it still looks like the screenshot above
coarse hollow