Bubble.io and Sage Pay integration: Step-by-Step Guide 2024

Integrating Sage Pay with Bubble.io requires a series of specific steps. For this guide, we assume you already have a Bubble.io account and a Sage Pay account. The process would involve setting up the API through Sage Pay, moving to Bubble.io, and integrating the API.

Sage Pay API setup:

Step 1: Log in to your Sage Pay account. The login page URL typically looks like this: https://live.sagepay.com/mysagepay/login.msp

Step 2: Once you are logged in, navigate to the "Settings" tab on the left panel of your account dashboard.

Step 3: Select the “API Access” sub-tab.

Step 4: In the API access section, select "New API Key". In the pop-up window, enter a name for the API.

Step 5: Sage Pay will generate an API key for you. Make sure to save this API key, you will need it later.

##Bubble.io API setup:

Step 6: Switch to your Bubble.io account and log in.

Step 7: Once logged in, click on your app, then select the 'Plugins' tab from the left panel.

Step 8: On the Plugins page, click on the "+ Add plugins" button.

Step 9: In the search bar that appears, type "API Connector". Select the 'API Connector’ plugin developed by Bubble and click 'install'.

Step 10: Once installed, go back to your app and then from left panel, select the 'Settings' tab and then select the 'API' sub-tab.

Step 11: In the API Provider dropdown menu, select 'API Connector'.

Step 12: In this API connector page, click 'Add another API'.

Step 13: Here, you need to setup the API. Give the API a name. For the Authentication, select 'Private key'. In the Key input field, input the API key that you saved from your Sage Pay account.

Step 14: Define your API calls. You will need to define a POST method in order to let your app access the payment processing function. The POST URL is typically something like: https://pi-test.sagepay.com/api/v1/transactions For this, you will also need a payload in JSON format. The payload will contain information like Vendor Name, Transaction Type, amount and currency, card details etc. A typical JSON format for this includes:

{
  "vendorName": "your vendor name",
  "transactionType": "Payment",
  "paymentMethod": {
    "card": {
      "merchantSessionKey": "your session key",
      "cardIdentifier": "card identifier"
    }
  },
  "transactionId": "unique transaction id",
  "amount": transaction amount,
  "currency": "currency type"
}

The 'Content-Type' header should be 'application/json' and you should select 'JSON' for the 'Body Type'. Remember to replace 'your session key', 'card identifier', 'unique transaction id' and 'transaction amount' with the actual information.

Step 15: Next you can define a GET method if you want your app to be able to check transaction status. The URL for this will be typically like: 'https://pi-test.sagepay.com/api/v1/transactions/{TransactionId}'. Remember to replace '{TransactionId}' with the actual Transaction ID.

Step 16: Click on the "Initialize the call" button. If everything is set up correctly, this call will be successful and ready to use in your app.

Step 17: Now you are ready to make these API calls in your Bubble.io workflows. For example, when a user clicks on a 'Pay Now' button, you can create a workflow that makes a 'POST' API call to Sage Pay.

Conclusively, this guide has demonstrated how you can integrate Sage Pay with Bubble.io. It involved configuring the API in both Sage Pay and Bubble.io, and then using these API calls in your Bubble.io app. This will allow your Bubble.io app to process payments using Sage Pay.