Cloning payment methods to Stripe Connect accounts

[Music] welcome back to stripe developer office hours my name is charles and i'm a customer solutions engineer here at stripe in this week's episode of developer office hours we're going to be talking about sharing cards across from platform accounts to connected accounts for those platforms that use direct charges but need to share the customer payment methods from the platform to the connected account so why would you want to do this so imagine that you're building a platform that's a store builder you may want to enable the end customer to be able to save their card details for one merchant and then be able to use those card details for all of the other merchants that exist under your platform without having to re-enter their their payment details every single time so what card sharing allows you to do is it allows you to save the customer and the customer's payment methods on the platform account and then share it to the connected account and in this video we're going to talk about how you can use card sharing to create one-time tokens so that you can save all of the customer objects and payment methods on the platform and then whenever a user needs to use one of those payment methods for any merchant they can simply uh select the select the payment method and then just as they're about to make a payment you make a clone you consume it and then the customer is able to complete their payment without having to re-enter their payment uh information and on your end you won't have to keep state on all the different payment methods for all the different uh connected accounts for all of the different customers in your database or anything like that you'll just create these one-time ephemeral tokens and have a very lightweight easy to use approach to sharing customers across multiple connected accounts so let's before we actually run this demo let's just see what it looks like to have a to have this set up so in my stripe dashboard i actually have two things uh pulled up in two tabs i have one so what we have here is the uh strike dashboard for a platform and we're looking at a specific customer now this is a customer that has four payment methods attached to the customer object and in this setup you would store the cards on the platform but because you're doing direct charges you won't actually have any payments on the platform so in this setup you would expect to see a customer who has payment methods but then no payments and then for every connected account you would have another customer and that customer would have payments but no payment methods because you would be using one-time tokens so let's take a look at what the connected account would look like so here is a connected account that is attached to the platform that i just showed you and here's another version of that genie rosen uh customer now this is a instance of that customer on the connected account now keep in mind this customer isn't actually linked to uh the customer on the platform it just has the same information they don't keep stay with each other at all and in fact they have different customer ids but they do represent the same customer who exists in real life and as i said before when you use car sharing you're going to have payments but no payment methods now i just created this customer so there are no payments but let's see what it looks like to use a one-time token to share a card with a customer on the connected account and accept the payment now let's put it into practice we're going to generate a one-time token from the platform customers payment method their mastercard and then we're going to share it with the connected account and then we're going to make a payment and the payment is going to be attached to the customer that exists on the connected account all right great so we can see that we created the card from the platform account then we created a clone of the car and shared it with the connected account we got a new card for our connected account and we were able to use that new car to confirm our payment intent uh using the client secret on the client side and we were able to successfully make the payment now if we go into our dashboard again we will be able to see that the jenny rosen customer on the connected account has a payment but no payment methods let's just refresh here perfect so now that we know what we're doing let's get started actually building out this demo let's get started so we're going to begin by bootstrapping our app using their stripe cli if you have a stripe cli installed and you're logged in you can use the command stripe samples create to create a boilerplate app so that's what we're going to start with today we'll just type in developer office hours this is going to give us like a folder with a server and a client index date index.html file basic server file so let's do that and you can pick a server in any one of the languages that stripe supports now let's install our dependencies actually i also have some templates that i like to use so let's let's just do that okay now let's install our dependencies okay we have our dependencies installed we have our boilerplate app we uh we should be all set up here so let's just open up our code editor all right so like i said before this is what we get when we open up a uh when we open up the border plate code you get a client folder with one html file we get a server folder with a server.pi file and of course we have our requirements that we needed to install okay so this file is really really basic it uh pulls in your stripe secret key from a dot in file that has created and it has your stripe secret key if you're already logged in it also has a basic route that's just going to uh return this index.html page that has like a nice form uh where you can set up a button and things like that and then we have a webhook handler we're not actually going to be using webhooks for this example so we'll just delete that and i'm just going to set this to debug equals true so that our server refreshes every time we make a change okay let's just make sure that this works all right perfect so this looks like our example before but uh it just doesn't have any functionality it doesn't have any payment any payment methods from the platform listed so let's fix that so we're going to we're going to start by going to our server.pi file and what we're going to do is just make um an api call to the server.pi file uh we're making it what we're going to do is uh make it an api call to stripe uh specifically we're going to want to list the uh payment methods for the customer on the platform account but in order to do that we're going to actually need to get the uh customer id from that platform account so let's just hop over into the stripe dashboard so that we can get that information okay so we're in the strike dashboard and you could do this programmatically but for this example we only have one customer so we're just going to grab this customer here and as you can see this customer has four different payment methods and a customer id let's copy the customer id and hop back into our file uh let's just put this inside of the m file here let's say we'll call this the stripe platform customer id okay we're also going to need the strike connected id uh connected account id now that's that's the connected account that we're going to be making direct charges for so let's hop back over to the dashboard and grab that okay and here's the id we're just going to copy this over as well so we'll just call this the stripe connected account id and we're also going to be um we're not just going to pull the customer uh we're not going to just pull payment i payment methods from the platform customer we're also going to make those charges against a representation of the same customer but on the connected account and the reason we want to do this is so that if we ever wanted to pull all the transactions for a specific customer we would be able to do it by associating each transaction each charge with the customer on the connected account so let's hop back into the dashboard one last time and we're going to actually look at the dashboard for the connected account and not the platform this is the connected account seeing it from the uh view of the platform we can also see it directly here and here is the same customer that is represented on the platform account now you notice this has a different id because it's a different customer object they have similar information but they're not actually the same thing and what this customer is going to do is this customer is going to have payments but no payment methods because we're going to be passing it one time payment method tokens whereas the jenny rosen customer on the platform will have payment methods but it won't have any uh actual payments so let's just take a look at that here so again so the payment methods in this setup where we're using one-time tokens for one-time payments we're going to have our payment methods stored on a customer object on the platform and then we're going to have our payments actually associated with the customer object that exists on the connected account and by having this setup it will allow us to store the payment methods in a single place while also having all of our transactions linked to a customer uh in the respective connected connected account so now that we have that information let's just go back to server.pi and we are going to call this one the stripe connected customer id and paste that in there okay so now that we have that we can just pull in some of those uh values there so uh what did we call these things i'm just going to copy this i can remember what they were called so we're going to say that the stripe the platform customer is going to be equal to the platform customer and the uh connected customer it's going to be equal to os.getm this connectedcustomer and let's just get rid of this value here and the connected account customer is the connected account is going to be equal to this value here and let's clean this up here okay so we have the values that we need to build out our use case uh so let's just list the payment methods for the customer on the platform account great so now that we have the cards it's going to come in as a list we will want to actually uh render these cards uh on index.html so flash uses ginger templates which means that we can just pass it in as an argument here say cards equal to cards and later on we are going to use stripe.js and in order to use stripe.js we're going to need to pass in two things uh first because we're using um because we're using connect and we're going to be making api calls on behalf of a connect account connected account we are going to want to pass that in so that when we initialize um strike.js so let's just say the connected account equals uh the connected account we're also going to need to pass the publishable key now the publishable key is what allows stripe.js to make api calls uh or just do things in general with stripe on the client side so we're going to pass that in as well so we're going to pass the publishable key that's going to be equal to os.get hems stripe publishable key and we're going to now have to hop into our index.html file to actually make uh use of this list of cards here so our index.html file has the typical uh boilerplate that you will get with stripe samples uh mine also has uh just these two little details here um to differentiate it a bit and remind us of what we're doing uh it also has this script tag which is uh strike.js this is what this is we're going to be using to uh complete the payment on the client side and in general you're going to need this to uh do anything really with stripe on the client's eye using the strike.js library so let's just um render these cards out so what we're going to do is we have a list of cards that's being shared with the template so we're just going to make an unordered list and for every car we're going to add a list item that is a radio button that has some information about the car [Music] great so you can see that here we have our uh jinja for loop here where we're making a list item it's radio button and we're going to pass along the brand the id the last four digits of the card and then the expiration details so let's take a look at this and just save everything here okay cool so let's take a look if we refresh we should see a list of our cards and we do so these are all the cards that exist for that jenny rosen customer on the platform and if you look at these ids and these expiration dates these are all um which you would see on the dashboard for that customer and we can just verify that by popping back into the dashboard so that was the mastercard and this is also the mastercard you can see that we have the uh same id here and we also have the same expiration date so that's working as expected so the next step is going to be to actually get to the meat of this video which is sharing the car now our approach to sharing cards for this use case is going to be to create a one-time reusable token to create a one-time non-reusable token so that you can immediately uh check out one of the advantages to this approach is that we won't have to keep state on which cards exist on the platform we'll just list whatever happens to exist and then we'll create a one-time token just in time for the payment and so you'll never create a token that you won't use and you won't have to build a database or anything like that to uh or build or um set up web hooks or anything like that to essentially uh keep state on what's happening on the platform so that you can sync it with what's happening on the connected account so that's going to be our next step so let's hop back into our server.pi file or actually um yeah let's hop back into the server.pi file so what we're going to do is the first thing that we're going to do is we're going to create a route um for uh sharing a card from the platform to the connected account okay so our app our app.row is going to call it sharecard and it is going to um be uh post only and what we're going to do here is uh we're going to call it sharecard and let's think about what we're going to do here so the first thing we're going to need to do in order to share a card from the platform to the connected account is actually get the card that we want to share so uh on the front end we're just going to make sure that whatever we select we pass it on to um we pass it on to this route so let's say that the payment method and that's just a generalized uh term for cards and all other forms of payment we're going to say the payment method is the request dot json.get payment method and once we have the payment method we can actually just create a new payment method that is a duplicate of the payment method on the platform customer and share it with the connected account customer all in one call so what does this look like so what we're going to do is we're going to call um we're going to call the payment method um the payment method endpoint and we're going to pass it three parameters the first parameter is just going to be the platform customer now this is the customer that actually has the card uh the second parameter is going to be um the payment method and this is the payment method that the platform customer actually owns and then the third parameter is going to be the stripe account now this is going to be account the account that you want to uh share the card with so what's going on here again we're just getting a customer a specific card that's a link to that customer and we're saying hey stripe please create a duplicate of this account of this card and share it with this connected account that's attached to my platform now once we have this shared card what we need to return to the client is just the shared card id we don't need to we don't need to uh return the entire uh object because when you're doing client-side confirmation only thing you really need is the id of the payment method so we're just going to do that just going to return [Music] the um we'll just call this card because it's always going to be a card um we're just going to return the shared card.id and um let's see what we got here okay yeah let's just start with that and let's just add some comments as well just just in case so share the card with the share the platform customers card with the connected account okay and this is fairly self-explanatory but we'll just give it a note as well okay now let's hop back into index.html and uh begin to add some functionality to the uh the form button as well as begin to make use of strike.js so in this in this example we're just going to be doing everything in this javascript tag and the first thing that we're going to want to do is just set up stripe now what does it mean to set up stripe essentially you are going to um pass to stripe the publishable key this is what belongs to the platform and it allows you to make calls for the platform as well as calls on behalf of the connected accounts that are connected to the platform the second argument is going to be the stripe account that you're actually making calls for so by default if you just initialize uh strike.js with just a publishable key you are making calls for your platform account um if you want to make calls for the connected account and you and you do when you're making direct charges because uh that's the pattern you make a call with you make a call for a specific connected account you need to specify that here now while we while we're doing this example we'll want to see what's going on we have this debug message div here so let's just take advantage of it we're going to create a function that's going to uh just let us push messages to that div okay and eventually um that did that div is going to get really busy so we want to have some way to uh clear it out as well okay so let's see we uh we've initialized stripe and let's just put a comment for that one [Music] and we have our [Music] we have our debug function so that we can kind of log things as they happen so what do we want to do next the next thing we want to do is uh get the form so that we can start we can add an event listener and add some functionality to it so what we're going to do is we're just going to get the form and we're going to ask event listener to um submit and what we're going to do first is uh let's see well what are we trying to accomplish we want to share the card so we need to figure out which card is being uh which card is selected when we click submit so let's just do that we're going to get the card it's currently selected okay and once we have the card that's currently selected we have what we need to share the card so let's do that too share the card with the connected account using um our share card endpoint so let's do that and what we're going to do is we're just going to use fetch we're going to fetch from uh that share card endpoint and we're just going to pass it the payment method um of the card that we have so we're just going to pass in whatever card we selected and that card would be a card from uh the platform customer and we're going to get back a response with the card so let's actually add some messages in here so that we can see that these two things are actually going to be different so we're going to um put in a debug message here to say got the card from we'll just say what the card is getting the card from the platform account and let's just throw a message in here to say that we're about to create a clone and share it and let's call out to connect account and uh once we have finally gotten our response from our sure court endpoint let's just um show what that looks like so we're going to say we got a new car for our connected account and it's going to be the card okay so let's take a look at what we got here so we have we're getting the form we have an event listener we are going to just get the select currently selected card and then we're going to log it out to our debug messages div and then we're going to announce that we're creating a card um we're creating another card based on we're creating another card for the connected account based on the card that exists on the platform using our endpoint and then once we get a response from that endpoint we're just going to say we're just going to announce that we have it and see what it looks like and ideally the card here is going to look different from the card there all right so let's take a look at um let's take a look and we're just going to click the mastercard okay so that didn't work [Music] and it looks like we have an error somewhere in our server.pi file and it's a misspelling okay so that needed to be shared card so let's take a look here all right so let's try that one more time okay perfect so we have we um got the card and we got it from the uh platform account then we announced that we were creating clone from for the connected account and then after we called our share card endpoint we actually did manage to get a new payment method now this payment method represents the same card as before but it's associated with the connected account so now that we have this we can just create a endpoint that an endpoint on our server.pi file that allows us to create a payment intent and then we can hop back into our um client and actually and actually just use strike.js to confirm the car payment and we'll be done okay so let's do that so um first let's just create a new route and we're going to create a new route and this route is going to be to create a payment so we're creating a route for making a payment intent [Music] and this is [Music] pretty general here we're just going to call it create payment intent it's also going to uh be post only [Music] and uh we're going to make a minimum viable payment intent here and this payment intent is going to have an amount um it's going to have an amount and since it's going to have a currency it's going to have the stripe account and the stripe account is going to be the connected account because again we are trying to do a direct charge on the connected account it's also going to have an application fee amount just because oftentimes uh platforms do charge um their merchants a fee for facilitating payments great so we have this payment intent but we're not going to return the entire payment intent if you've seen the accepting a payment video on this very same channel you know that when you um use client-side confirmation when you are using when you're completing the payment on the client side you only need to return the client secret and this is great because it keeps you from potentially exposing information that might be sensitive on the payment intent so we're just going to uh return that client secret [Music] the payment incentive client secret so let's just do that just call this client secret and we'll say payment incent dot client secret and we'll just add a note here and because we're not returning this entire payment content we'll just make it known that we're returning the client secret great so now we are we're uh nearing the end so let's hop back to index.html and we're gonna do here is um we're going to add just one more api call now generally you want to make the payment intent call as early as possible like you might even want to do it as you're generating uh this um this html file but for this example we're just going to do it after we're just going to do it after we've gotten the card the new card for the connected account so let's do that we are going to call the create payment intent uh endpoint get the client secret and then after that we are going to confirm the card payment using stripe.confirm card payment right okay so let's start with this first step so we are going to create the payment intent and this is also going to be fetch to our uh back end but it's not going to contain any arguments because we've already defined the amount and the currency and all that good stuff um there now once we got the client secret um let's just um put it in our messages so let's say [Music] and um let's also announce that we're now that we have the client secret uh the next step is just going to be confirming the payment like we've created the payment intent we've shared the card uh we're ready to accept the payment at this point so let's just announce that we're going to confirm the payment here [Music] okay so we're just going to pass the client secret and this is what i'll let strike know that we're confirming the car payment and what car payment we're confirming and we're also going to pass in the payment method this is the payment method that is going to be charged when we actually confirm the card payment so let's just um also add the payment intent to the debug messages div so that we can take a look there's an error we'll be able to see why uh there's an error if not we'll be able to see that we were successful and verified that uh the payment intent was created against the payment method that was shared and not the payment method that exists on the platform so we're just going to json stringify this uh confirmed card payment this confirmed card payment intent [Music] and this should be it but there's only one way to find out so let's go take a look at our um our app let's see here do believe that i have a bug okay okay let's restart our server and we're just going to do a quick refresh here and we're going to select this mastercard and click pay okay perfect let's see what happens so we got the card we got the card from the platform we created a card for this connected account then we got a new card and shortly afterward we created a payment intent and got our client secret and then we confirmed the payment intent and we can see that this payment intent was successful and it was successful using the one-time token that we used for uh that we got when we shared the platform payment method with the connected account uh but this is great but like let's take a look at it in the dashboard so as i said before when you're using one-time tokens to share payment methods uh from a platform account to a connected account you'll see payment methods in the platform but you won't see payments and then in the connected account you'll see payments but you won't see uh payment methods and this has the benefit of not having more payment methods than you need in the connected account it has the benefit of not requiring you to keep state on what's happening in the platform account with the um slight disadvantage that it does put another api call in the path of making a payment but any case if this is working we should see a payment here and perhaps we did it with the wrong customer so let me just take a look here actually we were using uh i think we were using this customer instead so let's just make another payment because i believe that we may have been using the raw customer there but the uh the essential lessons of what i just showed you uh and the overall pattern remains the same even if in this case because i hardcoded the customer object that we uh made the payment for the wrong customer let's take them take a look here let's take a look here okay so actually i think there's a chance that our payment intent is not actually setting the customer so let's hop back into our server.pi file and sure enough we don't have the customer defined so um [Music] you'll want to remember that when you create a payment intent uh and you want to associate it with a particular customer make sure to define the customer and payments in so now if we make a payment this should be linked to the jenny rosen customer in our connected account dashboard so when we refresh we should we should see a payment here now okay perfect so we see the payment the payment intent it was successful we have payments no payment methods in the connected account and on the platform we have payment methods and no payments thank you so much for joining developer office hours um hopefully this was really really useful sharing payment methods with connect platforms that use direct charges is a really really great feature because it allows you to create almost like a wallet like experience for that end customer where they can really just enter in their payment information once and then they can reuse it across all of the different merchants that might be attacked to your platform when you're building a platform that doesn't have recurring payments that's not using stripe billing using a one-time just-in-time approach to building out to actually sharing payment methods is a really great approach it's very lightweight you don't have to add in additional dashboards you don't have to worry about things like using um webhooks to keep state on what cards get added and detached from the platform customer and if you're using card account updater you don't have to worry about a card being charged for an update across multiple connect accounts in addition to a platform account so this is a really great approach to sharing cards for those platforms that can afford the slight uptick in latency that they might experience if in a future video based on the response of this video we may tackle how to go about attaching uh shared payment methods to the connected account so that they can be reused so if you're interested in learning more about uh the different types of approaches to sharing cards from this approach to an approach where you would save the car and attach it to the customer on the connected account or even approach where you wouldn't do it just in time like we have here but you would proactively attach the cards let us know thanks so much for joining developer office hours i'm charles we'll see you again in another uh episode

Channel: Stripe Developers

Views: 5,497

Keywords: stripe, payments, connect, stripe connect, clone, share, payment intent, Clone payment methods, Share payment methods, Platform payment methods, Marketplace payment methods, Stripe Marketplace, Stripe Connect payment method sharing, Stripe Connect payment method cloning, clone cards, share cards

Id: ri07uPos1gs

Length: 41min 59sec (2519 seconds)

Published: Tue Dec 15 2020