Stripe - Direct Charge
Stripe is a platform that provides payment services via different payment methods including "buy a product now and pay later" option. It works best for online payments. You only have to pay a fee on each transaction.
You can easily integrate Stripe into your no code web app on DrapCode using a simple plugin. Also, while installing the plugin, you can choose the charge type, i.e. Direct Charge, Destination Charge and Separate Charge.
Direct Charge is the default option. It allows users to make payments directly to the connected Stripe account. This charge type is used when you do not have any connected accounts.
How to Install Stripe for Direct Charge?
We have documented the whole process step-by-step for your convenience:
1. Go to Plugins
Open the Plugins page in the DrapCode builder. It contains all the avaliable external plugins. Scroll down and find the Stripe plugin. Click the Install button to start the installation process.
2. Set Up the Installation
As you click the install button, you will be redirected to the installation information page. Fill all the required fields one by one.
To get the published and secret key, you have to go to your Stripe account.
3. Login to Your Stripe Account
Go to Stripe and login to your Stripe dashboard. In case, you don't have an account then sign up and create an account.
4. Switch to the Test Mode
If you want to first run a test transaction then switch on the test mode after you have logged into your Stripe account. If you don't want to run a test transaction then skip this step.
5. Get the Keys
After switching to the test mode, scroll downwards on your dashboard to find a publishable key and a Secret Key. Copy each key one by one and paste it in the builder to install the Stripe plugin.
6. Paste the Keys
The first two fields in the installation info form are publishable key and secret key. So paste the copied keys where required and then proceed to futher steps.
7. Select the Charge Type
While installing the plugin, you have to choose the charge type, i.e. Direct Charge, Destination Charge and Separate Charge. It is an important step.
Direct Charge is the default option so you don't have change the charge type while setting a payment system for direct charge.
8. Select the Mode
By default the mode is set to be payment. The other given option is Subscription, which has to be selected if you are making a subscription payment. As we are setting up a payment system, the mode will be payment only.
9. Select Subscription Billing Frequency
You can leave this field empty as it is related to the subscription payment. As the name suggests, it allows you to set the subscription billing frequency.
10. Select Region
By default, the option "Others" is selected in this field. You can change the region as per your location.
11. Select Currency
As the name suggests, this field allows you to select the currency in which you will make the transactions. As you click on the input bar, a drop-down list will open containing different currencies. So choose the right one and proceed to the next field.
12. Payment Success URL
When you successfully install the Stripe plugin, a payment success page will get added. So for that you have to add the URL of your DrapCode project and add "payment-sucess" to it at the end.
13. Payment Cancel URL
When you successfully install the Stripe plugin, a payment cancel page will get added. So for that you have to add the URL of your DrapCode project and add "payment-cancel" to it at the end.
Once done, click the Install Plugin button.
14. Create a Collection
After installing the Stripe Plugin, set up payment UI and for that start by creating a database that contains all the products along with their price.
Go to the Collections panel and create a collection that contains all the products with their name, description and price. You can add other fields to it. But ensure it contains the fields: Name (text field), Description (large text field) and Price (number field).
15. Bind the Collection to a Data Table
Now drag-and-drop a data table into a page and open its settings to bind the product collection to it. All the fields in collection will appear in the data table.
16. Drop the Stripe Buy Now Button
A Shopping category will appear automatically as you successfully install the Stripe plugin. So, open the components panel and go to the Shopping category to drag-and-drop the Stripe Buy Now button in the data table.
17. Map the Collection Fields to the Buy Now Button
This step is an important one. So, open the settings of the added button and one by one map the name, the description and the price fields to the button as shown below.
18. Preview or Publish
Now open the page in the preview or publish mode. You will find a Buy Now button in front of each product. Click on the Buy Now button of any product to check whether the payment system works or not.
19. Add Card Details
As you click on the Buy Now button, you will be redirected to a payment details page created by Stripe. Here you can add your card details and make the payment by clicking the Pay button.
20. Payment Success
After making a successful payment, you will be redirected to the payment success page that was added automatically during the plugin installation.
21. Check the Amount Recieved
You can also check the transactional details from your Stripe account. So, open your Stripe account and go to Payments. You will see the recieved amount reflecting in the first row.
