Developer Experience Required

SecureGive Checkout empowers seamless transaction processing directly within your website or application. It leverages a JavaScript client library to securely pass data to initiate transactions within our PCI Compliant payment processing interface.

Step 1. Generate a Checkout API Key

Step 2. Add the Checkout JS file to Website

Step 3. Create script

Step 4. (Optional) Full iFrame Container Custom Styling

Installation Instructions

Step 1. Generate a Checkout API Key

1. Login to your SecureGive admin dashboard.
2. Go to the Settings -> API Keys.
3. Add a new API Key with the following parameters:
   • Enter a Friendly Name
     • This is only shown in the admin dashboard.
   • Set the Category to Checkout
   • Set the Client Host URL to the location where the javascript will be used.
     • This step is required and to increase security, Checkout will not work on other domains except the one entered as the Host URL. If multiple Host URLs are needed, you can create multiple different API keys for each Host URL.
   • Choose your Key Expiration
4. Click the generate button and copy the created key to a safe place as you will not be able to access this key again.

Step 2. Add the Checkout JS file to Website

In order for Checkout to work, the SecureGive Checkout Javascript file must be installed into your page using the <script> tag as shown below.

The distributed file will output as a Javascript ES6 (2015). Please review the browser compatibility table.

`SecureGive Checkout Available Versions`
Version 1.0.0 = https://cdn.securegive.com/checkout/sg-checkout-1.0.0.min.js

// Replace `YOUR-CLIENT-ID` with the API key you generated.
// Replace source URL with the desired version of SecureGive Checkout JS.

<script type="text/javascript" src="https://cdn.securegive.com/checkout/sg-checkout-1.0.0.min.js" data-client-id="YOUR-CLIENT-ID"></script>

Step 3. Create script

Now that the Checkout JS file is installed, you can build out your request script. This will tell the Checkout JS everything it needs to be able to successfully process a transaction in SecureGive, such as the desired donation categories, the location/campus, the person information, etc...

<script>
  // The client can set some optional properties as the 4th parameter during the initialization.
  // All properties in the options are optional. This property itself is optional.
  const options = {
    "customStyle": "my-custom-class",
    "useTransition": true,
    "timeout": {
      "idleSeconds": 1800,
      "countdownSeconds": 60
    }
  }

  // Modify the payload as needed.
  const payload = {
    "categoryAmounts": {
      "1": "100",
      "3": "200"
    },
    "locationId": "2",
    "transactionType": "Donation",
    "anonymous": true,
    "message": "For the Kingdom of God",
    "guest": {
      "firstName": "Alice",
      "lastName": "Smith",
      "email": "alice@wonderland.com",
      "phone": "1234567890"
    },
    "recurring": {
      "frequency": "Biweekly",
      "delayedStartDate": 1724960108671,
      "endDate": null,
      "firstChargeDay": 7,
      "secondChargeDay": null
    },
    "sso": {
      "providerUid": "123", // this is optional.
      "oidcName": "Rock RMS",
      "categoryIdMapping": true,
      "locationIdMapping": true
    }
  };

  // Initialize the service with an event callback.
  // Only once at the beginning before using the service.
  const request = SecureGive.init(
    (trx) => {
      console.log('Created transaction:', trx);
    },
    (err) => {
      console.log('Error', err);
    },
    (state) => {
      if (state === "PROCESSING") {
        console.log(`Transaction is still processing!`);
      } else if (state === "CANCELED") {
        console.log(`Canceled!`);
      } else {
        console.log('Unknown cancelation.');
      }
    },
    options
  );

  // You then can use the request service to make multiple checkouts with different transaction payloads.
  request.checkout(payload);

  // Another simpler way to checkout is by passing the callbacks every time. In this case, the `init` method can be left out and you can go straight to the `checkout` method
  request.checkout(
    payload,
    (trx) => {
      console.log('Created transaction:', trx);
    },
    (err) => {
      console.log('Error', err);
    },
    (state) => {
      if (state === "PROCESSING") {
        console.log(`Transaction is still processing!`);
      } else if (state === "CANCELED") {
        console.log(`Canceled!`);
      } else {
        console.log('Unknown cancelation.');
      }
    }
  );
</script>

Payload Property Options

Step 4. (Optional) Full iFrame Container Custom Styling

If you would like to have full control over the styling options of SecureGive Checkout iFrame, simply create a div placeholder in the <body> section of your webpage and set the id attribute to sg-checkout.

<div id="sg-checkout"></div>

You may also need to display the window close button and implement additional scripts. To remove and destroy the checkout page, you need to make a cancelation request by executing the cancel method:

<script>
  SecureGive.cancel();
</script>

The service may send an onCanceled event to the associated callback if provided. If the request can't be fulfilled within 10s, the service will send an onError event to the associated callback if provided.