Giter Club home page Giter Club logo

stripe-integration's Introduction

Self-Hostable Superfluid-Stripe Integration · License: MIT Twitter Follow

Preface

Superfluid enables ongoing real-time payments (money streams) on the blockchain. Superfluid's Checkout Widget enables streamlined experience for the end-user to start sending Superfluid powered money streams. Stripe, a proven leader in the digital payment gateway sector, provides seamless setup for businesses allowing them to manage transactions, subscriptions, and even complex billing cycles in a straightforward, efficient manner.

Introduction

The Superfluid-Stripe Integration provides a bridge between the conventional and the progressive world of digital finance, refining the process of managing subscription-based services. Built as a solution to enable businesses to pull subscription details through Stripe integration, it connects this information to a self-hosted, Superfluid powered checkout UI.

For businesses already using Stripe, this integration allows them to receive on-chain money streams and token transfers as payments using their existing setup. On the other hand, Web3-native businesses can use Stripe's robust features such as CRM, invoicing, and analytics, while accepting payments in a customary on-chain method.

The Superfluid back-end verifies these on-chain payments and updates the invoices as paid via the Stripe API. Note that Stripe does not impose a processing fee for payments marked as paid_out_of_band.

Architecture

This section provides an overview of the principal technologies used in the front-end (checkout UI) and back-end (invoice payment verification) of this integration.

Backend

  1. TypeScript: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
  2. Nest.js: A progressive Node.js framework for building efficient, reliable and scalable server-side applications.
  3. BullMQ: BullMQ is a fast and robust background job processing library for Redis.
  4. Redis: The open source, in-memory data store used by millions of developers as a database, cache, streaming engine, and message broker.

Frontend

  1. TypeScript
  2. React: Javascript library for building user interfaces.
  3. Next.js: An opinionated React Framework for building full-stack web applications.
  4. @superfluid-finance/widget: Superfluid Checkout Widget

Development

Prerequisites

To work on this integration, ensure that you have a Stripe account set up with Stripe's test data configured. You will need the Secret key from Stripe and create a fake subscription-based product for testing.

Requirements

Docker Redis needs to be set up locally. A very easy way to do that is to use Docker. Install Docker in your system, pull the Redis image, and start up a container. You can easily start up the container by running the docker:redis task from the package.json's scripts.

Local Deployment

  • Create a local .env file from example.env file with values for:
#Stripe Secret Key
STRIPE_SECRET_KEY=""
# Strip API Key
INTERNAL_API_KEY=""
#Redis queue user
QUEUE_DASHBOARD_USER=
#Redis queue password
QUEUE_DASHBOARD_PASSWORD=
  • Start the containers using:
docker compose -f docker-compose.all.yml up -d

Checkout

You can checkout this repository either locally or through a platform like GitHub Codespaces (i.e. Dev Containers) with gives you a convenient way of setting up an isolated development environment with all the dependencies.

Debugging

For effective debugging, utilize the Swagger UI for backend query calls, while the Bull Dashboard can be used to view queues and jobs.

That should be enough to get you started on contributing to this project. Happy coding!

Example 1-click deploy

Deploy on Railway

Contributing

We warmly welcome contributions from the community, we recognize all forms of contributions. This could be new features, bug fixes, documentation, tests, discussions about potential changes, or even just reporting a problem.

We truly appreciate your contribution and celebrate it, no matter how small!

Looking forward to your pull request.

License

This project is MIT licensed.

stripe-integration's People

Contributors

kasparkallas avatar tokdaniel avatar mmd-afegbua avatar

Watchers

Axe avatar  avatar Mikk Õun avatar  avatar  avatar

Forkers

t10labs

stripe-integration's Issues

[Stripe] Clean up UI

To consider:

  • Fonts
  • Dark theme full size
  • Not swimming widget when collapsing accordions
  • Clean up pricing page code and give it more spacing
  • Expose MUI theme from widget?
  • Clean up texts

[Stripe] Introduce a cache to back-end

Some things excessively hit Stripe's API to display content to the user, resulting in not as snappy of a performance. Most of it is very low hanging fruit to cache out, i.e. simple cache attributes on controller endpoints.

As Redis is already used, would enable it as a cache (over regular in-memory), following the guide here: https://docs.nestjs.com/techniques/caching

Note, I'd register the cache module as a global, similar to the config module.

[SUBS] Design "Superfluid-light" Widget alternative flow

Problem

  • We can't get people to care about Super Tokens in the widget flow if they're learning about them for the first time there
  • It's extra friction to explain Superfluid
  • USDCx and similar Super Tokens are difficult to recognise
  • The need for wrapping is unclear
  • We can eliminate need to top up streams with autowrap but not clear how to maintain underlying balance

https://miro.com/app/board/uXjVMtyFgZY=/#tpicker-content

Solution

  • Make more assumptions in the flow (default selection etc) but allow people to edit
  • Don't try to separate out wrapping step, just say "Superfluid balance" or similar
  • Minimise steps (skip token/network selection and wrap selection step by default)
  • Say USDC instead of USDCx

[Stripe] Handle invoice link

As a customer,
I get an e-mail with an invoice link,
the checkout view should have my e-mail pre-filled and locked.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.