Introducing SC2 Pay - A SteemConnect Add-On for Seamless STEEM/SBD Payments

in utopian-io •  7 years ago  (edited)

I first used the SteemConnect V2 product when integrating a social game I had originally built on Facebook many years ago with Steem. The problem I ran into was that the payment process was not nearly as smooth and seamless as was necessary and expected within many web applications.

The process required opening the SteemConnect payment form in a separate window/tab and when that was completed either the user had to manually go back to the initial website or wait/refresh the page to see if the purchase went through. This completely messed up my single-page web application where purchases often happen in the middle of an active game (for example if you run out of time and want to buy more to finish the level).

So at the time I implemented what I feel is a better solution, where the SteemConnect transfer page is shown in an iFrame within a modal popup within the original site. Then the site queries the blockchain periodically to automatically detect when the transfer has gone through and quickly and seamlessly show the user the result of their purchase.

I have just now finally gotten around to extracting that functionality and organizing it into its own self-contained library that others can easily use in their own projects that have similar requirements.

Example From My Game: Word Chase

By default it will just use the basic Bootstrap styling, and it is up to the developer to style it to match the rest of their website. You can see how it was styled to match the design of the Word Chase game in the gif below:

How To Use

Here are the details from the readme on the GitHub project with details about how to use the add-on in your own projects:

HTML Page Setup

The SC2 Pay library requires the following dependencies:

Include all of the required libraries in the <head> element of your HTML page as shown below:

(html comment removed:  Bootstrap CSS )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

(html comment removed:  JQuery )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

(html comment removed:  Bootstrap JS Library )
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

(html comment removed:  Steem JS Library )
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>

(html comment removed:  SteemConnect V2 JS Library )
<script src="https://steemit.github.io/sc2-angular/sc2.min.js"></script>

(html comment removed:  SC2 Pay JS Library )
<script src="sc2-pay.min.js"></script>

Usage

sc2_pay.requestPayment(title, to_account, amount, currency, memo, callback);

Parameters:

  • title: The title text shown on the modal payment dialog.
  • to_account: The name of the Steem account to which the payment should be sent.
  • amount: The amount of STEEM or SBD to be paid, this should be a number and not contain the currency name.
  • currency: The payment currency. Valid values are 'STEEM' or 'SBD'.
  • memo: The memo to be included with the payment transaction. This should be something that allows your application to uniquely identify this purchase.
  • callback: This function will be called when the payment is completed or cancelled. On successful payment it will be passed a single parameter which will be a JSON object containing the Steem transaction details.

EDIT: Please Verify All Transactions on the Back-End!

I forgot to add this on the original post, thanks to @reggaemuffin for pointing it out - you should NEVER trust a front-end callback as a completed purchase. You can pass the information from the front-end call back to your own server-side code to independently validate that the transaction actually took place before awarding any products. It's not included in the scope of this project but i'm always available if you need any help with that!

Looking For Feedback

I don't have much experience making JS libraries so if I've done anything incorrectly or anyone has any comments or suggestions to improve this project and make it better please let me know in the comments or feel free to submit an issue or pull request to the GitHub repo!

Overall my hope is that this add-on can help more third party sites and services accept STEEM and SBD payments in as seamless and user-friendly a way as users are used to with other traditional payment methods.

Last, but not least, here is the GitHub link to the project: https://github.com/MattyIce/sc2-pay



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

hey man,

pardon the off-topic comment…

I made a post today regarding a large-scale idea to advance Steem’s development, and it was recommended to share with the witnesses to help get this in front of the audience who’d be in the position to do something with/about it:


The $1 Billion Steem Development Fund: How Steemit Inc.'s Stake Could Be Best Allocated To Grow A Thriving Network Of Applications And Users...

would be cool if you could have a read, and IF you feel it’d be a great idea that’d serve the community, forward to anyone in particular you know who might be in a position of influence to advance the discussion.

either way, I thank you for your continued service to this community. 🙏

cheers,

Rok

Hi @rok-sivante, no problem about the off-topic comment, sometimes that's the best way to get in touch with someone here!

I just read through your post and I very much agree that what you are proposing would greatly help grow this platform. I have posted it in a couple of channels where hopefully it will be seen by top witnesses and other influential people on the platform.

I'd be interested in talking more about this with you if you have some time for that. Not sure if you use Discord at all but i'm available there most of the time and it's a good place to chat off-chain. You can find me in the PALnet server here: https://discord.gg/9vVv9q9 with the same username as my Steem account.

cool.

I haven't gotten onto Discord, though keep getting that question - so finally signed up and sent you a message...

Great point. Tricksters could put an iframe that takes after steemconnect to get clients passwords ... There is no chance to get around this, other than doing your exchanges physically, which is essentially the best wellbeing practice you can do with regards to cryptocoins. That is the reason I think this undertaking isn't such a smart thought. Be that as it may, I do trust busy.org, for example, despite the fact that it could be traded off and my posting key could get stolen.

BLAZOW!

This is honestly incredible and something that needed to be implemented if Steemit is ever to truly compete (ie overtake) FaceBook. Obviously, there are still security concerns as have been hashed out more thoroughly in other comments, but this is definitely a step in the right direction.

I would love to be able to create some sort of Steem Blockchain based gaming app. This is a must if that is to ever happen.

I would love to be able to create some sort of Steem Blockchain based gaming app. This is a must if that is to ever happen.

That's exactly why I created this in the first place! We will get through the security concerns, working on that right now actually, and then I hope to really start taking STEEM/SBD payments to the next level.

The problem with an iframe is that the user cannot verify if he really stay on https://steemconnect.com and make easier to do phishing. Even if i'm sure you are not malicious, it's not something we want users that get use to do, for this reason i recommend users to never typing their keys if they can not verify the address of the page. We show this message before typing any keys:
image.png
If you use a new tab or a popup the user would see the address.

@fabien yes this was also pointed out by @jga below and I agree it is an issue...Do you have any thoughts of a different way to handle this? I would really, really like to be able to provide a way to make Steem/SBD payments without having the user leave the website to a new window or tab but in a way that is still secure and be verified.

I'd be super leery about using an iframe in general. I know there's some mucking around with CORS/Same Origin Policy to go through, but once that's done it's very easy for the parent page to do whatever it wants to the data found inside. The golden boy for submitting crypto payments right now is probably Metamask, which is either built into the browser or run as an extension for complete isolation.

I would go for a simple popup window, similar than what is used for service like Facebook login with apps see:
image.png

@fabien How would you get around the built-in popup blockers in most browsers with that method? Or would you just leave it up to the user to have to allow them?

If the user is truly into your application, I don't think enabling a popup window is a huge problem.

Perhaps you can give the user different options... like open in "iframe" or "popup"...

@Fabian, I promoted my post suing the promote button ,but I can't find my post in the promotion section, and 1sbd was deducted , kindly assist

Thank you for the contribution. It has been approved.

You can contact us on Discord.

[utopian-moderator]

Wow, that was the fastest approval I've ever seen! Thanks @ms10398!

We are in real tiime reviewing nowadays in Development category.

26496E96-8DC8-4F0D-B577-EFE3A94B08EB.jpeg

That's wonderful news for him on his first try.

This is great! I love seeing stuff like this happen.

One thing we do with FoxyCart which you may want to consider is HMAC encryption on the payment links. That ensures what was pushed out by the application via JavaScript / HTML comes back to the server as expected. You can find out more about what we do here.

Hey @lukestokes - thank you for your feedback! What I've implemented here is only a client-side library, so unless i'm missing something I think the HMAC encryption would be done on the server-side.

I definitely agree that all links and payment-related information should be signed/encrypted as you mentioned so that all of the information can be validated. If / when I add any server-side components to this project I will definitely include that and probably use your docs for some help!

Please let me know if i'm misunderstanding what you're suggesting though!

That sounds perfect! The challenge with purely client side tools is you can’t store any secrets. What we also do is provide a server side signing form so links can be signed and then used on static sites. A toolset like that (along with server side validation code) could be really helpful so the signed links secure what’s on the front end and the backend validates them as well.

Hi @yabapmatt, this is an excellent initiative that I would love to get involved in.

To give you some background, I work in ICO consulting (PR and marketing), but I also work in business development, have co-founded a tech startup, and I am currently creating an online course about cryptocurrencies.

I have been reading through the comments and read about the possible phishing issue with an iFrame, I am not a great at this type of programming (I focus on front-end, design and a little bit of C/databases and am not great to be honest!), so I hope that you resolve this issue.

However, I would be extremely interested in helping to develop this project by pitching it to businesses, online stores, getting articles written about it in some big cryptocurrency websites etc.

I am currently running a project called the Steemit Success Initiative, which aims to promote and grow Steemit as a platform, so this would tie in big with the ethos of my project.

Let me know if you are interested and we can talk more. Thanks again for the excellent work!

Hi @lukebrn, definitely interested. If you want to chat privately you can find me on this Discord server with the same username: @yabapmatt

Looking forward to learning more about what you're doing!

Perfect @yabapmatt, talk soon. Looking forward to it!

Very good work @yabapmatt.
One question. Many people will try to make scams. How to know that the iframe corresponds with the real steemconnect?Because when I use steemconnect I always look the in the address bar if the link is correct.

Again very good work

This is a really good question that I didn't consider! I don't have an answer other than inspecting the page source which i know is not very user-friendly. Would love to hear some ideas on this from other developers, I hope there's a way we can have integrated payments in this manner but still be able to confirm the identity of the embedded transfer page.

Yes you are right, looking the page source. Another method could be looking the autocomplete function. If the iframe is legitime then our browser will show us our user and the saved password, if it is a scam we will not see anything and it will ask us to write everything.

A good password manager should help. I use Lastpass and I have to trust that it won't give a password to the wrong site. It's a serious risk when money is involved

Good point. Scammers could put an iframe that resembles steemconnect to catch users passwords ... There is no way around this, other than doing your transactions manually, which is simply the best safety practice you can do when it comes to cryptocoins. That's why I think this project is not such a good idea. However, I do trust busy.org, for instance, even though it could be compromised and my posting key could get stolen.

What a beast !

Played that game when you first introduced it, it was quite fun actually. Can't wait to see more projects like this one to introduce Steem/SBD payments in video games !

u make my day

Looks like nice enhancement :)

Its nice, I love to seeing stuff like this happen.

I like your post

this looks like it would be useful for not only games but many applications on the blockchain

Super

Terimakasih sangat bermamfaat informasinya

what a game ...
i will play it.

Good stuff! Do you have demo we can play with?

If you're asking about a demo for the payment add-on there's an example.html file in the GitHub repo, if you're asking about the Word Chase game you can play the real thing at https://game.playwordchase.com!

Cool! Thank you so much!

OMG thank for your inovation !

Wow😱😊

More experiences for me, thanks a lot
Nice post

connect each other thank you

Wawww ,that informasion very helpful for we are beginer steemit👍

Like your post,STEEM best cryptocurrency

Love this. I WOULD HIGHLY RECOMENED THIS. Sorry about the spell and the way i write. But im dislexik . I think thats how it is spelt. But you no if you follow me things will happen.
#lmfao

nice post

The game looks dope.

Great post 👍 when you get a chance check out my page I'm new to this and I'm supporting everyone who supports me 💯👍

Leaving comments asking for votes, follows, or other self promotional messages could be seen as spam.

Your Reputation Could be a Tasty Snack with the Wrong Comment!

Thank You! ⚜

Ok cool thanks

good post, I like your post ..

I need your support please visit my blog https://steemit.com/@muliadi
if you like my post please give upvote, resteem &follow me.
thank you, keep on steemit.

  ·  7 years ago Reveal Comment

Will check this one. Just upvoted you, hope to hear from you

Hi, thanks for that wonderful feature :)
I'm not a programmer so I won't use it myself but I'll surely enjoy the benefits when other people implement it in their games/other platforms etc.

Just a question:
We have a Israel community, and we really want to translate one of your tutorials to Hebrew - can we have your permission for that? (I speak of the post about calculating your vote value)
thanks!

Yes, I would be happy to have my posts translated into Hebrew. Please share a link when it is ready :-)

I know it is not right place to place this message. But there is no other place to contact you. I have prepared a bidbased upvote bot. and tried to update it in your owner configuration section.I shows success. But not shown in status. my bot details are https://steemit.com/steemit/@mecurator/quick-update-about-our-bidbased-voting-bot

Hi @mecurator, currently your bot is too small to be listed in the bid-based voting bots section of the site. Typically I require at least 10,000 SP in the account for that. I can offer to list your bot in the other bots section of the site. Please let me know if you would like me to do that.

Thanks for response. I will be happy if you add this in other bots section.

Sorry to say. Please dont add in other bots section. I am trying to increase my vote power and then contact you. I think it is good idea.

It's a good oportunity for new steemiers like me, thanks for you contribution :)

Thank you. I were boost with @postpromoter ,
@buildawhale , @jerrybanfield , @upme ,@upmewhale , @booster and @lovejuice without understanding. I am learning Cryptocurrency. Now, I am a Newbie of Steemit from Myanmar. Nice to meet you. Thank you.

mil Gracias amigo por tan hermosa contribución. Ha sido aprobado.

You got a 45.28% upvote from @postpromoter courtesy of @postpromoter!

Want to promote your posts too? Check out the Steem Bot Tracker website for more info. If you would like to support the development of @postpromoter and the bot tracker please vote for @yabapmatt for witness!

Your good master post

Congratulations @yabapmatt!
Your post was mentioned in the hit parade in the following category:

  • Pending payout - Ranked 6 with $ 417,64

Hmm, you are really loaded, I learnt a lot from your post, all thanks to steemit that made it possible to reach ur post, thanks for sharing

Luar bias

listo!!

Hey @yabapmatt I am @utopian-io. I have just upvoted you!

Achievements

  • WOW WOW WOW People loved what you did here. GREAT JOB!
  • You are generating more rewards than average for this category. Super!;)
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Extraordinary. Steady I do not understand make JS library. Thanks for the information. Do not forget to choose me

This is some awesome crazy juice in here. Job well done. Hopefully soon we will be able to use this development of yours in so many other places. I really hope you get to tale it out there and make it bigger 😉

Wow!!
This is new for me .....

Muy buen desarrollo has creado, sigue asi para que podamos ver tu trabajo mas constantemente y en otros muchos lugares

Thank you so much for sharing, how easy you have done with simple libraries. My self bieng programmer i really liked your work. Keep it coming!!

I just came across this, thanks! You answered a question I'd been seeking an answer to.

This is actually a great development at least users can now seamlessly make payments, how secured is this means of payment? that's the only question I want to ask

Well as long as you can verify that the site is actually steemconnect.com it is very secure. As a number of commenters have pointed out, the use of the iFrame here makes that more difficult. I plan to implement some other options that have been suggested to resolve that.

Good job
Upvote me please

interesante publicación, sería muy útil implementarla. gracias

Amaizing
Please follow me back @abdulhanif thanks

Please recommend
Ask me for boarding

Thanks you.. atas informasinya

How about this post steemit connect...I want register link.

I wonder if this could be integrated with unity 3d

I would love to make a Unity asset library for Steem blockchain interaction. There's no full C# Steem library that I am aware of, but I think Unity also supports JS (someone correct me if i'm wrong here) in which case this would be much more doable.

If any Unity developers on here wanted to take on that project I would definitely support them in any way I can!

It is a bit hard to get in contact with you, I have sent you a memo and also a discord message I must add I know you are super busy but I just dont want you to miss the information sent.

Trying to get @chronocrypto bidbot on your bot tracker site, I guess you first must manually approve them the config is all set on our side.

Thank you for your great service.

Here is our bot introduction.

hi @chronocrypto - i just tried sending a test bid to your bot but haven't received an upvote yet. Once I can validate that it is working I will add it to the site.

Great job as always! Can t wait to see it implemented somewhere!

Yeah it's nice

Thanks for always feeding us "newbies" with vital informations

This is an okay inquiry that I didn't consider! I don't have an answer other than assessing the page source which I know isn't exceptionally easy to use. Would love to hear a few thoughts on this from different designers, I trust there's a way we can have incorporated installments in this way yet at the same time have the capacity to affirm the character of the implanted exchange page. Upvoted+ resteemed.@yabapmatt

loving your work here man

You learned a lot about this so successfully managed reach the top. I'm brand new.
Please help me

Dear friend
steam world you have successfully opened the edge. And you have successfully top level reached, this is my wish. And I am glad this is my practice in your development.
My request to you, I am like a small child in the steam world unknown and withut benefited.
You must know
"People for people"
So went my way in the world, steam your collaboration service.
Please do follow me and help and thanks to me

Hi @yabapmtt your video very Nice post keep for support me

Superb sir..i like this post

hi, this is a very good step for steemit community. thanks @yabapmatt
we are all appreciate that.

Nice post, please vote post me

I am grateful for the notice you post

Wooow

Wow..this is awesome,kudos to you

Wow! That is so cool! If that is going to be in in-app-transactions, that would be very nice. Good job!

Nice....up @utopian-io.

nice share
thank you

Thank you for all is amazing

Fantastic and very innovative keep up the great work!

Good post dear

  ·  7 years ago Reveal Comment

This is a valuable building tool. Thank you for sharing it!

I like it post

Sorry if I missed it, but a link to the GitHub please?

Ah my bad - I posted through Utopian which includes a link to the GitHub but forgot to add a link in the post. Will do an edit to add that, but here it is in the mean time: https://github.com/MattyIce/sc2-pay

Upvote and Follow me. From Aceh, Indonesia to the world :) @aceh.wonderful

nice post

Thank you for the contribution.....

good post, I like your post ..

I need your support please visit my blog https://steemit.com/@muliadi
if you like my post please give upvote, resteem &follow me.
thank you, keep on steemit.

excellent I am new in steemit I invite you to go through my blog to tell me how I am doing

your post very nice

NicE post

  ·  7 years ago Reveal Comment