Implementation

Follow this step-by-step guide to integrate your deposit switch solution.

Historically, direct deposit switches have required too much coordination—not to mention paperwork—between you, your users, and their employer or payroll providers. It can be so cumbersome that many users never complete the process.

Enable your users to authorize a direct deposit switch instantly. Argyle automates account switching so that there’s no work on your end. For your users, it’s practically as simple. With just a few clicks and without leaving your platform, they can authorize a direct deposit switch or allocate a part of their wages to you.

We suggest integrating Argyle in two phases:

  1. Scoping - determine how you want to use Argyle and how to present the Argyle experience to your users.
  2. Technical implementation (this guide) - a guide to get you up and running.

Step 1: Upload your logo

Implementation logoImplementation logo

You can upload your logo under the Company details tab in your Settings menu via Argyle Console.


Step 2: Set up DDS configuration

To start, set up your direct deposit switching (DDS) configuration using the steps below. After that, it is necessary to encrypt it (step 3) and plug it into your Argyle Link configuration (step 4).

Start with the following DDS configuration, which will switch a user's direct deposit and allocate their entire paycheck to the bank account you provide:

{
    "bank_account": {
        "bank_name": "YellowHorizon",
        "routing_number": "084101234",
        "account_number": "9483746361234",
        "account_type": "checking"
    },
    "entire_allocation": true,
    "allow_editing": false
}

Typically, we see 100% of a paycheck's allocation switched for a neo bank use case. If you would like to direct a smaller percent of a paycheck as the default setting or explore other scenarios and use cases, please refer to our direct deposit switching guide.

Setting allow_editing to false ensures that the user is not able to edit their pay allocations. If you want to receive the entirety of a user's paycheck by default, but still allow the user to see and edit the previous pay allocations linked to their account, you can use this configuration instead:

{
    "bank_account": {
        "bank_name": "YellowHorizon",
        "routing_number": "084101234",
        "account_number": "9483746361234",
        "account_type": "checking"
    },
    "entire_allocation": true,
    "allow_editing": true
}

If you want to customize your DDS configuration further, please refer to our direct deposit switching guide. Refer also to Customizing Argyle Link for all customizable UI elements.


Step 3: Encrypt a DDS configuration

Encryption is necessary to ensure bank account and card details are never exposed on the front-end. To encrypt your DDS configuration, make a POST request to:

  • <https://api-sandbox.argyle.com/v1/pay-distribution-configs/encrypt> if testing in the sandbox environment;
  • <https://api.argyle.com/v1/pay-distribution-configs/encrypt> if working with accounts in the production environment.

With your payload as the DDS configuration:

//POST https://api-sandbox.argyle.com/v1/pay-distribution-configs/encrypt

//body:
{
    "bank_account": {
        "bank_name": "YellowHorizon",
        "routing_number": "084101234",
        "account_number": "9483746361234",
        "account_type": "checking"
    },
    "entire_allocation": true,
    "allow_editing": false
}

You will see a response that contains the encrypted version of your config, similar to the following:

{
    "encrypted_config": "CiQAB/5leVga/zFVJ7xWkz4+x4bt5T277xvRKEgkExIwc0OeHlMSgwIA8Gmka0AZ7qG8plQD/tytGM1DvnZ7tXH1lM+XPkq9O73P/H9ZNAsQVY6A1j7yBPDHp3qEsBn0Vtdmn9r4CIYIQ+c5bP/6e1Uqd68tCb5GDalg8b81E4jebQPe5Lb0ePJ3zeMG9G2Pv3JBsdMqaUQShu3HkIZEwjUN/ln38CC2QZzBtGyodwdinvf0tgl8Kh/wGzW5Jj2C7DO+4t3ZEBbm18ece5J5qFZG+pvPweyhaIiEVNDR7ae3toSmCLQXleIF8lfFlYAPQ0ZY99btuM8Akxb2ZixVREcs4Lu/ze4nrwpRtWbJYHK25u6KAist3Qmre0zcv4KVFmfQg9PAMpu7JvRA"
}

Step 4: Configure Link

Users need to connect their employment accounts via Argyle Link to confirm a direct deposit switch. Find an example configuration below to start:

Deposit switch Link configuration

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script src="https://plugin.argyle.com/argyle.web.v3.js"></script>
    <script type="text/javascript">
        const argyle = Argyle.create({
        linkKey: 'YOUR_LINK_KEY', // insert your Link key here. It can be found in the Argyle Console.
        apiHost: 'https://api-sandbox.argyle.com/v1', // sandbox environment is used in this example. Change to production environment before launching.
        payDistributionUpdateFlow: true,
          payDistributionConfig: /* your encrypted DDS configuration */ "CiQAB/5leYUnrNL8BtyixGfDLuwlxh2ag6zivkz6SyOcTwtrN08SyQIAfV+QlUpYcWSIKvrkz4QZvx1XPkLIvoAxzg+Liq39II2XG725ifZlTvsEDCQka2RbOsrUeOU34iZ81mSM50+ccusu8ZfS6leNgE/vul3rCtPyxy3py22rzjExgkg2M4UMh+sIaDGbUtXYK+QYu/QyhzYYNBd1Mbr/Ey4DBF4AOtbGfjMoudk5NUf8gfz+pP3p4ZrE7wYHbp5y3udhKG2+kuoLJm/3xm7rnigTAfwJlmtAlJhgAH1dpjS6iTeKrnHdyYX3Xpb3Fmtm8WRBv++h0AofSxSe3beEye2n1OuN+FyZTnJd2+gsnpwuyJKELE1EYzsQrKELL+Qf9c05UMrwLJemTgx75web1RdZaGufni84pyo5/hH8JP5iQLUY8shfxx9+Gr714YBuA5S3Oaa7WwnEauOI74R81tlQaBOXTXElxAUzTFx3rQ==",
          onAccountConnected: ({ accountId, userId, linkItemId }) => {
          console.log('Account connected: ', accountId, ' User ID:', userId, ' Link Item ID:', linkItemId) // save the accountId
        },
        onUserCreated: ({ userId, userToken }) => {
          console.log('User created: ', userId, 'User token:', userToken)
        } // save the userId and userToken
      })
      argyle.open()
    </script>
</body>

</html>
class ViewController: UIViewController {

 override func viewDidLoad() {
    let PD_CONFIG = "CiQAB/5leYUnrNL8BtyixGfDLuwlxh2ag6zivkz6SyOcTwtrN08SyQIAfV+QlUpYcWSIKvrkz4QZvx1XPkLIvoAxzg+Liq39II2XG725ifZlTvsEDCQka2RbOsrUeOU34iZ81mSM50+ccusu8ZfS6leNgE/vul3rCtPyxy3py22rzjExgkg2M4UMh+sIaDGbUtXYK+QYu/QyhzYYNBd1Mbr/Ey4DBF4AOtbGfjMoudk5NUf8gfz+pP3p4ZrE7wYHbp5y3udhKG2+kuoLJm/3xm7rnigTAfwJlmtAlJhgAH1dpjS6iTeKrnHdyYX3Xpb3Fmtm8WRBv++h0AofSxSe3beEye2n1OuN+FyZTnJd2+gsnpwuyJKELE1EYzsQrKELL+Qf9c05UMrwLJemTgx75web1RdZaGufni84pyo5/hH8JP5iQLUY8shfxx9+Gr714YBuA5S3Oaa7WwnEauOI74R81tlQaBOXTXElxAUzTFx3rQ==" // your encrypted pay distribution config
    _ = Argyle.shared
        .loginWith(
            linkKey: "YOUR_LINK_KEY", // insert your Link key here. It can be found in the Argyle Console.
            apiHost: "https://api-sandbox.argyle.com/v1") // sandbox environment is used in this example. Change to production environment before launching.
        .linkItems([]) // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.
        .payDistributionUpdateFlow(true)
        .payDistributionConfig(PD_CONFIG) 
        .resultListener(self)
  }

  @IBAction func argyleNewUser(_ sender: Any) {
    let argyle = Argyle.shared.controller
    argyle.modalPresentationStyle = .fullScreen
    self.present(argyle, animated: true, completion: nil)
  }
}

extension ViewController: ArgyleResultListener {

    func onUserCreated(token: String, userId: String) {
        print("APP: onUserCreated((token: \(token), userId: \(userId))")
        // save user token and userId
    }

    func onAccountConnected(accountId: String, userId: String, linkItemId: String) {
        print("APP: onAccountConnected(accountId: \(accountId), userId: \(userId), linkItemId: \(linkItemId))")
    }
        // rest of callbacks (all callbacks must be implemented)
}
val PD_CONFIG = "CiQAB/5leYUnrNL8BtyixGfDLuwlxh2ag6zivkz6SyOcTwtrN08SyQIAfV+QlUpYcWSIKvrkz4QZvx1XPkLIvoAxzg+Liq39II2XG725ifZlTvsEDCQka2RbOsrUeOU34iZ81mSM50+ccusu8ZfS6leNgE/vul3rCtPyxy3py22rzjExgkg2M4UMh+sIaDGbUtXYK+QYu/QyhzYYNBd1Mbr/Ey4DBF4AOtbGfjMoudk5NUf8gfz+pP3p4ZrE7wYHbp5y3udhKG2+kuoLJm/3xm7rnigTAfwJlmtAlJhgAH1dpjS6iTeKrnHdyYX3Xpb3Fmtm8WRBv++h0AofSxSe3beEye2n1OuN+FyZTnJd2+gsnpwuyJKELE1EYzsQrKELL+Qf9c05UMrwLJemTgx75web1RdZaGufni84pyo5/hH8JP5iQLUY8shfxx9+Gr714YBuA5S3Oaa7WwnEauOI74R81tlQaBOXTXElxAUzTFx3rQ==" // your encrypted pay distribution config

val config = ArgyleConfig.Builder()
    .loginWith(
        "YOUR_LINK_KEY", // insert your Link key here. It can be found in the Argyle Console.
        "https://api-sandbox.argyle.com/v1", // sandbox environment is used in this example. Change to production environment before launching.
        "")
    .linkItems(arrayOf("")) // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.
    .payDistributionConfig(PD_CONFIG)
    .payDistributionUpdateFlow(true)
    .setCallbackListener(object : Argyle.ArgyleResultListener {

        override fun onUserCreated(userToken: String, userId: String) {
            // save userToken and userId 
            Log.d("Result", "onUserCreated:  userId: $userId, userToken: $userToken")
        }

        override fun onAccountConnected(accountId: String, userId: String, linkItemId: String) {
            Log.d("Result", "onAccountConnected: accountId: $accountId, userId: $userId, linkItemId: $linkItemId")
        }
        // more callbacks available
    })
    .build()

Argyle.instance.init(config)
Argyle.instance.startSDK(this)
import ArgyleSdk from '@argyleio/argyle-plugin-react-native'

const PD_CONFIG = 'CiQAB/5leYUnrNL8BtyixGfDLuwlxh2ag6zivkz6SyOcTwtrN08SyQIAfV+QlUpYcWSIKvrkz4QZvx1XPkLIvoAxzg+Liq39II2XG725ifZlTvsEDCQka2RbOsrUeOU34iZ81mSM50+ccusu8ZfS6leNgE/vul3rCtPyxy3py22rzjExgkg2M4UMh+sIaDGbUtXYK+QYu/QyhzYYNBd1Mbr/Ey4DBF4AOtbGfjMoudk5NUf8gfz+pP3p4ZrE7wYHbp5y3udhKG2+kuoLJm/3xm7rnigTAfwJlmtAlJhgAH1dpjS6iTeKrnHdyYX3Xpb3Fmtm8WRBv++h0AofSxSe3beEye2n1OuN+FyZTnJd2+gsnpwuyJKELE1EYzsQrKELL+Qf9c05UMrwLJemTgx75web1RdZaGufni84pyo5/hH8JP5iQLUY8shfxx9+Gr714YBuA5S3Oaa7WwnEauOI74R81tlQaBOXTXElxAUzTFx3rQ==' // your encrypted pay distribution config

// Configure the SDK before hand, once. only call ArgyleSdk.start() when the UI is needed
ArgyleSdk.loginWith("YOUR_LINK_KEY", "https://api-sandbox.argyle.com/v1", "")
ArgyleSdk.payDistributionConfig(PD_CONFIG)
ArgyleSdk.payDistributionUpdateFlow(true)

ArgyleSdk.onUserCreated(res => console.log("onUserCreated", res)) // save userToken and userId 
ArgyleSdk.onAccountConnected(res => console.log("onAccountConnected", res))
// more callbacks available

ArgyleSdk.linkItems([])  // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.

// Launch the SDK
ArgyleSdk.start()

Notice the apiHost configuration parameter in the example code pointing to <https://api-sandbox.argyle.com/v1>. This ensures that the plugin starts in a Sandbox environment where you can use the Sandbox credentials below to test Argyle Link.

Save these three values to be used later:

  • accountId- the onAccountConnectedcallback passes the accountId when an employment account is successfully connected.
  • userId- the onUserCreated callback passes the userId when a user is created. The userId connects all accountIds in the case where a user has more than one employer (e.g. two part-time jobs).
  • userToken - the onUserCreated callback passes the userToken when a user is created.
    • The userToken lets you to manage the returning user experience in Argyle Link, including allowing users to revoke access to their accounts or connect additional accounts.
    • The userToken is short-lived, and should be generated using the API every time you initialize Argyle Link for a returning user.
    • The userToken ensures a user’s permissions are scoped to the same user’s data.

User tokens

User tokens are temporary access keys that allow you to start Argyle Link for an already existing user.

Recommended user tokens flow for returning users:

  1. Create a new user token by calling the /user-tokens endpoint with their userId.
  2. Provide the userToken in your Argyle Link initialization. Make sure user tokens are requested on your server-side and your client_id and client_secret are never exposed on the front-end.

Link initialization for a returning user

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
</head>

<body>
    <script src="https://plugin.argyle.com/argyle.web.v3.js"></script>
    <script type="text/javascript">
        const argyle = Argyle.create({
        linkKey: 'YOUR_LINK_KEY', // insert your Link key here. It can be found in the Argyle Console.
        apiHost: 'https://api-sandbox.argyle.com/v1', // sandbox environment is used in this example. Change to production environment before launching.
        userToken: 'USER_TOKEN', // insert the new user token here
        linkItems: [] // add Link item IDs (e.g. ‘Starbox’) if you want to constrain the Link item list in the search screen.
      })
      argyle.open()
    </script>
</body>

</html>
_ = Argyle.shared
    .loginWith(
        linkKey: "YOUR_LINK_KEY", // insert your Link key here. It can be found in the Argyle Console.
        apiHost: "https://api-sandbox.argyle.com/v1") // sandbox environment is used in this example. Change to production environment before launching.
    .linkItems([]) // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.
    .resultListener(self)

let argyle = Argyle.shared.updateToken("USER_TOKEN").controller // insert the new user token here
argyle.modalPresentationStyle = .fullScreen
self.present(argyle, animated: true, completion: nil)
val config = ArgyleConfig.Builder()
  .loginWith(
        "YOUR_LINK_KEY", // insert your Link key here. It can be found in the Argyle Console.
        "https://api-sandbox.argyle.com/v1", // sandbox environment is used in this example. Change to production environment before launching.
        "USER_TOKEN") // insert the new user token here
    .linkItems(arrayOf()) // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.
    .setCallbackListener(object : Argyle.ArgyleResultListener {

        override fun onUserCreated(userToken: String, userId: String) {
            // save userId and userToken
            Log.d("Result", "onUserCreated:  userId: $userId, userToken: $userToken")
        }
    })
    .build()

Argyle.instance.init(config)
Argyle.instance.startSDK(this)
import ArgyleSdk from '@argyleio/argyle-plugin-react-native'

ArgyleSdk.loginWith(
        "YOUR_LINK_KEY", // insert your Link key here. It can be found in the Argyle Console.
        "https://api-sandbox.argyle.com/v1", // sandbox environment is used in this example. Change to production environment before launching.
        "USER_TOKEN") // insert the new user token here
ArgyleSdk.linkItems([]) // add Link item IDs (e.g. "Starbox") if you want to constrain the Link item list in the search screen.

ArgyleSdk.start()

Step 5: Set up webhooks

To receive regular updates on a user's accounts and direct deposit update statuses, subscribe to webhooks.

Webhooks send notifications to your system every time something occurs, for example, an account is connected, removed, or updated. Read the blog post on Optimizing Workflows with Continuous Data and Webhooks to learn how Argyle clients use webhooks.

To monitor new and existing accounts, Argyle recommends subscribing to the following webhooks:

📘

Consult the Webhooks reference for a complete list of available webhooks.


Step 6: Connect test accounts and update direct deposit

update direct depositupdate direct deposit

To test the workflow, you will need to initialize Link with the configuration discussed in Step 4.

Within the Sandbox environment, Argyle provides two slightly different data sets:

  • Rideshare/Delivery — if you select a gig company like Uber or Doordash, the data has more activity information (duration, distance, etc).
  • General — if you select any other company or payroll platform, the data reflects traditional employment records.

When running in a Sandbox environment, you can connect work accounts with the provided sandbox credentials only:

BobSarahJoe
Email[email protected][email protected][email protected]
Usernametest_1test_2test_3
Passwordpassgoodpassgoodpassgood
Verification code808180828083
Phone number(800) 900-0001(800) 900-0002(800) 900-0003
Driver's licenseD1230001D1230002D1230003

Make sure to select the appropriate credentials item. For example, a company called Walmart requires username and password, while Uber requires email and password.

If you are subscribed to webhooks as recommended in Step 5, they fire upon successfully connecting an account and updating the direct deposit.


Step 7: Going live and scaling

When you are happy with your implementation and have run multiple tests in the sandbox environment, you switch over to the production environment.

Change the apiHost

First of all, you should change the apiHost in your Link configuration from:

<https://api-sandbox.argyle.com/v1>

to

<https://api.argyle.com/v1>

The same logic applies to any API requests that you have previously used, so

GET <https://api-sandbox.argyle.com/v1/employments/><accountId>

becomes

GET <https://api.argyle.com/v1/employments/><accountId>

Change the linkKey

The linkKey can be found in the API keys section of the Console in the Link key row. Use the production Link key when moving to the production environment.

Start slow

Many of our clients find it useful to connect a personal account first and run a few experiments in the production environment. If Argyle does not support your employer at the moment, you can create an account with a freelance platform like Upwork and connect that account.

Launch and scale

After testing with your personal accounts, you can test with your real users. Argyle recommends starting with a small subset of your users to make sure that everything is working as expected. From there on, roll out gradually to your full user base.