The Basics
Rutter Link is the client-side component that your users will interact with in order to link their accounts to Rutter and allow you to access their accounts via the Rutter API.
Rutter Link will handle credential validation, OAuth, and error handling for each platform that we support. Link works across all modern browsers and platforms, including web, iOS, Android, and mobile webviews.
Web
On web instances React & Javascript, loading the Rutter JS will create a global Rutter
object on the window
object. To open the Merchant Auth flow, you must call Rutter.create()
while passing in your public_key
, and then open()
on the resulting object.
Create
The create
function takes in an object as an argument. Below is an example:
const rutterInstance = Rutter.create({
publicKey: "YOUR_RUTTER_PUBLIC_KEY",
onSuccess: function (publicToken) {
// Send publicToken to your backend and exchange
// https://docs.rutterapi.com/reference#exchange-tokens
console.log("public token: " + publicToken)
},
onError: function (error) {
console.error(error)
}
})
After the Rutter Instance is created, the resulting object has the following functions:
Open
The open
function opens the Merchant Auth popup, and will return a publicToken
after a successful authentication to the callback you specified in the create
function above. Below is an example:
// Assuming rutterInstance has already been created as shown above
// Opens the Rutter popup
rutterInstance.open()
// Opens the Rutter popup directly to the Shopify Auth Step
rutterInstance.open({
platform: "SHOPIFY"
})
Troubleshooting
You should set your Cross-Origin-Opener-Policy policy to be same-origin-allow-popups
or Rutter Link will fail to communicate with your application. The reason for this is that Rutter Link uses the window.postMessage()
method to communicate between the popup and the parent window.
You can use the debug
mode to see what's going on under the hood. To enable debug mode, set the debug
property to true
when creating instantiating Rutter Link.
Source Code
The source code for Rutter Link Base is available on Github. This is the code that's used to generate the Rutter Link Javascript and React libraries. It is responsible for communication between the parent window and the popup.