feat: add MercadoPago payment app

[ubinatus]

What does this PR do?

1. Adds MercadoPago as a new payment app for Cal.com,
2. Adds a webhook endpoint to listen for payments created with MercadoPago.

About MercadoPago

Mercado Pago is a leading digital payment platform in Latin America. Currently, it's available in seven countries: Argentina, Brazil, Chile, Colombia, Mexico, Uruguay, and Peru. It's widely used by businesses and consumers in all the above countries, and it surpassed $20 billion payment volume in 2019.

Checkout the Loom Video Demo for this PR.

Requirement/Documentation

• If there is a requirement document, please, share it here.
  No
• If there is ab UI/UX design document, please, share it here.
  No

Type of change

• New feature (non-breaking change which adds functionality)

How should this be tested?

• Are there environment variables that should be set?
  -- Yes, we need the following environment variables: MERCADOPAGO_CLIENT_ID, MERCADOPAGO_CLIENT_SECRET, NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY. See the guide after this bullet points to learn how to retrieve the configs from the App in MercadoPago to Cal.com enviornment variables.
• What are the minimal test data to have?
  -- MercadoPago requirements:
  --- 1. Signup to MercadoPago here.
  --- 2. Create MercadoPago application in the developers portal here.
  --- 3. Retrieve the Client ID on the applications page.
  --- 4. Retrieve the Secret on the test credentials section (sidebar).
  --- 5. Retrieve the Public Key on the test credentials section (sidebar)
  --- 6. Set the Webhook (sidebar). Should point to YOUR_URL/api/integrations/mercadopago/webhook and should select "Pagos" (Payments) as the only event needed.
  --- 7. Set the Redirect Url on the the application page. Should point to YOUR_URL/api/integrations/mercadopago/callback
  See the guide after this bullet points to learn how to setup an App in MercadoPago.
  -- Cal.com requirements:
  --- 1. Install MercadoPago payment app.
  --- 2. Add the MercadoPago payment information in an EventType
• What is expected (happy path) to have (input and output)?
  -- Being able to install MercadoPago payment app in Cal.com.
  -- Being able to book and pay an event with MercadoPago in Cal.com.
  -- Being able to cancel an event and refund with MercadoPago in Cal.com.
• Any other important info that could help to test that PR.
  -- See the following guide.

In order to test the MercadoPago integration:

1. Create a MercadoPago account here.
2. Go to the developers site and set up an application. Here you should add the relevant environment variables to the .env file. You'll need the Application ID of MercadoPago (MERCADOPAGO_CLIENT_ID), the Public Key of MercadoPago (NEXT_PUBLIC_MERCADOPAGO_PUBLIC_KEY), the Access Token of MercadoPago (MERCADOPAGO_CLIENT_SECRET). After that you will to set up the Webhook URL to point to the https://yesyesyes.ngrok.app/api/integrations/mercadopago/webhook. Finally, you should edit the MercadoPago application and add the RedirectURL to point to https://yesyesyes.ngrok.app/api/integrations/mercadopago/callback. I've made a Loom Video to quickly explain this process.
3. Once you had set up the configs in the .env file you should run yarn dx so that it can seed again the app credentials to the database.
4. Install MercadoPago payment app to your Cal.com account.
5. Create an EventType and add the MercadoPago app. Setup the price and currency. The currency should be the same local currency (or USD) as the business set up in MercadoPago. Since there is no way to retrieve this from the API, the user should manually set the currency.
6. In an incognito window, schedule an Event with the EventType that has the MercadoPago integration.
7. After confirming the booking you will see the Payment page with the MercadoPago payment button. The currency and price should be reflected here.
8. The pay button will redirect you to MercadoPago account so that you can proceed with the payment. You can used the test credit cards and enter "12345678" for the ID number.
9. After the payment is done you should be redirected to the Booking page, which will indicate that the payment was made.
10. You can also cancel the event and will see that the Payment has been refunded by MercadoPago.

Mandatory Tasks

• Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

Checklist

• I haven't added tests that prove my fix is effective or that my feature works

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 9, 2023 0:16am

[github-actions]

This PR is being marked as stale due to inactivity.

[github-actions]

Hey there, there is a merge conflict, can you take a look?

[github-actions]

This PR is being marked as stale due to inactivity.

[joeauyeung]

If we're going to merge this I would feel better if we used the SDK provided by Mercado Pago. I'm seeing in packages/app-store/mercadopago/lib/MercadoPago.ts we're still using API calls

[ubinatus]

As of today, MercadoPago is not accepting an application from country X to allow users from country Y to connect their accounts. In other words, if the CalCom<>MercadoPago application is created from mercadopago.com.mx, only users from Mexico would be able to install the app into CalCom. Yes, this sucks 100% (besides their poor DX, you guys have no idea of the pain of integrating MP 🥲).

As I DMed to Peer, this PR could be used as a reference for self-hosters.

Another alternative is to make the user create their own Developer Application in MercadoPago and add a Setup page for the app installation in CalCom (just like PayPal). However, this requires providing the user with a unique webhook URL so they can paste it into their MercadoPago applications (doable). The webhook should be unique and provide CalCom the association to a user, as the payment event data doesn't provide any helpful resource. We need to retrieve the user's data in order to i) validate the webhook signature with the particular user's webhook secret and ii) retrieve the CalCom Payment entity to call handlePaymentSuccess.

The worst alternative is creating a CalCom application in MercadoPago for each of the 7 countries, which would require adding 28 env variables. I believe it's definitely not worth the chaos.

Please let me know your thoughts. Your feedback is always appreciated.

[keithwillcode]

Thanks for the detailed input, @ubinatus. Much appreciated.

It indeed sounds like a bit of a mess at the moment so will close the PR but as you mentioned it can stay as a reference point.