Skip to content
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

Payment Intents #1089

Merged
merged 19 commits into from
Jul 2, 2019
Merged

Payment Intents #1089

merged 19 commits into from
Jul 2, 2019

Conversation

Gnito
Copy link
Contributor

@Gnito Gnito commented May 14, 2019

Read more about this change:

Before deploying this SCA change into production, you should test with live credit cards how the authentication modal works with most common card issuers in your marketplace.

Automatic payment confirmation flow with Stripe.js (using stripe.handleCardPayment) handles all the different authentication methods (created by card issuers) within an iframe modal. However, some card issuer's might have flows that don't easily fit into this setup. Especially what comes to 3D Secure version 1.
Read more about 3D Secure 2 flow and its frictionless fallback to version 1: https://stripe.com/gb/guides/3d-secure-2

If there are problems with authentication modal, you might want to check how to customize that iframe: https://stripe.com/docs/payments/3d-secure-iframe


test credit card for 3D security flow:
4000 0000 0000 3220

CheckoutPage flow has been changed to support Stripe's PaymentIntents

After form submit, there are 4 Promises in sequence:

=> sdk.transactions.initiate({ transition: 'transition/request-payment', ...})

  • API creates PaymentIntent and returns stripePaymentIntentClientSecret inside transaction's protectedData.
  • Booking is created at this step - so, availability management blocks dates for conflicting bookings.
  • Automatic expiration happens in 15 minutes, if process is not transitioned to 'transition/confirm-payment' before that.
  • created transaction is saved to session storage (or existing enquiry tx is updated)

=> stripe.handleCardPayment(stripePaymentIntentClientSecret, card, paymentParams)

  • Stripe's frontent script checks if PaymentIntent needs extra actions from customer.
    Some payments might need Strong Customer Authentication (SCA). In practice, Stripe's script creates a popup (iframe) to card issuers site, where 3D secure v2 authentication flow can be completed.

=> sdk.transactions.transition({ transition: 'transition/confirm-payment', ...})

  • Inform Marketplace API, that PaymentIntent is ready to be captured after possible SCA authentication has been asked from user.

=>sdk.messages.send({ transactionId: orderId, content: message })

  • Send an initial message to transaction if customer has added a message.

Note: if the checkout page is refreshed in the middle of the process, we continue the flow from where it was left. Because of that we also need to retrieve PaymentIntent from Stripe as part of data that needs to be loaded.

Read more from Flex Docs: https://www.sharetribe.com/docs/guides/how-to-take-payment-intents-into-use/


PaymentIntent flow with screenshots

PaymentIntents form with billing details:

(Note: billing address is recommended by Stripe, but it can be removed easily from StripePaymentForm)
Screenshot 2019-06-25 at 19 40 29

3DS2 test popup:

Screenshot 2019-06-25 at 20 24 21

Error cases

Payment expired. (Customer spent too much time between request-payment and confirm-payment transitions):
Screenshot 2019-06-25 at 19 33 23

Customer fails payment authentication popup somehow (possibilities for failure depends on banks site). Customer can try again, but sees an error:
Screenshot 2019-06-25 at 19 10 28

Customer fails confirm-payment API call (this was a network error):
Screenshot 2019-06-25 at 19 19 40

Page refresh made between payment transitions, retrieving PaymentIntent from stripe.duck.js fails (this was a network error):
retrievePaymentIntent-offline

@Gnito Gnito force-pushed the payment-intents branch 8 times, most recently from 9db6ca8 to b3ef9b6 Compare June 19, 2019 13:36
@Gnito Gnito force-pushed the payment-intents branch 3 times, most recently from 436e090 to 75eac0b Compare June 19, 2019 15:26
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 20, 2019 09:50 Inactive
@Gnito Gnito force-pushed the payment-intents branch 2 times, most recently from 82229e7 to 4ba8084 Compare June 24, 2019 15:59
@Gnito Gnito changed the title WiP: Payment Intents: base-branch Payment Intents Jun 24, 2019
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 24, 2019 16:46 Inactive
@Gnito Gnito force-pushed the payment-intents branch 3 times, most recently from 4f69d97 to fa35f89 Compare June 26, 2019 09:56
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 27, 2019 12:42 Inactive
(Redirect tx with payment-pending to checkout page and
clear card paymenterrors from store.)
…action.

Data serialization is improved too:
Date and Decimal objects within data are serialized automatically
@Gnito Gnito temporarily deployed to sharetribe-starter-app June 28, 2019 10:43 Inactive
@Gnito Gnito temporarily deployed to ftw-test-livestripe July 1, 2019 13:27 Inactive
Gnito added 3 commits July 2, 2019 13:13
Combine initiateOrder and initiateOrderAfterEnquiry thunk functions
Use PaymentIntents flow:
initiateOrder (SDK), handleCardPayment(Stripe), confirmPayment (SDK), sendMessage (SDK)
Form is not visible after handleCardPayment is called.
Show errors on various steps of PaymentIntent (SCA) process.
@Gnito Gnito removed the in progress label Jul 2, 2019
@Gnito Gnito merged commit 7233aaf into master Jul 2, 2019
@Gnito Gnito deleted the payment-intents branch July 2, 2019 12:18
@Gnito Gnito mentioned this pull request Jul 2, 2019
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.

1 participant