Skip to content

Commit 9d5dc4a

Browse files
david1alvarezdavid1alvarez
committed
feat(payments-next): Remove card display for digital wallets
Because: * We should not be displaying information such as a card's last-4 or its expiration date if the customer used Apple Pay or Google Pay This commit: * Removes extra card info from the UI in cases where the customer paid with Apple Pay or Google Pay Closes #PAY-3289
1 parent 7550ea8 commit 9d5dc4a

4 files changed

Lines changed: 41 additions & 155 deletions

File tree

  • apps/payments/next/app/[locale]

‎apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/success/page.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -148,21 +148,6 @@ export default async function CheckoutSuccess({
148148
width={40}
149149
height={24}
150150
/>
151-
<span className="flex items-center gap-2">
152-
{cart.paymentInfo.brand && (
153-
<Image
154-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
155-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
156-
width={40}
157-
height={24}
158-
/>
159-
)}
160-
{l10n.getString(
161-
'next-payment-confirmation-cc-card-ending-in',
162-
{ last4: cart.paymentInfo.last4 ?? '' },
163-
`Card ending in ${cart.paymentInfo.last4}`
164-
)}
165-
</span>
166151
</div>
167152
) : cart.paymentInfo.walletType === 'google_pay' ? (
168153
<div className="flex items-center gap-3">
@@ -172,21 +157,6 @@ export default async function CheckoutSuccess({
172157
width={40}
173158
height={24}
174159
/>
175-
<span className="flex items-center gap-2">
176-
{cart.paymentInfo.brand && (
177-
<Image
178-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
179-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
180-
width={40}
181-
height={24}
182-
/>
183-
)}
184-
{l10n.getString(
185-
'next-payment-confirmation-cc-card-ending-in',
186-
{ last4: cart.paymentInfo.last4 ?? '' },
187-
`Card ending in ${cart.paymentInfo.last4}`
188-
)}
189-
</span>
190160
</div>
191161
) : cart.paymentInfo.type === 'external_paypal' ? (
192162
<Image

‎apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/success/page.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -149,21 +149,6 @@ export default async function UpgradeSuccess({
149149
width={40}
150150
height={24}
151151
/>
152-
<span className="flex items-center gap-2">
153-
{cart.paymentInfo.brand && (
154-
<Image
155-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
156-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
157-
width={40}
158-
height={24}
159-
/>
160-
)}
161-
{l10n.getString(
162-
'next-payment-confirmation-cc-card-ending-in',
163-
{ last4: cart.paymentInfo.last4 ?? '' },
164-
`Card ending in ${cart.paymentInfo.last4}`
165-
)}
166-
</span>
167152
</div>
168153
) : cart.paymentInfo.walletType === 'google_pay' ? (
169154
<div className="flex items-center gap-3">
@@ -173,21 +158,6 @@ export default async function UpgradeSuccess({
173158
width={40}
174159
height={24}
175160
/>
176-
<span className="flex items-center gap-2">
177-
{cart.paymentInfo.brand && (
178-
<Image
179-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
180-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
181-
width={40}
182-
height={24}
183-
/>
184-
)}
185-
{l10n.getString(
186-
'next-payment-confirmation-cc-card-ending-in',
187-
{ last4: cart.paymentInfo.last4 ?? '' },
188-
`Card ending in ${cart.paymentInfo.last4}`
189-
)}
190-
</span>
191161
</div>
192162
) : cart.paymentInfo.type === 'external_paypal' ? (
193163
<Image

‎apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/start/page.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -98,21 +98,6 @@ export default async function Upgrade({
9898
width={40}
9999
height={24}
100100
/>
101-
<span className="flex items-center gap-2">
102-
{cart.paymentInfo.brand && (
103-
<Image
104-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
105-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
106-
width={40}
107-
height={24}
108-
/>
109-
)}
110-
{l10n.getString(
111-
'next-payment-confirmation-cc-card-ending-in',
112-
{ last4: cart.paymentInfo.last4 ?? '' },
113-
`Card ending in ${cart.paymentInfo.last4}`
114-
)}
115-
</span>
116101
</div>
117102
) : cart.paymentInfo.walletType === 'google_pay' ? (
118103
<div className="flex items-center gap-3">
@@ -122,21 +107,6 @@ export default async function Upgrade({
122107
width={40}
123108
height={24}
124109
/>
125-
<span className="flex items-center gap-2">
126-
{cart.paymentInfo.brand && (
127-
<Image
128-
src={getCardIcon(cart.paymentInfo.brand, l10n).img}
129-
alt={getCardIcon(cart.paymentInfo.brand, l10n).altText}
130-
width={40}
131-
height={24}
132-
/>
133-
)}
134-
{l10n.getString(
135-
'next-payment-confirmation-cc-card-ending-in',
136-
{ last4: cart.paymentInfo.last4 ?? '' },
137-
`Card ending in ${cart.paymentInfo.last4}`
138-
)}
139-
</span>
140110
</div>
141111
) : cart.paymentInfo.type === 'external_paypal' ? (
142112
<Image

‎apps/payments/next/app/[locale]/subscriptions/manage/page.tsx‎

Lines changed: 41 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -199,44 +199,18 @@ export default async function Manage({
199199
alt={
200200
walletType === 'apple_pay'
201201
? l10n.getString(
202-
'apple-pay-logo-alt-text',
203-
'Apple Pay logo'
204-
)
202+
'apple-pay-logo-alt-text',
203+
'Apple Pay logo'
204+
)
205205
: l10n.getString(
206-
'google-pay-logo-alt-text',
207-
'Google Pay logo'
208-
)
206+
'google-pay-logo-alt-text',
207+
'Google Pay logo'
208+
)
209209
}
210210
width={40}
211211
height={24}
212212
/>
213-
{brand && (
214-
<Image
215-
src={getCardIcon(brand, l10n).img}
216-
alt={getCardIcon(brand, l10n).altText}
217-
width={40}
218-
height={24}
219-
/>
220-
)}
221-
{last4 && (
222-
<div>
223-
{l10n.getString(
224-
'subscription-management-card-ending-in',
225-
{ last4 },
226-
`Card ending in ${last4}`
227-
)}
228-
</div>
229-
)}
230213
</div>
231-
{expirationDate && (
232-
<div>
233-
{l10n.getString(
234-
'subscription-management-card-expires-date',
235-
{ expirationDate },
236-
`Expires ${expirationDate}`
237-
)}
238-
</div>
239-
)}
240214
</div>
241215
<Link
242216
className={CSS_SECONDARY_LINK}
@@ -426,10 +400,10 @@ export default async function Manage({
426400
>
427401
{sub.interval
428402
? l10n.getString(
429-
getSubscriptionIntervalFtlId(sub.interval),
430-
{ productName: sub.productName },
431-
`${sub.productName} (${formatPlanInterval(sub.interval)})`
432-
)
403+
getSubscriptionIntervalFtlId(sub.interval),
404+
{ productName: sub.productName },
405+
`${sub.productName} (${formatPlanInterval(sub.interval)})`
406+
)
433407
: sub.productName}
434408
</h3>
435409
<LinkExternal
@@ -476,8 +450,8 @@ export default async function Manage({
476450
</ul>
477451
{(appleIapSubscriptions.length > 0 ||
478452
googleIapSubscriptions.length > 0) && (
479-
<hr className="border-b border-grey-50 my-6" aria-hidden="true" />
480-
)}
453+
<hr className="border-b border-grey-50 my-6" aria-hidden="true" />
454+
)}
481455
</>
482456
)}
483457

@@ -554,13 +528,13 @@ export default async function Manage({
554528
date: nextBillDate,
555529
},
556530
elems: {
557-
strong: <strong />
531+
strong: <strong />,
558532
},
559533
},
560534
<>
561-
Your subscription will expire on <strong>${nextBillDate}</strong>
535+
Your subscription will expire on{' '}
536+
<strong>${nextBillDate}</strong>
562537
</>
563-
564538
)}
565539
</p>
566540
)}
@@ -665,33 +639,35 @@ export default async function Manage({
665639
{!!purchase.expiryTimeMillis &&
666640
(purchase.autoRenewing
667641
? l10n.getFragmentWithSource(
668-
'subscription-management-iap-sub-next-bill-is-due',
669-
{
670-
vars: {
671-
date: nextBillDate,
642+
'subscription-management-iap-sub-next-bill-is-due',
643+
{
644+
vars: {
645+
date: nextBillDate,
646+
},
647+
elems: {
648+
strong: <strong />,
649+
},
672650
},
673-
elems: {
674-
strong: <strong />
675-
},
676-
},
677-
<>
678-
Next bill is due <strong>{nextBillDate}</strong>
679-
</>
680-
)
651+
<>
652+
Next bill is due{' '}
653+
<strong>{nextBillDate}</strong>
654+
</>
655+
)
681656
: l10n.getFragmentWithSource(
682-
'subscription-management-iap-sub-will-expire-on',
683-
{
684-
vars: {
685-
date: nextBillDate,
657+
'subscription-management-iap-sub-will-expire-on',
658+
{
659+
vars: {
660+
date: nextBillDate,
661+
},
662+
elems: {
663+
strong: <strong />,
664+
},
686665
},
687-
elems: {
688-
strong: <strong />
689-
},
690-
},
691-
<>
692-
Your subscription will expire on <strong>{nextBillDate}</strong>
693-
</>
694-
))}
666+
<>
667+
Your subscription will expire on{' '}
668+
<strong>{nextBillDate}</strong>
669+
</>
670+
))}
695671
</p>
696672
</div>
697673
<div>

0 commit comments

Comments
 (0)