feat(payment_providers): Add MoneyHash

[shahwan42]

Roadmap Task

NA

Feature Request

https://getlago.canny.io/feature-requests/p/integration-with-moneyhash-for-payment-orchestration

Context

MoneyHash is a leading payment infrastructure software in Africa and the Middle East. Our biggest features are providing a superior payment orchestration for many payment providers in the region, smart payment routing among other features.

We have common customers, and it's a needed feature to have MoneyHash integrated into Lago.

This PR integrates MoneyHash as a payment provider for Lago's customers.

Description

This PR implements the following changes

• When a new customer is created in Lago and the "sync with provider" checkbox is checked, a new customer is also created in MoneyHash.
• Create a payment URL for invoices, allowing customers to pay their invoices via MoneyHash
• Create Payment Requests that are processed using the customer's payment method.
• Webhook Handling
  • Transaction Webhooks
    • On the "transaction.purchase.successful" callback, the invoice/payment status is set to "Succeeded."
    • On the "transaction.purchase.failed" callback, the invoice/payment status is set to "Failed."
  • Intent Webhooks
    • On the "intent.time_expired" callback, the invoice/payment status is set to "Failed."
  • Card Token Webhooks
    • On the "card_token.created" and "card_token.updated" callbacks, the customer’s payment method ID is added or updated.
    • On the "card_token.deleted" callback, the customer’s payment method ID is removed.

List any dependencies that are required.
NA

[shahwan42]

Hi, can you please allow the CI to run so that I resolve any possible issue? Thanks.

CC: @keellyp

[ansmonjol]

Hey @shahwan42, thanks a lot for your contribution and the time you spent on building this.

Please note that to have the CI run correctly we'll have to re-open this PR into our repo. We'll keep you as co-author of the commits of course. It's because we need a private token to run API in our CI and this is not shared (yet) so this is the best workaround we have

That being said, can you please make some adjustment on this PR's code about those points?

• Use tailwind instead of styled component

We're into the process of moving away from styled component and replace it by tailwind all over the app.
All code we merge on main tends to avoid as much as possible styled-component approach and you can use tailwind classes instead.
All styled.div can easily switch to tailwind approach
Some styled(Component) extend approach can be challenging as we're still in the middle of some components migration. Those could be left using styled-component in the meantime
Also please prevent using the Stack component from MUI and prefer a <div className approach please 🙏

• SVGs

We pay extra attention to svg added to our app for many reasons.
I noticed the MoneyHash svg could be improved. I'm not sure where to find a better version of it on their website
But not having masks used internally for this simple shape and pass it through tool like https://svgomg.net/ could help a lot making them better.
Also, I'm not sure you need to update the psp svg to include money hash for (i) the same reasons as above and (ii) we don't want to add all psps logos in there.
You can simply drop this change imo

• Rebase your changes to resolve conflicts with main

I'll keep an eye open to prevent you to wait too long once this is done!

[shahwan42]

Hi @ansmonjol Thank you for reviewing this.
We've gone through your comments and handled them. Please review it again once you can. Appreciated.

[ansmonjol]

Hey @shahwan42,

Sorry for the delay. Looks awesome thanks for updating it.

Could you rebase your API code on master? then run the codegen on FE side so we can test it? I would love to have a look at the app running before merging 🙏

[shahwan42]

Thank you, @ansmonjol

I've rebased both repos (api&front) and regenerated the GraphQL schema.

I'll post demos of my updates to show you how it's expected to work as soon as I can.

Side note:
By running yarn tsc I've got this error. I left it since it's outside my PR's scope.

src/pages/settings/EmailSettings.tsx:108:42 - error TS7053: Element implicitly has an 'any' type because expression of type 'EmailSettingsEnum' can't be used to index type '{ invoice_finalized: string; credit_note_created: string; }'.
  Property '[EmailSettingsEnum.PaymentReceiptCreated]' does not exist on type '{ invoice_finalized: string; credit_note_created: string; }'.

108                               {translate(EmailScernarioTitleLookup[setting])}
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/pages/settings/EmailSettings.tsx:111:42 - error TS7053: Element implicitly has an 'any' type because expression of type 'EmailSettingsEnum' can't be used to index type '{ invoice_finalized: string; credit_note_created: string; }'.
  Property '[EmailSettingsEnum.PaymentReceiptCreated]' does not exist on type '{ invoice_finalized: string; credit_note_created: string; }'.

111                               {translate(EmailScernarioSubtitleLookup[setting])}
                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 2 errors in the same file, starting at: src/pages/settings/EmailSettings.tsx:108

error Command failed with exit code 2.

Appreciated.

[ansmonjol]

Yes this error has been fixed ~1h ago, a rebase should fix your issue

[shahwan42]

Hi @ansmonjol
Thank you very much for your last review. I've updated both repos (rebased, fixed conflicts & regenerated schema).

As per your request from last time, here's a demo video of MoneyHash as a payment provider in Lago's system. It's similar to Stripe's video from the official docs. Please view it and LMK if you got any comments or concerns.

I appreciate your effort and patience.