Stripe - Separate Charge
When you have multiple connected accounts and you have to transfer amount separately.
While installing the Stripe plugin, you have to select the charge type, i.e. Direct Charge, Destination Charge and Separate Charge.
The Separate Charge allows users to make payments to multiple connected accounts where the amount gets tranferred separately.
How to Install Stripe for Separate 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. Open Webhooks Page on Stipe
To create the payment system for separate charge, you would require Webhook signing secret key. So, go back to your Stripe dashboard and open open Webhook located in the sidebar named Developers.
The Webhooks page will contain all the hosted endpoints you have created. Open he endpoint created for the project.
8. Reveal the Key
As you open the hosted endpoint page, you will find a menu bar for that endpoint. Click on the Reveal button situated under Signing Secret.
9. Copy the Key
As you click on the reveal button, the signing secret will start showing. Copy this secret key and go back to the installation on the DrapCode builder.
10. Paste the Key
After copying the signing secret key, paste it in the field marked for Webhook Signing Secret Key on the Stripe installation setting page.
11. 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 change it and select Separate Charge.
12. 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.
13. 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.
14. Select Region
By default, the option "Others" is selected in this field. You can change the region as per your location.
15. 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.
16. 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.
17. 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.
18. Stripe Connected Accounts Collection
As you successfully install the Stripe plugin, a collection named Stripe Connected Accounts will get added automatically.
19. Add Data in the Connected Accounts Fields
Open the Stripe Connected Accounts collection and add data to it. This collection contains the data related to the connected accounts. So start by adding the name of a connected account.
20. Go to Your Stripe Account >> Connect
To get the account ID, go to your Stripe account and open the Connect tab. It will showcase all the connected accounts you had created. One by one open each account by clicking on it.
21. Copy the Account ID
As you open the connected account, you will find the ID written at the right-most corner of the screen. Click on it once and it will get copied.
22. Paste the Account ID
Now come back to Stripe Connected Accounts collection and paste the copied ID in the Account ID field. Then, add the amount percentage you want to get transferred in the connected account. Once done click the Save button.
23. Add the Data of Another Connected Account
Now go back to the Stripe account and copied the account ID of the other connected account and add rest of the data as previously done.
24. Create a Collection
After adding data related connected accounts, create 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).
25. Add a Reference Field
In the collection containing the product details, add a reference field named Connected Accounts in reference to the Stripe Connected Accounts Collection and select the Name field to display records.
Once you have added a reference field, it will look like as shown below.
26. Add Data in the Reference Field (Products Collection)
After adding data related to the connected accounts, open the products collection and add data in the Connected Accounts field which is a reference connected in reference to the Stripe Connected Accounts collection.
Once you have added a connected account for each product, the collection will look like this:
27. 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.
28. 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.
29. 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.
30. 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.
31. 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.
32. Payment Success
After making a successful payment, you will be redirected to the payment success page that was added automatically during the plugin installation.
33. Check the Amount Recieved
You can also check the transactional details from your Stripe account. So, open your Stripe account and go to All Transactions tab. You will see the recieved amount reflecting in the first two row separately.
