Backend
The places where payment providers are used in the Lotus workflow are:- Connecting an organization to a payment provider. We must provide the functionality to allow the front end to communicate to a user whether they’ve been connected to a payment provider, and to update the organization model with the appropriate information.
- Interfacing with the payment provider to generate an “external” invoice. Even though we keep our own version of an invoice, we need to let the payment provider know how to charge the customer.
- Importing existing customer information from the payment provider into Lotus.
Creating your own payment provider
To create your own integration, you have to do the following:- Create a concrete class that implements the
PaymentProviderinterface. This interface is defined in metering_billing/payment_providers.py). You can see the implementation of the Stripe version (StripeConnectorclass) in the file. The type hints should be relatively self-explanatory, but if you have any doubts, don’t be afraid to reach out in the Lotus Community Slack. - Add your payment provider to the Payment Providers enum. This will allow it to be a field in the models and be used throughout Lotus.
- To let the Lotus app access the functionality provided by your
implementation, go to the
metering_billing/invoice.pyfile, and add an instance of your connector to thePAYMENT_PROCESSOR_MAPdictionary. From here, the boilerplate will take care of using the methods you defined to execute Lotus’ billing logic. To see how we did it with Stripe, check out this line.
Frontend
You might want to integrate your payment provider in the frontend to allow for granular control over methods in the UI, including the ability to check the connection status or sync customers. This frontend display is much more open-ended than the backend integration but we still have a few steps that can get you started:- In the
frontend/src/types/payment-processor-type.tsfile, create a new interface for the data sent in a request to Lotus’ backend and add it as an option for thedataparameter in thePaymentProcessorConnectionRequestTypeinterface. You can see that for the Stripe integration, the only data we needed was the authorization code provided by the Oauth integration. - In the
frontend/src/integrations/PaymentProcessorIntegrations.tsxfile, create a new functional component that describes what should happen once we get redirected from the authorization page for your payment processor. We have an example of how we did it for Stripe in the file. - In the
frontend/src/config/Routes.tsxfile, add a new route for your payment processor. You can see how we did it for Stripe in the file.