The LimePay Web-Library requires a payment form to be imported in your UI.
Install the Web-Library:
npm install limepay-web
Connect to the API:
const LimePayWeb = require('limepay-web');const LimePay = await LimePayWeb.connect(LimePayWeb.Environment.Sandbox);
Add the following HTML to your page:
<form id="checkout-form" onsubmit="process()"><!--Field for CC number--><label for="card-number">Card Number</label><div id="card-number" data-bluesnap="ccn"></div><div id="card-logo"><img src="https://files.readme.io/d1a25b4-generic-card.png" height="20px"></div><span class="helper-text" id="ccn-help"></span>​<!--Field for CVV number--><label for="cvv">CVV</label><div id="cvv" data-bluesnap="cvv"></div><span class="helper-text" id="cvv-help"></span><!--Field for Exp Date--><label for="exp-date">Exp. (MM/YY)</label><div id="exp-date" data-bluesnap="exp"></div><span class="helper-text" id="exp-help"></span><button type="submit" id="submit-button">Pay Now</button></form>
NOTE: Since v0.3.6 you are not required to add the form HTML element. For more information visit the Web-Library Changelog.
To start up, the Web-Library needs a lime token retrieved by your LimePay SDK when you create Payment. To see how to create Payment, please follow Set up your Server guide.
Once you have created a payment and received the lime token, use it to load the payment:
LimePay.FiatPayments.load(limeToken).then(result => {const fiatPayment = result;});
NOTE: More information on how to load payments can be found in the Web-Library Documentation.
Your user has to sign the Ethereum transactions that have to be executed:
fiatPayment.signWithLimePayWallet(walletPassword); // returns Promise<>
NOTE: The example above shows how you can sign transactions for a shopper that uses LimePay Wallets. More information on the other ways you can sign your user's transactions can be found in the Web-Library Documentation.
Once your user fills his Credit/Debit Card information and signed the transactions, you can submit the payment for processing.
fiatPayment.process(cardHolderInformation, signedTransactions).catch(error => {});
You have successfully submitted the payment for processing once the .process
promise resolves.
NOTE: More information on how to process payments can be found in the Web-Library Documentation.
Congrats! You have successfully provided your users with the ability to execute Ethereum transactions with their Credit/Debit card.