Skip to content
This repository has been archived by the owner on Oct 16, 2023. It is now read-only.

New: Next Gen Stripe Gateway #11

Merged
merged 10 commits into from
Jun 8, 2022
Merged

Conversation

jonwaldstein
Copy link
Contributor

@jonwaldstein jonwaldstein commented Jun 3, 2022

Description

To really put the Next Gen gateway api to the test, we need a tangible gateway. Since Stripe is usually the most involved in terms of front-end, we chose to scaffold a new Stripe gateway using the Payment Element api. The PR adds the new gateway and will provide enough functionality to complete a donation on the next gen form. There is still more polish to do in regards to the full transaction cycle, including receipts - but those pieces will come soon after this.

JS Gateway Updates

  • New method afterCreatePayment?(response: object): Promise<void> | Error that can be used after creating the donation & returning from createPayment($donation) from the gateway.

Affects

  • The js gateway api
  • Replace axios with fetch

Visuals

Screen Shot 2022-06-03 at 2 51 17 PM

Testing Instructions

  • Run npm run dev
  • Make sure your stripe account is setup & next gen stripe enabled
  • Donate using the stripe gateway using the next gen donation form block

Pre-review Checklist

  • Acceptance criteria satisfied and marked in related issue
  • Relevant @unreleased tags included in DocBlocks
  • Includes unit and/or end-to-end tests
  • Self Review of code and UX completed

@github-actions
Copy link

github-actions bot commented Jun 3, 2022

A build of this branch is available at https://impress-org.github.io/givewp-next-gen/feature/stripe-gateway

@jonwaldstein jonwaldstein marked this pull request as ready for review June 7, 2022 19:44
@jonwaldstein
Copy link
Contributor Author

@JasonTheAdams please review this one. There is still more polish to do in regards to the full transaction cycle (including receipts) & the api in general - but those pieces will come soon after this.

Copy link
Contributor

@JasonTheAdams JasonTheAdams left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lovely! Did a quick code review. I'll test this after the comments are addressed. 👍

Comment on lines 75 to +82
* A hook before the form is submitted.
*/
beforeCreatePayment?(values: FormData): Promise<object> | Error;

/**
* A hook after the form is submitted.
*/
afterCreatePayment?(response: object): Promise<void> | Error;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a more specific name we can give these? What are the gateways intended to do at these points? Perhaps this is fine. It's just not clear to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought this was a specific name lol. beforeCreatePayment() fires before the gateway class method createPayment(). afterCreatePayment() gets fired after the gateway class method createPayment(). This is where the gateway could return data to itself using ReturnToBrowser / json and do something with that response.

In the case for Stripe it needs to return a stripe intent status to the front-end and do something with it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps it is a specific as it can be. Right now the naming caters towards the event — that is, the name is clear that it's happening at a point in time and when. That doesn't really inform the gateway as what it ought to be doing at that time. I don't know if this is actually accurate, but something like, prepareForDonation and finishDonation — the point being that it gently guides the gateway as what it ought to be doing.

That said, perhaps what's being done at this event varies too much from gateway to gateway, in which case the current event-based naming is fine.

Copy link
Contributor Author

@jonwaldstein jonwaldstein Jun 8, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotchya, I think I gravitated toward the event-based naming because it coincides with the backend api naming convention and was easier to conceptualize in what order they get triggered while writing the logic. I know what you're saying about guiding the intention of the methods but as you said, the intention could vary between gateways. Some Gateways might not even need to use these.

Some use cases I see for each:

beforeCreatePayment()

  • sending data to createPayment(), validation, gateway object mounting, pre-fetching something/using custom route

afterCreatePayment()

  • receiving data from createPayment(), gateway confirmation, redirecting (the framework will probably have a general way of redirecting to receipt as well).

@jonwaldstein
Copy link
Contributor Author

@JasonTheAdams comments addressed, give her a whirl 🧪

Copy link
Contributor

@JasonTheAdams JasonTheAdams left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes a donation with the new Stripe Elements and takes me to the confirmation page. Noice. 💯

@JasonTheAdams JasonTheAdams merged commit 9473782 into develop Jun 8, 2022
@JasonTheAdams JasonTheAdams deleted the feature/stripe-gateway branch June 8, 2022 22:26
@github-actions
Copy link

github-actions bot commented Jun 8, 2022

A build of this branch is available at https://impress-org.github.io/givewp-next-gen/develop

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants