[WEB-2010] Split the checkout flow into two parts #305

vicfergar · 2025-02-05T22:56:31Z

Motivation / Description

This PR changes the checkout flow by using the two new endpoints:

/checkout/start: Called right after entering the billing email. Returns the operation ID and the necessary configuration to initialize the Stripe Elements component.
/checkout/complete: Called after submitting the payment method form, it creates the corresponding intent (SetupIntent or PayentIntent) and returns the client secret.

Note: All the necessary backend changes have been already shipped

Changes introduced

b6cae2f - chore: Improve error handling during payment info collection
8b3a7e9 - fix: Set font family in Stripe Elements
ae53ece - chore: rename data field to gateway_params
d3a4daf - chore: Remove unnecessary fields from CheckoutCompleteResponse
7917239 - feat: Pick elements_configuration from the checkout start response
6204845 - chore: Remove environment var VITE_STORYBOOK_RESTRICTED_SECRET
429630d - chore: Fix purchase flow stories
32fe846 - chore: fix unit tests
48ea8b6 - feat: Replace the PurchaseEndpoint with CheckoutStartEndpoint and CheckoutCompleteEndpoint
209c078 - chore: Remove svelte-stripe dependency

Linear ticket (if any)

Additional comments

src/ui/states/state-needs-payment-info.svelte

vicfergar · 2025-02-06T08:31:56Z

.storybook/main.ts

@@ -19,8 +19,6 @@ const config: StorybookConfig = {
    ...config,
    VITE_STORYBOOK_PUBLISHABLE_API_KEY:
      process.env.VITE_STORYBOOK_PUBLISHABLE_API_KEY || "",
-    VITE_STORYBOOK_RESTRICTED_SECRET:
-      process.env.VITE_STORYBOOK_RESTRICTED_SECRET || "",


This env var is no longer needed. With the new flow, we don't need a payment_intent or setup_intent to render the payment form 😄

vicfergar · 2025-02-06T08:35:03Z

package.json

@@ -92,7 +92,6 @@
    "storybook": "^8.5.0",
    "svelte": "^5.12.0",
    "svelte-check": "^4.1.1",
-    "svelte-stripe": "^1.3.0",


I removed this third-party library and initialized the stripe elements as recommended by Stripe.

src/networking/backend.ts

src/tests/helpers/purchase-operation-helper.test.ts

vicfergar · 2025-02-06T08:57:12Z

src/ui/rcb-ui.svelte

-        if (result.next_action === "completed") {
-          lastError = null;
-          currentView = "success";
-          return;
-        }


This was unreachable code, since next_action is always set to collect_payment_info by the backend

Question:
Did we break this unreachable code for some previous version by always returning "collect_payment_info"?

When was completed being returned?

That's correct Nicola, the old endpoints (/subscribe and /purchase endpoints) are kept untouched and will return the field collect_payment_info.

I tested all of this in a canary using the published version of the SDK before shipping the BE changes.

My question was related to the completed value.

When was that value returned?
In what scenario?

I understand that "recently" we updated to always return collect_payment_info my question is:

Did we break older version of the sdk that supported completed when we stopped sending it?

hmm, I’m not following. completed is not returned by the backend, even before any deferred flow changes were shipped. I don’t think that status was ever used, IIRC

This PR should not break the existing flow. I tested the live WPL version before shipping the backend changes, and no issues were detected.

vicfergar · 2025-02-06T10:11:36Z

src/ui/states/state-needs-payment-info.svelte

+      paymentMethodTypes: ["card"],
+      setup_future_usage: "off_session",
+      amount: productDetails.currentPrice.amountMicros / 10000,
+      currency: productDetails.currentPrice.currency.toLowerCase(),


Since these parameters should match the settings from the PaymentIntent/SetupIntent, I was considering including them in the CheckoutStart response. Wdyt @RevenueCat/web?

Makes sense, the risk is that the productDetails.currentPrice.amountMicros might be different from the one show at the time of downloading the product.

However it is worse if we show one price and then charge another one. So yes, returning the latest up to date price for the product from the backend it's a good idea.

I changed this to retrieve these values from the start purchase response so that we have more control over them from the backend

src/networking/endpoints.ts

…and `CheckoutCompleteEndpoint`

…error

src/ui/states/state-needs-payment-info.svelte

…info`

vicfergar requested a review from a team February 5, 2025 22:56

vicfergar added the pr:other label Feb 5, 2025

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch 2 times, most recently from f2696f6 to 37e81be Compare February 5, 2025 23:09

tonidero reviewed Feb 6, 2025

View reviewed changes

src/ui/states/state-needs-payment-info.svelte Outdated Show resolved Hide resolved

vicfergar commented Feb 6, 2025

View reviewed changes

src/networking/backend.ts Show resolved Hide resolved

vicfergar commented Feb 6, 2025

View reviewed changes

src/tests/helpers/purchase-operation-helper.test.ts Show resolved Hide resolved

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from 37e81be to 42589e7 Compare February 6, 2025 08:51

vicfergar commented Feb 6, 2025

View reviewed changes

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from f9ecb2e to f5fc27c Compare February 6, 2025 20:37

antoniobg reviewed Feb 6, 2025

View reviewed changes

src/networking/endpoints.ts Outdated Show resolved Hide resolved

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from ff2d793 to d1a61b3 Compare February 7, 2025 06:31

vicfergar added 11 commits February 7, 2025 16:59

chore: Remove svelte-stripe dependency

0ed343f

feat: Replace PurchaseEndpoint method with CheckoutStartEndpoint …

60ba349

…and `CheckoutCompleteEndpoint`

chore: fix unit tests

bc6ac11

chore: Fix purchase flow stories

61b8b4d

chore: Remove environment var VITE_STORYBOOK_RESTRICTED_SECRET

6a3ccf0

fix: handleContinue not returning from processing after submission …

1b6d568

…error

feat: Pick elements_configuration from the checkout start response

7917239

chore: Address feedback. Keep naming consistency in new endpoints

83d3390

chore: Remove unnecessary fields from CheckoutCompleteResponse

d3a4daf

chore: send customer email on checkout start

348429f

chore: rename data field to gateway_params

ae53ece

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from d1a61b3 to ae53ece Compare February 7, 2025 16:03

vicfergar added 3 commits February 7, 2025 18:13

fixup mail

b1fe31d

fix: Set font family in Stripe Elements

8b3a7e9

chore: Improve error handling during payment info collection

b6cae2f

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from d9121c4 to b6cae2f Compare February 9, 2025 22:49

chore: Fix test type check

8f9b0fd

vicfergar marked this pull request as ready for review February 10, 2025 08:06

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from ac94730 to 1136121 Compare February 10, 2025 10:54

vicfergar added 3 commits February 10, 2025 11:59

chore: Extract stripe-related logic into a dedicated service

826db61

chore: Update webbilling-demo lock file

76f504d

chore: Fix broken e2e test

71c033e

vicfergar force-pushed the WEB-2010-websdk-invoke-the-new-endpoints branch from 1136121 to 71c033e Compare February 10, 2025 10:59

chore: Improve type check

3766033

polmiro requested changes Feb 11, 2025

View reviewed changes

src/ui/states/state-needs-payment-info.svelte Outdated Show resolved Hide resolved

fix: Destroy paymentElement when unmounting the `state-needs-payment-…

663d813

…info`

polmiro approved these changes Feb 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WEB-2010] Split the checkout flow into two parts #305

[WEB-2010] Split the checkout flow into two parts #305

vicfergar commented Feb 5, 2025 •

edited

Loading

vicfergar Feb 6, 2025

vicfergar Feb 6, 2025

vicfergar Feb 6, 2025

nicfix Feb 6, 2025

vicfergar Feb 10, 2025

nicfix Feb 10, 2025

vicfergar Feb 11, 2025

vicfergar Feb 6, 2025

nicfix Feb 6, 2025

vicfergar Feb 6, 2025

[WEB-2010] Split the checkout flow into two parts #305

Are you sure you want to change the base?

[WEB-2010] Split the checkout flow into two parts #305

Conversation

vicfergar commented Feb 5, 2025 • edited Loading

Motivation / Description

Changes introduced

Linear ticket (if any)

Additional comments

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vicfergar commented Feb 5, 2025 •

edited

Loading