Snipcart - Plugin
Snipcart is a commerce platform that allows anyone to integrate a shopping cart to their app or website within few minutes.
DrapCode uses Snipcart to set up e-commerce functionalities such as adding a shopping cart. The whole process of integrating Snipcart is kept simple and free of any coding or complex steps.
How to Integrate Snipcart?
You can integrate Snipcart by following these simple steps:
1. Open Your Snipkart Account Settings
To start the process of integrating Snipcart plugin, login to your Snipcart account first. Then open the account settings.
2. Access the API Key
As you open the account settings, scroll down and open the option API Keys. It is where you will find the required API Key.
3. Copy the API Key
Copy the API Key and go back to the builder to paste it in the field marked to add the API Key.
4. Open Builder Plugins
Go to the DrapCode builder and open the plugins page that will display all the plugins DrapCode provides you to integrate in your web app in the easiest way possible.
5. Install Snipcart
Scroll down and find Snipcart plugin. Click the install button to start the process of integrating the Snipcart plugin in your web app.
6. Paste the API Key
As you click the install button, a page containing installation requirements will open.Start by pasting the API Key which you had previously copied from your Snipcart account.
7. Select Cart Pop Up Layout
You can either place cart's pop up layout in the side or in the full page. In the below example, it is placed in the side.
8. CLick the Install Button
Once you have pasted the API Key in the marked field for it and selected the position of the cart layout, click the Install button.
9. Bind Products Collection to a Data Table
Now create a page by dropping a data table component in it. Then, open its settings by clicking the settings icon and bind the collection containing product data to it that you want to display.
Remember, price field's field type must be number-based.
10. Drop the Buy Now Button
After successfully installing the Snipcart plugin, a Shopping category would appear in the components panel. So, open the components panel and scroll down to the shopping category. Then, drag-and-drop the Snipcart Buy Now button in the data table as shown below.
11. Bind the Collection to the Buy Now Button
After dropping the Buy Now button, bind the same collection to the added button which you had previously bound with the data table.
12. Map the Collection Fields
After binding the collection to Buy Now button. Map the collection fields to it one by one, which are Name, Description and Price.
13. Drop the Cart Button
Open the components panel and scroll down to the shopping category. Then, drag-and-drop the Snipcart Cart button anywhere in the page, as shown below.
14. Preview or Publish
Open the page in the preview or publish mode to check how does the Snipcart plugin works. As you click on the Buy Now button, the product will get added in the cart immediately.
15. Checkout
Once items are added in the cart, you can click the checkout button. It will redirect you to the billing and payment section.
16. Fill the Billing Details
Once land to the payment and billing section, add the billing details and click the button, Continue to Payment which is the next step.
17. Add Card Details
Now add your payment details, i.e. your card number, a valid date and the CVV number. once you added all the payment related information, click the Place Order button to complete the process.
