HomeGuidesRecipesAPI ReferenceChangelog
Log In
Guides

How to create a Plaid payment

Suggest Edits

🔗 Enabling Plaid Payments in DTR via Unblock

We enable the integration of Plaid payments in DTR to allow customers to initiate a fiat-to-crypto transaction using their own bank accounts. This integration opens a Plaid interface with pre-populated recipient details, streamlining the onboarding and transaction experience with Unblock's banking partner.

🚀 Integration Overview

To enable this feature, follow these two steps:

  1. Obtain a Link Token
    Use the endpoint below to fetch a link token from the Unblock API:
    📘 POST /user/open-banking/payment

  2. Integrate the Plaid Link Interface
    Host the Plaid Link interface on your platform (e.g., a web application).
    📘 Plaid Web Integration Docs

🧪 Basic Web App Integration

Here's a simple web app example that demonstrates how to embed the Plaid flow. In order to run it please open an index.html file in your browser.

📄 app.js

let handler = null;

document.addEventListener('DOMContentLoaded', function () {
    const linkButton = document.getElementById('link-button');
    linkButton.addEventListener('click', initializePlaid);
});

async function initializePlaid() {
    try {
        // Get the link token from your server, which calls the Unblock API
        const response = await axios.post('/api/create_link_token');
        const { link_token } = response.data;

        handler = Plaid.create({
            token: link_token,
            onSuccess: (public_token, metadata) => {
                // Show success message with institution info
                const resultsDiv = document.getElementById('results');
                resultsDiv.style.display = 'block';
                resultsDiv.innerHTML = `
                    <h3>Connection Successful!</h3>
                    <p>Institution: ${metadata.institution.name}</p>
                `;
            },
            onExit: (err, metadata) => {
                if (err) {
                    console.error('Error during Plaid Link flow:', err);
                }
            },
        });

        handler.open();
    } catch (error) {
        console.error('Error initializing Plaid:', error.response?.data || error.message);
    }
}

📄 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plaid Test App</title>
    <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Plaid Test Application</h1>
        <button id="link-button">Connect a bank account</button>
        <div id="results"></div>
    </div>
    <script src="app.js"></script>
</body>
</html>

📄 styles.css

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2d7d9a;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 20px 0;
}

button:hover {
    background-color: #1f5c73;
}

#results {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: none;
}

📌 Notes

•	Make sure the endpoint /api/create_link_token on your server handles authentication and calls the Unblock API correctly.
•	The link_token is short-lived and should be generated fresh for each session.
•	For production use, ensure error handling and session management are robust.

Updated 17 days ago

What’s Next