Connecting Stripe to your Tangram app

Summary:

This tutorial explains how to integrate Stripe with your Tangram app. It covers two key areas: setting up the technical integration and understanding Stripe Connect for managing user payouts.

1. Stripe Integration:
   • Log in as an admin, navigate to the wrench icon → Settings → Integrations → Stripe.
   • Obtain your API keys (publishable and secret) from the Stripe dashboard under "Developers → API Keys."
   • Paste the keys into the Tangram platform, save, and switch between test or live mode as needed.
2. Stripe Connect (Optional):
   • Allows users to link their Stripe accounts to your platform for seamless payouts.
   • Enable Connect via the OAuth settings in Stripe, copying the client ID (test or live mode) into Tangram.
   • Vendors will see a guided onboarding banner prompting them to set up a bank account for payments.
   • Customize branding in Stripe Connect to ensure a seamless experience.

Finally, ensure your Stripe branding is configured to avoid user drop-offs. For further questions, contact Tangram or Stripe support at support@tangram.co

‍

Video Transcript:
‍
" Hey, everyone. Today, I'm going to show you how to connect Stripe to your Tangram app.  I'm going to go over a couple of things here. One is at a technical level, how to connect Stripe. Then I'm going to give some general advice on how most of our customers interact with Stripe and with Stripe Connect.

First off, here's how you get to the Stripe integration on your app. The first thing you want to do is log in as an administrator to your platform. Then in the bottom left, you should see a wrench icon while you're on a Tangram page.  If you click the wrench icon, and then click settings, and then navigate to integrations, there's this first button here that says Stripe.

If I click that Stripe button, I'm brought to this page where I can manage the credentials for my Stripe account.  What you'll want to do is get the, follow the instructions on this page to get the credentials that it's asking you to enter here.  For publishable key, I'm going to want to go to my Stripe account.

I'm going to put this test account in test mode. And what the steps you follow here might not match one to one with your Stripe dashboard, because Stripe does change things sometimes, but the way that you do this generally is find the place where developers go for API keys.  Right now that's developers and then API keys, and then you have publishable key and secret key here.

First we're going to get a publishable key, paste that in here, and then we're going to go get a secret key.  I'll reveal this test key, copy that. And then we'll paste that in here.

And then I'm going to go back to this form and save it.

That's the first step done. We have the publishable key and the secret key now.  Our platform will process transactions. What it will do in this particular case is it will use the test mode of this zoom boy account that I'm logged into, and it will send the transactions. to like the test account.

It will require the use of test cards if you do this one test mode. But if you wanted to do it in live mode, you would just switch this off and then get the live mode API keys instead in the same way.  The, there's a second optional step here. Once you've connected the base integration, which is to use Stripe Connect.

What Connect allows you to do is. It allows you to allow your users to connect their own Stripe accounts to your master Stripe account. And the reason that that's useful is it allows you to do seamless transfers and integrations with their payment accounts that for example, allow you to automatically do payouts.

I would say of all of the Tangram customers, probably about half of them use Connect. And whether you want to do so as up to you, I would recommend if you're interested in making things easy and you are doing automated payouts, you probably should consider using Connect. There are some additional fees in Stripe with Connect, and it does vary platform to platform.

What those fees are and how they're collected, but you'll have to figure out what applies to your account from your Stripe dashboard or from whatever like resource you have with connected Stripe, but I'm going to show you at a fundamental level, like how to use connect here, how to connect it and how, like what it actually does.

I'm back in the test account. And what I want to do first is we need to get that connect ID. So the place you'll find that is in settings under connect, under onboarding options.

You'll go to OAuth and then this test client ID here. You'll want to copy this over and paste that here. In live mode, this will, this will probably say live client ID or something like that. But what you'll want is just the credential here that starts with CA. And then once you've pasted that here and saved again, now connect is set up with your Tangerine platform.

What that actually does I'm going to actually pause the video and show you the basic connect onboarding sequence.  I'm back now, and what I've done is I've logged out of the admin account and into a vendor account on my platform. If you have Connect enabled, and you have the option to, there's an option in your Tangra map to require users to connect a bank account.

If you turn that setting on, while you have Connect enabled, users will see this banner in the top of their screen that says Stripe requires more info to process your payments. And if they click this banner, it will bring them to a guided Stripe onboarding form to set up their bank account with Stripe.

Right now, the branding in the left side of the screen here says Tangram because this is the test account for Tangram. But if I were to enter my own credentials and save them, it would show your company's branding information instead. And it would not say test mode here. It would say live mode unless you use your test credentials, which is.

Again, an option. But the way that you're going to want to customize this branding is actually quite important. If you don't customize the branding, Stripe will actually throw an error. In some cases, and your users will just drop off because it looks very sketchy without the branding options.

The way that you customize those branding options is you go to settings and you go to connect and you go to onboarding interface. And then here you can see, you know, the same UI that you just saw. And you just want to hit customize here. You can't do it while you're I'm in the test account right now, so it won't let me, but you need to go through and like follow the UI here and customize the branding and what it will allow you to do is basically upload your own logo, like here set the color scheme, et cetera.

And that will make it feel like a much more seamless experience with your application. . That's the basics of Stripe. If you have questions about anything talked about in this video or anything related to Stripe generally, we're happy to try and help you. Although we may direct you to Stripe support in some cases, depending on what you're looking to do.

But do let us know if you have any questions and we can at least point you in the right direction. Otherwise have a great rest of your day and I will catch you all later."

‍