Sage PaymentsJS-Rails Gem

The PaymentsJS-Rails gem simplifies the integration of Sage's PaymentsJS SDK by adding the PaymentsJs class and making configuring environmental variables easy.

Installation

Add to to your Gemfile:

gem 'paymentsjs-rails', ">=1.0.0"

Use Bundler to install:

bundle install

And add the following file:

config/initializers/paymentsjs-rails.rb

Then, in your app/assets/javascripts/application.js file, add:

//= require payments //this adds the pay.min.js file provided via Sage CDN

Quick Start

In your config/initializers/paymentsjs-rails.rb file, add this:

PaymentsJs.configuration do |config|
    config.mid          = "YOUR MERCHANT ID"
    config.mkey         = "YOUR MERCHANT KEY"
    config.api_key      = "YOUR API KEY"
    config.api_secret   = "YOUR SECRET KEY"
end

This will set the stationary variables, however you can also set any variable at this point if you think they won't change dynamically (postback_url is one to consider). Restart your rails application at this point.

In one of your views, add a button:

<button id="paymentButton">Pay Now</button>

And then in a script tag add:

PayJS(['PayJS/UI'],
function($UI) { 
    $UI.Initialize({
        apiKey: "myDeveloperId",
        merchantId: "999999999997",
        authKey: "ABCD==",
        requestType: "payment",
        requestId: "Invoice12345",
        amount: "1.00",
        elementId: "paymentButton",
        nonce: "ThisIsTotallyUnique",
        debug: true,
        preAuth: false,
        environment: "cert",
        billing: {
            name: "Will Wade",
            address: "123 Address St",
            city: "Denver",
            state: "CO",
            postalCode: "12345"
        }
    });
    $UI.setCallback(function(result) {
        console.log(result.getResponse());
        var wasApproved = result.getTransactionSuccess();
        console.log(wasApproved ? "ka-ching!" : "bummer");
    });
});

Take a look at the official guide from Sage for more details.

This plugin works by calling the PaymentsJs.new class to generate all the data needed. In your controller, add this:

@payment = PaymentJs.new(amount: "1.00", request_id: "Invoice12345")

You can dynamically add any variable, other than the ones set in the initializer. See further down for a list of all variables supported. The only two required for a new object are amount and request_id.

In your view, add this embedded Ruby:

PayJS(['PayJS/UI'],
function($UI) { 
    $UI.Initialize({
        apiKey: "<%= @payment.api_key %>",
        merchantId: "<%= @payment.mid %>",
        authKey: "<%= @payment.get_auth_key %>", // Calls the get_auth_key method which will generate the auth key
        requestType: "payment",
        requestId: "<%= @payment.request_id %>",
        amount: "<%= @payment.amount %>",
        elementId: "paymentButton",
        nonce: "<%= @payment.get_salt %>", // Calls the get_salt method which will inject the salt used for the auth key
        debug: true,
        preAuth: false,
        environment: "cert",
        billing: {
            name: "Will Wade",
            address: "123 Address St",
            city: "Denver",
            state: "CO",
            postalCode: "12345"
        }
    });
    $UI.setCallback(function(result) {
        console.log(result.getResponse());
        var wasApproved = result.getTransactionSuccess();
        console.log(wasApproved ? "ka-ching!" : "bummer");
    });
});

Reload the page and the payment system should work.

Configuring

Here are the required dynamic variables:

Variable	Default Value
amount:	nil
request_id:	nil
request_type:	"payment"
pre_auth:	false
postback_url:	"https://www.example.com"
environment:	"cert"

You may also want to add billing data to the object to dynamically load everything in the form, but it's your call.