Skip to content

Setting up Apple Pay

Jump to bottom
Nawaz Khan edited this page Feb 15, 2023 · 3 revisions

This procedure creates the UI and integration for Stripe's Apple Pay, Google Pay, and Pay Now buttons.

Notes:

  1. Select a donation amount on the UI, or pass a donation amount. Behind the scenes, the Vue UI code makes an Async request to /api/checkout/create-checkout-session endpoint. You can see this on line.
  2. Save any relevant user info to the local storage to use it later.
  3. Wait for the Async response to complete, get the Stripe checkout URL from the response object, and do a location href redirect(this will go to the Stripe checkout page with CC, ApplePay, and any other payments we have activated on Stripe).
  4. If the payment goes through successfully, we redirect the user to the success page and handle the relevant user flow from there. The success URL is configured in the API file here.
  5. If the payment goes fails, we redirect the user to will go back to the home page and we should handle the relevant user flow from there. The cancel URL is configured in the API file here

Things to do:

  1. On successful payment, build the complete page UI and the user handling and use the local storage or if we can use the data from Stripe's response.
  2. Build the user handling flow for unsuccessful payments and handle it on the UI.

Additional notes and URLS:

Clone this wiki locally