Skip to content

Show recurring icon in payment methods #4299

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 20, 2025
Merged

Conversation

Mayisha
Copy link
Contributor

@Mayisha Mayisha commented May 9, 2025

Fixes STRIPE-192
Fixes #2831

Changes proposed in this Pull Request:

  • Added a recurring icon with a tooltip in payment methods that supports subscription.

Testing instructions

  • Go to the Stripe settings page in your wp-admin.
  • Confirm that there is a new recurring icon beside the payment methods that supports subscriptions with a tooltip.
Screenshot 2025-05-09 at 3 29 38 PM Screenshot 2025-05-09 at 3 29 11 PM

@daledupreez daledupreez self-requested a review May 13, 2025 11:40
Copy link
Contributor

@daledupreez daledupreez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really close, but I think we have a few small visual aspects to polish.

Comment on lines 16 to 22
.components-popover__content {
border-radius: 4px;
box-shadow: 0px 2px 6px 0px rgba( 0, 0, 0, 0.05 );
padding: 5px 10px;
background-color: #000000;
color: #ffffff;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles here don't match what we're doing for the currency (i) popover. We should use the same styles or component.
Screenshot 2025-05-13 at 13 56 17

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Waiting on confirmation from design about this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per the confirmation from design, we are keeping these different as one if a tooltip and another is a popover. However, in the previous implementation, I was using the popover component for showing Supports recurring payments message. I have updated the component in facce12

@Mayisha
Copy link
Contributor Author

Mayisha commented May 19, 2025

Thanks @daledupreez, for the feedback. I have made some adjustments in my recent commits and it's ready for review again. 👀

@Mayisha Mayisha requested a review from daledupreez May 19, 2025 06:46
Copy link
Contributor

@daledupreez daledupreez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, this is working well, but I think we can remove the one cursor CSS rule that came up.

const Icon = styled.img`
height: 14px;
width: 14px;
cursor: pointer;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this? I am not sure that the item is clickable, so adding a pointer cursor doesn't feel right. Also, it doesn't seem to be visible for me! 🙃

@Mayisha Mayisha merged commit c8615db into develop May 20, 2025
52 of 53 checks passed
@Mayisha Mayisha deleted the task/2831-recurring-icon branch May 20, 2025 05:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Settings] Missing information about the payment method types' support for Automatic Recurring Payments
2 participants