Add support for Oxxo & Boleto payments via the Block checkout

[james-allan]

Fixes #2790

Changes proposed in this Pull Request:

The changes in this PR are pretty small. @mattallan added most of the changes necessary to get Boleto and Oxxo to work on the block checkout page in #2823

Testing instructions

These testing instructions are largely copied from Matt's PR.

Pre-requisites

• Separate Stripe merchant accounts located in Brazil and Mexico
• Ability to receive webhooks from Stripe (I use ngrok)

Testing Boleto

1. Go to WooCommerce > Settings > General and set your store's currency to Brazilian real (R$)
2. Go to WooCommerce > Settings > Payments > Stripe > Settings (panel) (/wp-admin/admin.php?page=wc-settings&tab=checkout&section=stripe&panel=settings)
3. Click on edit keys and update the private, secret and webhook keys to your Stripe Brazil store

Warning

If this is not a fresh store and you are connecting a different Stripe account, you will need to go into the usermeta and delete the row with meta_key wp__stripe_customer_id as the existing customer ID won't exist in the Brazil store.

4. From the shop page, add a product to the cart and proceed to the block checkout
5. Enter a valid Brazilian address with an email that fits the {any_prefix}@{any_domain} format (i.e. test@example.com)
6. Select Boleto on the block checkout and enter 00.000.000/0000-00 into the text box.
7. Click on "Place Order" and you should see a pop-up window for the voucher.
8. Closing the voucher should redirect you to the order received page.
9. If you have webhooks setup properly, the order should be on-hold almost immediately.
10. Wait 3mins for the success webhook to come through and confirm the order is updated to processing

Boleto error testing

Stripe docs on testing Boleto: https://stripe.com/docs/payments/boleto/accept-a-payment?platform=checkout#test-integration

1. Testing with an expired voucher
   1. Add the product to the cart and go to the block checkout
   2. While on the block checkout set your email to expire_immediately@example.com
   3. Select Boleto and fill in the tax ID field with 00.000.000/0000-00
   4. Placing the order should show a popup with a voucher that has expired
   5. Closing the window should send you to the order received page with a Pay link
   6. Navigate to the WooCommerce > Orders and confirm the order is set to failed status
2. Testing invalid checkout errors
   1. Add product to the cart and navigate to the block checkout
   2. Set your country to something other than Brazil (i.e. Australia)
   3. Select Boleto and fill in the tax ID field with 00.000.000/0000-00
   4. Placing the order should show an error on the block checkout.

Testing Oxxo

Testing Oxxo is the same as Boleto above, except you'll need to connect a Stripe account set in Mexico and set your store's currency to Mexican Peso. A few things to note:

• Make sure you reset your billing email back to test@example.com or something other than expire_immediately@example so that the vouchers don't expire immediately.

Testing APM errors

This PR also fixes error processing when using APMS on the block checkout.

These are some sketchy steps to replicate but the easiest way to see this with APMs is to following these steps:

1. In your database go to the usermeta table.
2. Search for wp__stripe_customer_id
3. Alter your customer ID so it's invalid.
4. On add/deferred-intent branch (base branch) attempt to make a purchase with any payment method other than a card.
   • You should get a generic Something went wrong. Please contact us to get assistance. error and the follow warning in your error logs. PHP Warning: Undefined array key "redirect" in /plugins/woocommerce/src/StoreApi/Legacy.php on line 68
5. Checkout this branch and repeat.

• you should see a localised message to the payment method section and it should indicate what actually went wrong. You should also no longer get the redirect PHP error.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)

[diegocurbelo]

Hey @james-allan!

I think I'm doing something wrong here, the shortcode checkout works fine, but with the blocks checkout no voucher is displayed for either Boleto or OXXO the form stays disabled, with no error in the console, and the network request succeded:

Also, the checkbox: Save payment information to my account for future purchases. should not be present for Boleto... if you check it and try to pay for the order the correct message is displayed: This payment method cannot be saved for future use. but I think we should hide the checkbox.

[james-allan]

I think I'm doing something wrong here, the shortcode checkout works fine, but with the blocks checkout no voucher is displayed for either Boleto or OXXO the form stays disabled

hmm ok. I'll have a look into it. Locally the modal pops up after a second.

Boleto.mov

I'll start a JN site to rule out any local variation. FWIW, on my local site it's this maybeConfirmVoucherPayment() function that shows the modal. Its in the classic checkout JS though so not sure why.

[james-allan]

I'll start a JN site to rule out any local variation.

I set up a fresh JN site and uploaded a built version of this branch and the voucher was still displayed to me. As I mentioned above the voucher is supposed to be displayed via this maybeConfirmVoucherPayment() function. @diegocurbelo can you confirm if that function is running for your or if that file is loaded?
It's a classic checkout file so I don't think I should be relying on it but I've started that conversation here: p1705983085532559-slack-C055WHLA98D

[mattallan]

@james-allan I've been able to replicate the issue @diegocurbelo was having by going to WC > Settings > Advanced and setting the checkout page to a classic/shortcode checkout page, but then when testing manually go to a checkout block page.

I wasn't getting the boleto pop-up. Then after I updated the checkout page in WC settings to a checkout block page, the voucher pop-up started working 🤔

I need to do some digging to see what might be causing this but I wanted to share this first incase you might have a clue

[james-allan]

by going to WC > Settings > Advanced and setting the checkout page to a classic/shortcode checkout page, but then when testing manually go to a checkout block page.

Ah nice find. I did have a similar issue back while working on #2784. IIRC I was able to fix that by updating the has_cart_or_checkout_on_current_page() function.

With this new information about using a separate checkout page, I've been able to replicate it too so I'll have a look into it as well.

[mattallan]

@james-allan looks like the problem is just the $stripe_params['isCheckout'] is being set to false when you're on a checkout block page that's not set as the default checkout page in WC settings.

We could change this line to:

$stripe_params['isCheckout'] = ( is_checkout() || has_block( 'woocommerce/checkout' ) ) && empty( $_GET['pay_for_order'] );

[james-allan]

Thanks @mattallan. That suggestion works. I pushed that up in 9dbeb91.

[mattallan]

I've tested the latest changes and they look good to me 👍 Thanks @james-allan !

---

• Checkout blocks
• Classic checkout (confirm any changes didn't break existing functionality)
• With both shortcode and blocks checkout pages set as default checkout.