ServiceNow Social Login and Payment gateway Widgets

Vivek Verma · ‎09-07-2020

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. — Martin

We are going to understand two topics here,

1. How to set up social media authentication as login widget in the servicenow portal.

2. Add Payment Gateway Smart Buttons on our Service Portal page.

setup Social Identity provider as login Widget

Prerequisites —

Register one Application in the Facebook developer account and keep the Application ID in the clipboard.
Create one project (If you don’t have any) in Google console and configure OAuth credential for that. Keep the client ID on the clipboard.

I have attempted a few Youtube sessions about the Paris release. That Servicenow is enhanced its feature with OpenID SSO. But OpenID is restricted to true OIDC providers such as Google and Microsoft. But Facebook is not on that list. That point of contention.

So I directly googled the “How to add login with the Facebook button on my web application.” It’s a pretty easy peasy task as per google search results. But only for modern web development.

For Our Service Portal, I have to load the JS SDK File of Facebook and Google. We can load JS SDK in the HTML part of the widget, or Widget dependency could be a handy alternative. And Transpile the ES6 code to ES5.

Facebook Developer Documents

Google Developer Documents

Hey Hey, listen, Once you get authorized with Facebook and Google. You will receive an email, first name, and last name as the response. We will use this email as the user ID to set up User-Session in servicenow. For that, we need to override the OOTB Login installation exit to our custom Login installation exit. Just authenticate the User object with email.

Facebook and Google Sign-in Feature

Add the Payment Gateway Smart button on the portal.

Paypal Smart Button

Steps —

Register a Rest App in the Paypal developer portal and create a few Sandbox accounts for testing.
Add the PayPal JavaScript SDK to your Portal page as Widget Dependency or Using Script Tag.
Once the Paypal Smart Button Dependency is loaded on your page, then validate the Paypal object in the script.
The final step would be to Render the Smart Button on your page. (Like this paypal.Buttons().render(‘#paypal-button-container’) ). And put this button container whenever you want to deploy on your portal page.

Paypal provides customization; here, I had set up the one-time transaction and immediately captured the funds into my account.

Paypal Developer Documents

Google Pay Smart Button

You must have one chargeable bank account linked with your Google Account.

Steps —

Load Google Pay API on your Portal Page. pay.js
Determine the readiness of API. isReadyToPay()
Add the Google Pay Button. createButton()
Create Payment Data request object. loadPaymentData()

Google Pay API Developer Documents

Note- Google Pay API provides Javascript Code in ES6, You have to Transpile the ES6 code to ES5. Because ServiceNow hasn’t ascended to ES6 yet.

I have used the Babel Node Package for Transpilation.

Yay! Demo Time —

Maybe I sound heretic here, but as per my experience with the Service Portal environment. ServiceNow has to break up with Angular JS and move to Modern web development Technolgy (Such as React).

In recent version releases, ServiceNow introduced Now Experience. But Now Experience is limited for Agent Workspace. I think it could be the replacement of UI16. But What is the future of ServiceNow as a CSM Platform.

And We have already seen a couple of React Based Application successfully deployed over the ServiceNow Platform.

Thanks,

Vivek||LinkedIn

Sweta24 · ‎10-01-2020

Kindly provide more details , its very hard to understand .

I tried to follow to make paypal/google/facebook integration , unable to make it .

kindly provide steps clearly

Vivek Verma · ‎10-16-2020

Apology, I missed the comment.

Please tell me where did you get stuck in implementation?

Thanks,

Vivek | LinkedIn | Medium