Implications of Payments API for Signup Flow UX


  • Provide an outline of the product ‘checkout’ / payment process for Resonate credits and memberships
  • Indicate the key payments (and membership) API endpoints relevant to new website signup flows and guidance
  • Propose component responsibilities and interactions
  • Highlight particular UX / design considerations


  • We are decommissioning the current membership ‘point of sale’ forms (40, 35, 45, 87) in wordpress and need to provide an alternative payment collection and membership recording process to support the new website and ID server.
  • The UX design for the website and player are at an advanced stage and need flows with target links for credits purchase and membership.
  • We are proposing the use of a stripe hosted checkout to enable users to purchase credits, join/renew membership, buy supporter shares and donate. This uses the Stripe api (user, product. prices and the checkout) and also uses a Stripe-hosted checkout page. Pricing and tax (and promotions, discounts etc) are all handled by Stripe.
  • From the user / member signup service flow pages on the ID Server and from the Player ‘add credits’ link we will need to build simple ‘product selection’ pages, using the Stripe toolkit, with a ‘preview’ of the ‘order’ and a checkout button to go to Stripe Checkout.
  • This will involve creating the Stripe customer (If they don’t already exist) and storing the corresponding Stripe customer ID on the Resonate User API. (We will also store the Resonate userid in metadata on the Stripe ‘customer’ object)
  • We will configure the stripe checkout with our branding and any special messages.
  • We will build a ‘Success’ Page, a ‘Cancelled’ Page, providing some friendly Resonate copy for each, and set links to each of these from the Stripe-hosted checkout.
  • We will build a ‘List My Orders’ page for the user so that they can review their previous purchases of memberships, supporter shares, credits or their donations.
  • Welcome email contents (based on our current welcome texts) can be configured in and sent from Stripe checkout.
  • We will configure the Stripe Dashboard tool for administration of memberships and payments.

Component Responsibilities and Interactions

  • Note that Stripe UserIDs are created for every Resonate userID where there is a financial transaction.
  • Note that payments out are out of scope other than refunds via the Stripe Dashboard

Special UX Considerations

  • Review the process end to end to check that we have appropriate guidance on the website and in the Forum handbook;
  • Minimise any layout / style language differences across the ‘handoff’ to Stripe checkout and back;
  • Remove product pricing and currency conversions from current player code for credit top-ups. Any conversions / estimates will be indicative only. Stripe will handle them correctly.

References and Further Reading

Current Signup Policy Considerations

Signup Flow Copy

Payments and Accounting Design