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:

npm install limepay-web

Connect to the API:

const LimePayWeb = require('limepay-web');
const LimePay = await LimePayWeb.connect(LimePayWeb.Environment.Sandbox);

1. Setup the Checkout form

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.

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:

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.

3. Sign the Transactions

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.

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.

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.

That's it!

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