You can use our platform for any number of reasons.
Maybe you’re releasing an AI-driven product or feature and you need the data provided by integrations to power its capabilities; or you’re looking for ways to improve the customer experience and you’ve pinpointed integrations as the solution; or you see integrations as essential to differentiating your product in the market and acquiring new customers.
Whatever your reasons, you see integrations as a critical part of your product strategy and you’ve landed on Merge to help execute it.
The question then becomes how you implement Merge.Â
While we’ve already made the implementation process fast and easy through our SDKs and our LLM-powered tool, Blueprint, you can accelerate your backend integration with Merge even further by leveraging ChatGPT.
We’ll walk you through the process, step-by-step, so that you can get Merge up and running in a matter of minutes.
Background before getting started
‍
We’ll implement Merge with a single ChatGPT prompt. All you need is to input two variables in the prompt:
- {X} — To indicate your frontend framework
- {Y} — To indicate your backend service
In addition, you’ll need access to the following tools:
‍
1. A Merge Account: sign-up here for free
‍2. Access to ChatGPT: sign-up here
Implement Merge Linking Flow Into Your Frontend and Backend
‍
Merge authorizes your users' integrations through a prebuilt, comprehensive onboarding tool called Merge Link. This requires Merge Link to be configured in your front end.
This modal will interact with your back end, and your back end will interact via API call with Merge to verify and authenticate an integration.
To generate code that implements Merge Linking into your app, use the following prompt (remember to fill out the variables at the end—{X} to indicate your frontend framework and {Y} to indicate your backend service):
You will be asked to implement Merge Link. Use the following code snippets to help you:
(The following is a Django Rest Framework and React implementation of Merge Link.) views.py: ``` from rest_framework.decorators import api_view from rest_framework.response import Response import requests @api_view(['POST']) def create_link_token(request): body = { "end_user_origin_id": request.data.get('organization_id'), "end_user_organization_name": request.data.get('organization_name'), "end_user_email_address": request.data.get('email_address'), "categories": request.data.get('categories', []) } headers = {"Authorization": f"Bearer {request.data.get('api_key')}"} link_token_url = "https://api.merge.dev/api/integrations/create-link-token" link_token_result = requests.post(link_token_url, data=body, headers=headers) link_token = link_token_result.json().get("link_token") return Response({"link_token": link_token}) @api_view(['GET']) def retrieve_account_token(request, public_token): headers = {"Authorization": f"Bearer {request.headers.get('api_key')}"} account_token_url = "https://api.merge.dev/api/integrations/account-token/{}".format(public_token) account_token_result = requests.get(account_token_url, headers=headers) account_token = account_token_result.json().get("account_token") return Response({"account_token": account_token}) ``` urls.py: ``` from django.urls import path from .views import create_link_token, retrieve_account_token urlpatterns = [ path('create-link-token/', create_link_token, name='create-link-token'), path('retrieve-account-token/<str:public_token>/', retrieve_account_token, name='retrieve-account-token'), ] ``` app.js ``` import React, { useState, useCallback } from "react"; import axios from 'axios'; import { useMergeLink } from "@mergeapi/react-merge-link"; const App = () => { const [linkToken, setLinkToken] = useState(null); const onSuccess = useCallback((public_token) => { // Call backend to retrieve account token axios.get(`http://localhost:8000/merge-app/retrieve-account-token/${public_token}/`, { headers: { 'api_key': 'YOUR_API_KEY' }}) .then(res => { console.log('Account Token: ', res.data.account_token); }) .catch(err => { console.error(err); }) }, []); const { open, isReady } = useMergeLink({ linkToken, onSuccess, }); // Generate link token when component mounts React.useEffect(() => { const body = { organization_id: 'ORG_ID', organization_name: 'ORG_NAME', email_address: 'EMAIL_ADDRESS', categories: ['hris', 'ats', 'accounting', 'ticketing', 'crm'], api_key: 'YOUR_API_KEY' }; axios.post('http://localhost:8000/merge-app/create-link-token/', body) .then(res => { setLinkToken(res.data.link_token); }) .catch(err => { console.error(err); }) }, []); return ( <button disabled={!isReady} onClick={open}> Preview linking experience </button> ); }; export default App; ``` The FE can also be implemented in Vue, with: ``` <template> <section> <merge-link :linkToken="ADD_GENERATED_LINK_TOKEN" v-bind="{ onSuccess }" /* :tenantConfig="{ apiBaseURL: 'https://api-eu.merge.dev' OR your specified single tenant API base URL }" */> <template slot="button" slot-scope="props"> <!-- Replace with your preferred view --> <button @click="props.onClick">Open Merge Link</button> </template> </merge-link> </section> </template> <script> import MergeLink from "@mergeapi/vue-merge-link"; export default { components: { MergeLink }, methods: { onSuccess(token) { // Pass token to your backend (Step 3) }, }, }; </script> ``` The FE can be done in vanilla JS/HTML with: ``` <button id="open-link-button">Start linking</button> <script src="https://cdn.merge.dev/initialize.js"></script> <script type="text/javascript"> const button = document.getElementById("open-link-button"); button.disabled = true; function onSuccess(public_token) { // Send public_token to server (Step 3) } MergeLink.initialize({ // Replace ADD_GENERATED_LINK_TOKEN with the token retrieved from your backend (Step 1) linkToken: "ADD_GENERATED_LINK_TOKEN", onSuccess: (public_token) => onSuccess(public_token), onReady: () => (button.disabled = false), // A value of `true` for `shouldSendTokenOnSuccessfulLink` makes Link call `onSuccess` // immediately after an account has been successfully linked instead of after the user // closes the Link modal. shouldSendTokenOnSuccessfulLink: true, // tenantConfig: { // apiBaseURL: "https://api-eu.merge.dev" /* OR your specified single tenant API base URL */ // }, }); button.addEventListener("click", function () { MergeLink.openLink(); })</script> ```
Make a full implementation of Merge Link with an {X} backend and {Y} Frontend
What’s Next?
Now that you can authorize production-quality, customer-facing integrations, the next step is to build the business logic that fits your use case.Â
To help you, we’ve built out a library of resources in our Documentation, including access to SDKs, Guides, and a Get Started onboarding center.Â