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.   
Getting Started - Previous
Set up your Server
Next - Guides
Payments
Last updated 1 year ago