Transaction breakdown component for the Payment Details page #10283
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dmvrtx
force-pushed
the
add/1342-transaction-breakdown-block
branch
from
0823dde to
29810cd
Compare
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: +1.41 kB (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
dmvrtx
changed the title
Jinksi
reviewed
Feb 3, 2025
…on-breakdown-block
|
Thanks for pinging me in P2 @mgascam and @dmvrtx ! Great spot:
I'm confirming this with the team but seems like using |
|
@mgascam, I updated the pull request to address comments and include the handling of discount fees. |
mgascam
requested changes
Feb 14, 2025
There was a problem hiding this comment.
I tested with an international card and discound and this is what it rendered for me:
I find some parts of the fee breakdown missing, like the fixed amount of the base fee (discounted) and the Totals. I did not debug it, but maybe due to those values being 0, and falsy in JS?
Here's the timeline endpoint response I get, in case it helps:
{
"type": "captured",
"amount": 1700,
"amount_captured": 1700,
"fee": 0,
"fee_rates": {
"percentage": 0,
"fixed": 0,
"fixed_currency": "USD",
"history": [
{
"type": "base",
"additional_type": "",
"fee_id": "base-us-card-fee",
"percentage_rate": 0.029,
"fixed_rate": 30,
"currency": "usd"
},
{
"type": "additional",
"additional_type": "international",
"fee_id": "additional-us-intl-fee",
"percentage_rate": 0.015,
"fixed_rate": 0,
"currency": "usd"
},
{
"type": "additional",
"additional_type": "fx",
"fee_id": "additional-us-card-fx-fee",
"percentage_rate": 0.01,
"fixed_rate": 0,
"currency": "usd"
},
{
"type": "discount",
"additional_type": "",
"fee_id": "wcpay-discount-100-off",
"percentage_rate": -0.054,
"fixed_rate": -30,
"currency": "usd"
}
],
"fee_exchange_rate": null
},
"currency": "EUR",
"datetime": 1739531254,
"deposit": null,
"transaction_id": "txn_3QsMk6R4vt8oOW8F1yubWIwR",
"transaction_details": {
"customer_currency": "EUR",
"customer_amount": 1700,
"customer_amount_captured": 1700,
"customer_fee": 0,
"store_currency": "USD",
"store_amount": 1779,
"store_amount_captured": 1779,
"store_fee": 0
}
},
{
"type": "authorized",
"datetime": 1739531254,
"amount": 1700,
"currency": "EUR"
},
{
"type": "started",
"datetime": 1739531254,
"amount": 1700,
"currency": "EUR"
},
{
"type": "fraud_outcome_allow",
"datetime": 1739531253,
"ruleset_results": []
}
]
}
|
Thanks @mgascam! I realised that caclulations are incorrect and should not add discount rate, but multiply in a more complex way. Will prepare the changes soon. |
|
Actually, I think it is more complex. The |
mgascam
approved these changes
Feb 26, 2025
There was a problem hiding this comment.
Thanks for working on this feature @dmvrtx. I believe it is a nice improvement!
- ✅ Code changes look good, but please check a JS lint warning re 'TimelineFeeRate' is defined but never used
- ✅ Manual tests look great. I mostly played with discounts. My only comment would be about the full discounts. In this case, we only show a 0% and we don't display the fixed part. I guess this is intended. Truth is I don't have a good suggestion on how those would be displayed. Something like 0% + 0 USD would look weird I guess, and I ignore if that would be feasible without too many complications.
@rogermattic, do you have any suggestions on how to best display the fully discounted fee? Maybe the fixed part should be present and shown as 0 USD if the fee component had a fixed part before discount? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Changes proposed in this Pull Request
New "Transaction breakdown" block is added to the Payment page to provide a better overview of the transaction fees. The block appears below the timeline, above the payment summary.
And with a discount fee it looks like this:
And in case of a fully discounted fee it would look like this:
Testing instructions
npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge