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:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script src="https://steemit.github.io/sc2-angular/sc2.min.js"></script>
<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