Set up your Client
The LimePay Web-Library requires a payment form to be imported in your UI.

1. Install and Connect to the API

Install the Web-Library:
1
npm install limepay-web
Copied!
Connect to the API:
1
const LimePayWeb = require('limepay-web');
2
const LimePay = await LimePayWeb.connect(LimePayWeb.Environment.Sandbox);
Copied!

1. Setup the Checkout form

Add the following HTML to your page:
1
<form id="checkout-form" onsubmit="process()">
2
<!--Field for CC number-->
3
<label for="card-number">Card Number</label>
4
<div id="card-number" data-bluesnap="ccn"></div>
5
<div id="card-logo">
6
<img src="https://files.readme.io/d1a25b4-generic-card.png" height="20px">
7
</div>
8
<span class="helper-text" id="ccn-help"></span>
9
10
<!--Field for CVV number-->
11
<label for="cvv">CVV</label>
12
<div id="cvv" data-bluesnap="cvv"></div>
13
<span class="helper-text" id="cvv-help"></span>
14
15
<!--Field for Exp Date-->
16
<label for="exp-date">Exp. (MM/YY)</label>
17
<div id="exp-date" data-bluesnap="exp"></div>
18
<span class="helper-text" id="exp-help"></span>
19
20
<button type="submit" id="submit-button">Pay Now</button>
21
</form>
Copied!
NOTE: Since v0.3.6 you are not required to add the form HTML element. For more information visit the Web-Library Changelog.

2. Load Payment

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:
1
LimePay.FiatPayments.load(limeToken)
2
.then(result => {
3
const fiatPayment = result;
4
});
Copied!
NOTE: More information on how to load payments can be found in the Web-Library Documentation.

3. Sign the Transactions

Your user has to sign the Ethereum transactions that have to be executed:
1
fiatPayment.signWithLimePayWallet(walletPassword); // returns Promise<>
Copied!
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.

4. Submit the Payment for processing

Once your user fills his Credit/Debit Card information and signed the transactions, you can submit the payment for processing.
1
fiatPayment.process(cardHolderInformation, signedTransactions)
2
.catch(error => {});
Copied!
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.

That's it!

Congrats! You have successfully provided your users with the ability to execute Ethereum transactions with their Credit/Debit card.
Last modified 2yr ago