FlutterFlow and Sage Pay integration: Step-by-Step Guide 2024

   

• Navigate to the Sage Pay website.
• Sign up for a merchant account if you don't already have one.
• Complete the necessary verification and setup as guided by Sage Pay.

   

• Log into your Sage Pay account.
• Go to the 'Settings' or 'API' section.
• Locate your API credentials (Vendor Name, API Username, API Password).
• Copy these credentials, as you'll need them later in FlutterFlow.

   

• Open your FlutterFlow project.
• In the sidebar, navigate to 'Functions'.
• Click on 'Create New Function' to add your custom functions for initializing and processing payments.

   

• Name your function (e.g., initializePayment).
• Add the necessary parameters (e.g., amount, currency).
• Use Dart code to call the Sage Pay API POST method to initialize the payment. Here’s an example:

import 'dart:convert';
import 'package:http/http.dart' as http;

Future> initializePayment(double amount, String currency) async {
  final url = 'https://api.sagepay.com/v1/payments';

  final response = await http.post(
    url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + base64Encode(utf8.encode('$apiUsername:$apiPassword')),
    },
    body: json.encode({
      'vendor': '$vendorName',
      'amount': amount,
      'currency': currency,
      // Additional required fields...
    }),
  );

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to initialize payment');
  }
}

Replace '$apiUsername', '$apiPassword', and '$vendorName' with your actual API credentials.

   

• Name this function (e.g., processPayment).
• Add parameters such as payment information and user details.
• The function should call the Sage Pay API to process the payment. Example:

Future> processPayment(String paymentId, String cardNumber, String expiryDate, String cvv) async {
  final url = 'https://api.sagepay.com/v1/payments/$paymentId/authorise';

  final response = await http.post(
    url,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + base64Encode(utf8.encode('$apiUsername:$apiPassword')),
    },
    body: json.encode({
      'card': {
        'number': cardNumber,
        'expiry': expiryDate,
        'cvv': cvv,
        // Additional card info...
      },
      // Additional required fields...
    }),
  );

  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to process payment');
  }
}

   

• Navigate to the page where you will handle the payment.
• Add a new button or form to initiate payment processing.
• Use the 'Actions' tab to create a new action. Choose 'Custom Function' as the action type.
• Select your initializePayment function and configure the required parameters.
• On a successful response, call your processPayment function to finalize the transaction.

   

• Use FlutterFlow UI elements to display success or error messages.
• Log errors and provide feedback to users if the payment fails.
• Confirm the success of transactions by checking the status from Sage Pay response.

   

• Use Sage Pay's sandbox environment to run test transactions.
• Verify that payments are initialized and processed correctly.
• Ensure that any errors are properly handled and communicated to the user.

   

• Once testing is successful, switch to the live environment.
• Update your API endpoint to the live Sage Pay URL.
• Check that all configurations are set to production settings.
• Deploy your FlutterFlow app with the live payment functionality.

 

By following this detailed step-by-step guide, you should be able to successfully integrate FlutterFlow with Sage Pay, allowing you to handle payments securely within your application.