Connecting to the Stripe API

1. Create an API Key in Stripe

   Start out by going to your Stripe Dashboard and navigate to the API Key tab. Ensure you have the Test Mode toggle turned on at first, and get your app working properly before connecting to production data. If your Stripe store is already live, you can create a separate test store to be safe. 

   1. Click the + Create restricted key button in the bottom right
   2. Name the key
   3. Select write access for Charges (or any other scopes needed for your use case)
   4. Scroll to bottom and click Create key to save the key
   5. Click Reveal test key, and leave this page open to copy in the next section

2. Creating an Authenticated API Datasource in Appsmith

   Next, open a new Appsmith app, or an existing app you want to integrate with Stripe. Click the Data icon on the left sidebar and create a new Authenticated API Datasource. 

   

   Fill in the form as follows:

   Name	Give the Datasource a title. It helps to also add your name, when working with a team.
   URL	https://api.stripe.com
   Authentication Type	Bearer token
   Bearer token	YOUR_API_KEY

   Notice the green lock icon on the Bearer token field. This indicates the field is encrypted on your self-hosted Appsmith server, and will never be sent to client applications. More on security here. 

   Click SAVE. Your Datasource is now connected and ready to use. 

3. Listing Charges and Refunds

   Next, add a new API under the Stripe Datasource. If you're still viewing the Datasource, you can use the + New API button in the top right to add an API to it. Or go to the Queries tab and click + to add a new API, then select the Stripe Datasource. You can also use cmd-shift-+ (mac) or ctrl-shift-+ (windows) to quickly add a new API. 

   You should see the URL prefilled with https://api.stripe.com with a blue bar around it, indicating that this API is part of a Datasource and will inherit the Authentication settings. 

   Configure the API as follows:

   Name	getCharges
   Method	GET
   URL	/v1/charges
   Body Type	FORM_URLENCODED
   Key #1	limit
   Value #1	20

   Click RUN and you should get back a 200 response with a list of any Charges in your account.

   

   The response can be accessed at getCharges.data. In this case, the response is an object containing another property called data, containing the array of Charges. 

   Displaying Data in a Table Widget

   Now switch over to the UI tab and drag in a Table Widget and name it tbl_charges. 

   Then set the Table's Data to:

   {{getCharges.data.data}}

   

    

   Listing Refunds

   Now follow the same steps to add the getRefunds API. Use the same settings at above, except the URL is /v1/refunds this time. 

   Then drag in another Table Widget, name it tbl_refunds, and connect it to getRefunds.data.data. 

   

    

4. Creating a Refund

   Select the tbl_charges Table, and click the + add new column button, then set the column type to Button. You may want to also drag the new column to the top of the list to make the button easier to see without scrolling. 

   

   Now add a POST API under the Stripe Datasource and name it createRefund. 

   Set the Body Type to FORM_URLENCODED and add the following parameter:

   Key	charge
   Value	{{tbl_charges.triggeredRow.id}}

   Then go to the API's Settings tab and turn on Request confirmation before running API. 

   Lastly, connect the Button to the API. Select the tbl_charges Table and enter the settings for the Refund Button column. 

   1. Set the onClick event to trigger the createRefund API
   2. Set the createRefund callback to run the getRefunds API, so you can see the new refund in the refunds table. 
   3. Set the getRefunds callback to run the getCharges API, so you can see the refunded amount on the charge. 
   

   Your app should be ready to test out! 

   Select a charge that has not been refunded and click the REFUND button. You should see the confirmation dialog. Click Yes to confirm and you should see both the new record in the Refund table, and the updated refund amount in the Charges table. 

5. Refunding a Payment Intent

   Newer Stripe stores may be using Payment Intents, instead of Charges. You can use the same createRefund API to refund Payment Intents as well. Just change the Key from charge to payment_intent. And instead of getCharges, set up an API and table for the /v1/payment_intents endpoint. 

   

   Payment Intents work a little differently, so you won't be able to refund an intent unless it's in the right status. See the Stripe API Docs for more details. 

Conclusion