Skip to main content

Stripe - Destination Charge

While installing the Stripe plugin, you have to select the charge type, i.e. Direct Charge, Destination Charge and Separate Charge.

The Destination Charge allows users to make payments directly to the connected Stripe account.


How to Install Stripe for Destination 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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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 change it and select Destination Charge.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

10. Select Region

By default, the option "Others" is selected in this field. You can change the region as per your location.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

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.

DrapCode Builder Stripe

14. Stripe Connected Accounts Collection

As you successfully install the Stripe plugin, a collection named Stripe Connected Accounts will get added automatically.

DrapCode Builder Stripe

15. 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.

DrapCode Builder Stripe

16. 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.

DrapCode Builder Stripe

17. 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.

DrapCode Builder Stripe

18. 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.

DrapCode Builder Stripe

19. 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.

DrapCode Builder Stripe

20. 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).

DrapCode Builder Stripe

21. 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.

DrapCode Builder Stripe

Once you have added a reference field, it will look like as shown below.

DrapCode Builder Stripe

22. 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.

DrapCode Builder Stripe

Once you have added a connected account for each product, the collection will look like this:

DrapCode Builder Stripe

23. 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.

DrapCode Builder Stripe

24. 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.

DrapCode Builder Stripe

25. 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.

DrapCode Builder Stripe

26. 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.

DrapCode Builder Stripe

27. 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.

DrapCode Builder Stripe

28. Payment Success

After making a successful payment, you will be redirected to the payment success page that was added automatically during the plugin installation.

DrapCode Builder Stripe

29. 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.

DrapCode Builder Stripe