Implement payments via Express Checkout Element on the Cart and Checkout pages #8914
Conversation
Yes it seems like it's related to Storefront. If I use TT4 both buttons have the same width. I wasn't able to easily identify what is the difference, only found this CSS 
|
|
@reykjalin I was able to see the button on the checkout block now, but I'm having the same problem from the cart block. When I click the button it throws an error: test.movThe difference in the blocks vs. the shortcode checkout for me is that this prop is different: blocks / shortcode. In blocks: In shortcode: I'm using WooCommerce System Status Report` WordPress EnvironmentWordPress address (URL): http://wcpay.test Server EnvironmentServer Info: nginx/1.25.1 SUHOSIN Installed: – DatabaseWC Database Version: 8.3.1 Post Type Countsattachment: 13 SecuritySecure connection (HTTPS): ❌ Active Plugins (8)Query Monitor: by John Blackbourn – 3.16.2 Inactive Plugins (7)Disable All WordPress Updates: by Oliver Schlöbe – 1.7.1 Dropin Plugins ()db.php: Query Monitor Database Class (Drop-in) Must Use Plugins (1)default.php: by – SettingsAPI Enabled: – Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) Connected to WooCommerce.com: – LoggingEnabled: ✔ WC PagesShop base: #6 - /shop/ ThemeName: Twenty Twenty-Four TemplatesOverrides: /Users/ricardometring/a8c/valet/wcpay/wp-content/plugins/woocommerce/templates/block-notices/error.php WooPaymentsVersion: 7.7.0 SubscriptionsWCS_DEBUG: ✔ No WooCommerce Account Connected: ❌ No Store SetupCountry / State: United States (US) — California Subscriptions by Payment GatewayWooPayments: trash: 6 Payment Gateway SupportWooPayments: products WooPayments (Bancontact): products WooPayments (giropay): products WooPayments (Sofort): products WooPayments (Przelewy24 (P24)): products WooPayments (iDEAL): products WooPayments (EPS): products WooPayments (Affirm): products WooPayments (Afterpay): products WooPayments (Klarna): products AdminEnabled Features: activity-panels Disabled Features: experimental-blocks Daily Cron: ✔ Next scheduled: 2024-06-20 00:16:43 -04:00 Action SchedulerCancelled: 17 Complete: 389 Failed: 8 Pending: 1 Status report informationGenerated at: 2024-06-19 13:04:15 -04:00 |
…lization functions
|
@ricardo I've addressed the issue you discovered, thank you! Not sure why I wasn't running into it before. I also added some JS tests, so if you could give a quick re-review that'd be great 🙏 |
There was a problem hiding this comment.
@reykjalin I'm now experiencing a different error from cart and checkout blocks pages:
IntegrationError: The amount 2750 is less than the total amount of the line items provided.
To reproduce: Navigate to WooCommerce > Settings > Enable tax rates.
This is how the `lineItems` property looks.
Blocks checkout:
[
{
"key": "total_items",
"label": "Subtotal:",
"value": 2500,
"valueWithTax": 2750,
"name": "Subtotal:",
"amount": 2750
},
{
"key": "total_fees",
"label": "Fees:",
"value": 0,
"valueWithTax": 0,
"name": "Fees:",
"amount": 0
},
{
"key": "total_discount",
"label": "Discount:",
"value": 0,
"valueWithTax": 0,
"name": "Discount:",
"amount": 0
},
{
"key": "total_tax",
"label": "Taxes:",
"value": 250,
"valueWithTax": 250,
"name": "Taxes:",
"amount": 250
},
{
"key": "total_shipping",
"label": "Shipping:",
"value": 0,
"valueWithTax": 0,
"name": "Shipping:",
"amount": 0
}
]
Shortcode checkout (for comparison):
[
{
"label": "Tax",
"amount": 250,
"name": "Tax"
},
{
"label": "Shipping",
"amount": 0,
"name": "Shipping"
}
]
@reykjalin Should we aim to make those line items consistent across shortcode and blocks?
Also, I'm having the following error when I disable tax calculation and try to place an order from blocks pages:
IntegrationError: Invalid value for confirm event paymentFailed callback: value should be an object. You specified: fail.
Placing an order in shortcode pages work just fine.
|
@reykjalin Do you plan to take a look into the button sizing issue as part of this PR or should I create a separate issue? There are currently two display problems:
|
Oh, nice catch! Looks like I'm supposed to be using
I'm leaning no. I think the line items in the blocks come from the Cart/Checkout block (or rather, the props passed to our component) while the line items in the shortcode come from the cart API response, so they're a bit different. I don't think it makes sense to try to make them the same 🤔
Let's make it a part of #8951. The height thing is already fixed in #8988, that was just because the default height from Stripe doesn't match our default height. The width is odd. I'm not sure what could be causing it, but I'll add a comment to #8951 to make sure I remember to look into it. |
|
Ok, incorrect line item total fixed in 8d5d8b4 🎉 |
|
@reykjalin The tax rates issue was fixed 👍. But I'm still facing the second problem I mentioned in the review, when I try to place the order. Can you reproduce this one as well? This is only happening when checking out from blocks cart for me (Not blocks checkout). |
|
@reykjalin It was failing due to this issue: #8981. I didn't know it was failing as I was seeing only the console error, but after a workaround, it works now 👍. |
Fixes #8870
Changes proposed in this Pull Request
_wcpay_feature_stripe_eceoption is set to1._wcpay_feature_stripe_eceoption is set to1.Testing instructions
Important
This has been tested using Google Pay since it is currently difficult to test Apple Pay due to Apple Pay's requirements for test cards.
Important
You must test these changes on a public facing URL using HTTPS. Use something like Jurassic Tube or ngrok to create a tunnel to your local environment.
Enable the ECE elements
./bin/cli.sh wp option update _wcpay_feature_stripe_ece 1.cdto your local merchant store site directory (not the WCPay repo) and runwp option update _wcpay_feature_stripe_ece 1.brew install wp-cli._wcpay_feature_stripe_ecefield in thewp_optionstable to be1.Make sure you have a Google Pay account set up with a real card
Testing procedure for cart and checkout pages
Test a failure message
Important
I don't know how to fake this because I don't know how/if we can use any GPay test cards, so there are some local code changes required here to fake an issue.
phoneNumberRequiredtofalsehere:woocommerce-payments/client/express-checkout/index.js
Line 262 in 1564ba9
Regression tests
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