 Okay, so we're gonna get started this this setting is making me nervous feels like I'm a professor or something So I'm Alan I'm a developer advocate from both PayPal and BrainTree. I'm sure many of you may have heard of PayPal But how many of you have heard of BrainTree? Before you saw this so we're here Okay, just a couple of hands. That's good. I'm not expecting many Primarily because BrainTree isn't actually launched in Asia yet It's coming really really really really really soon And that's one of the reasons why I wanted to sort of give everyone an intro of what it is And in terms of payments and how you can integrate payments into your applications So a little about myself again. I'm Alan I'm Both for both PayPal and BrainTree and BrainTree itself is essentially a full-stack payments processing Platform that enables merchants to easily integrate using BrainTree the brain tree APIs so if you're building a mobile application or a web application if you're Selling a product or a service you can easily accept payments using a variety of payment methods from your customers All in one single integration So one of the difficulties with payments Especially if you haven't worked with payments before is that there's just way too many ways for customers to pay nowadays Even myself and my wallet I've got like three different credit cards with different banks. I've got these I've got both visa and American Express But if you were a developer and you were Looking into accepting payments from your customers You obviously do not want to work with every single credit card vendor and not to mention credit cards you know we recently saw the release of Apple Pay in North America And also if you are interested in accepting Bitcoin as well You're going to need to integrate with one of the Bitcoin wallets that are out there for example Coinbase Now this is where BrainTree comes into play Where we offer you a single integration Where you can accept all of these payments without worrying about how to integrate all of them together So it's just one single integration Which we call V.0 and it currently accepts PayPal, Venmo if you're familiar with it. It's a North American Payment platform Coinbase for Bitcoins Apple Pay, which we've just recently released the beta version of it And in the future if there are any I mean nobody knows what happens in the future, right? There could be many more future payment methods that are to come But if you have V.0 integrator or SD gate integrated It's as easy as flipping a switch to support a new payment method And that's what some of our customers in the past have seen that integrated before Apple Pay was available once it was launched We basically integrated it in the back end and all the and all our clients had to do was basically flip the switch In the control panel whether or not they want to accept Apple Pay. So very very little if any source code changes required So just some of our you know users of Bank BrainTree from all over the world Some of them are more known. No one ones like Uber, GitHub, Airbnb, Slack for example If has anybody used Airbnb here before? Okay, so you must have went through the payment process From ordering a taxi to actually having it paid you'll notice that there isn't actually any brain-free branding at all So nope if you probably wouldn't even know that it was brain. They were using brain-free as a payment Processing platform because that's what it is. We don't have any customer engagement or no customer accounts like PayPal has But it's essentially focused on helping merchants and developers process their payments in the back end So we don't do any of our branding so we leave We leave it with the companies themselves that want brand their apps the way they like it So again, it's just one. It's what we call V dot zero It's one SDK for accepting all payments and we support a lot of the native languages All of our SDKs or the versions of the SDKs are all built natively in each of the languages that we support We cover most of the mobile side with iOS and Android got Windows phone coming up soon And we're also supporting JavaScript for all the web applications as well And on terms of the server languages, we've got most of the most popular sort of languages covered like Ruby, PHP, Node.js Python, etc and To integrate with V dot zero at least on the client side. There are two different ways to do so One is through what we call the drop-in UI. Essentially we build the UI for you and say for example, you're Building an iOS application. All you need to do is just integrate the library the Bringshree iOS library Add the library to your project and then you'll be able to access the view controller And you can just push it onto your UI stack and similarly for the Android application We have the screen objects for the payment screens. So you don't have to worry about You know adding the buttons the text fields Doing all the credit card validations and things like that. Everything's all taken care of for you And I'll show you a demo of the drop-in UI in just a second. The other one obviously is a custom UI So for companies like Uber or Airbnb who really focuses on their own company branding We all they need to do is just leverage the functions that we provide through the client SDK And they don't have then they'll be building their whole credit card form the whole checkout experience And they're just using the SDK to create transactions against the Bringshree servers and Most people I talked to I would first talk about the drop-in UI just because it's so easy to do like within minutes You'll see in one of my demos within minutes You can actually have the whole payment Processing system all set up ready for your application and the great thing about the v.0 is that you'll see The interface is consistent across both mobile and web platforms So if you're providing a cross platform offering for your customers They don't have to worry about you don't have to worry about inconsistency in terms of the interfaces and how they Put in the credit card details and the whole checkout process. It's all consistent as long as you're using the v.0 drop-in APIs and In terms of the overall structure obviously you need a client application to show to your Users and you'll need also a server application To be able to serve the client token to your client as well as execute the actual transactions So sending the transaction information to Bringshree and then Bringshree will actually do the back-end execution where they take the funds out of the customer account and then Put it into your account and this is in high-level overview of how the flow works from a development perspective So on the left here, you've got your clients The first thing your client when your client starts up It's going to need a client token and this is generated by the server SDK And it's really really easy to do that and it's very similar to the way you build Applications that integrate with Facebook or Twitter You first need an application on the dashboard on the Facebook Twitter And in this case on the Bringshree dashboard and we'll provide you with the client keys and secrets that you use to set up your SDKs So once your client sets up the SDK you can then Show the screen like the drop-in UI for whenever you want to charge your customers money And once they put in the credit card details or they log in through PayPal and they click pay The SDK generates what we call a payment method not For your application and this not is basically a string that represents the payment method that the payment method that they've used And this is very very important because you as an application developer don't want to handle all the sensitive data that your Clients are passing through because you in order to do so you have to be PCI compliant payment card industry to apply And there's a lot of regulations around how you know you've got to be secure in the way you handle that sensitive data But with the payment method not all you do is you just take it and then send it to the Bringshree servers And then we'll be because the Bringshree servers are PCI compliant We'll be able to handle all that credit card data for you in the end All you really care about is getting money from your game paid from your customers to your own your own accounts So you send a payment method not to the server and on your server application. There's two things that you have to do Passing the client token to the client and then also when you get a payment method mounts You forward it to the Bringshree servers using the server side SDK and it's just one simple function call And I'll take care of everything for you So before we go to the live demo, how many of you guys are Developers or actually actual programmers can be code. Okay, just a few of you So I might go really quick on the demo I probably won't go in too much detail on the code But you will see that I have In my demo folder here, I've got the server and the clients. So basically I'm using JavaScript and HTML for my client. I'm just building a very very simple web interface And on the server side, I'm using Node.js. Again, there's tons of different SDKs available So if you're a Ruby programmer or if you are more comfortable on PHP, we've got SDKs for those as well So we just take a look at the code itself on the server side It's actually just a couple of lines of code To be able to set up your payment server and in the top here. I'm just getting the libraries I need it. You can see I'm using the Bringshree library I'm also using Express to define my API routes and The gateway here is the information that's provided to you by the dashboard So as I mentioned before you have to create an application on the Bringshree dashboard And once you have created it, you'll be able to access the control panel which looks something like this It's you've got a lot of like analytics Sales figures and things like that. Today. I'm not earning any money. Yesterday. I've got $30 Mostly due from my testing But if I go to the account My user and then I go to my API keys. You'll notice that this is already assigned to you and This is the snippet of code that you just need to copy to set up your server side SDK So you've got one for every language here I'm using node and I just need to basically copy that Which I've already done into here and that sets up my server side SDK the Bringshree SDK and I have two API routes here Which my client needs to access if you remember from the diagram what the server needs to do is it needs to Send the client token when the client requests it So I've got one API definition here called get token Which I basically call one function within the Bringshree SDK gateway.client-token.generate and then the response that I get the callback I get from the function call is basically the client token So the SDK generates a token for you and you just need to forward that to your client And then your client will use that token to set up the client side SDK The other API is the pay function so this is when the actual payment is initial initialized by the User and then your client will send the payment nods to the server and the server basically just takes the nods and then Creates it using a one of the functions in the Bringshree SDK called gateway.transaction.sale And then you specify the amount of money you want to charge which is ten dollars in this case and Then the payment method nods which is the payment method that the customer has chosen to use again You're not handling any of the data So from your perspective you don't know or you don't care whether they're paying with paypal With credit card, with Apple pay, Bitcoin, whatever You just need to pass that nod to the Bringshree servers and we'll take care of everything for you So once You know once the transaction is executed Successful area you'll get a notified response. Just for the purpose of the demo I just assume everything is successful because Bringshree is reliable So Let me just show you the client side as well. It's a very very simple interface Actually, I found nothing in there, but just one button that says pay me ten dollars And you'll see here again on the client end I'm not building the UI for the credit card form itself. What I have is I define an empty div So you'll see an empty div tag here div element with a reference an ID to it So I just need to pass that ID to the client side SDK which I do here when I set up the client side SDK And tell them this is my ID that the div ID and please populate this div element with the credit card form that the user needs Or that I need to display to the user and you'll see the form in just a bit and This part here. So this is just basically including the Bringshree client side JavaScript library and this is Basically when the web application or the web page first loads It's going to send a request to my server to get the to get the client token So you see I'm calling to get token API that I just created and once I get the token I need to pass that into the brain tree setup SDK at the function call. So it's a setup and then tell them where I want my form to be populated. So now let's Just quickly run the server here So I got my server app, node app Run that to server ready and Let's see how the client looks So you see initially, it's just a button and this is where it's getting the client token once it gets it It automatically populates the UI form. So I didn't have to build any buttons text fields. I didn't have to do any validations to it and I assume no one would probably want to lend me the credit card here So I'm just going to use my PayPal account to show you how this works So I'm just going to log in it's a very very clean interface agree and The user will see the payment method that they selected Now if I go ahead and say oh, I want to use a credit card instead I can change the payment method and I can add a new payment method if I wanted to I can add a new credit card to it as well And if you notice like all the UI that's that's coming in here, it's all pre-baked for you So you don't have to do any interface building So once I've got my payment method selected, I just need to click pay me $10 and hopefully its success There we go, and I can check in the dashboard immediately That I should have my first $10 for today, which is right here So that's just the transaction that I made and if I click on that I can actually see some of the information that I that the customer has provided You'll see here at the email I paid through PayPal the email is different because this is in sandbox So no matter what account the user is logging in with the PayPal account It's always gonna be the same email because it's all test data. So it's just a dummy Email, but if they actually pay with credit card, they'll actually have you know the last four digital the credit card information So you can always just come back to the dashboard have an overview of your sales and how everything is like And you can search up transactions as well. There are a lot a lot of other cool features in here For example, we have the vault where you can actually store customer account information So if you don't want to store it in your own database for whatever reason you can use the brain-free servers to do so And we also store the customer payment methods as well So when they come back to the to your application, they'll have those payment methods all set up already for them So they don't have to re-enter in their credit credit card details all the time And of course we support subscriptions and everything like that as well So let's go back to the slides So the next part of this talk is I want to talk a little bit about something that I hate whenever I do I do a lot of online shopping and I want to talk about like some of the user experiences that we've at brain shaft focusing on That you might not notice by just looking at the credit card form, but if you actually play around with it You'll notice that there's a lot of little things that we put in that really enhances the whole user experience because we don't all just Care about developers are important part of our ecosystem. We care about developers But also the users as well if the users don't have a good checkout experience Then our merchants aren't going to make any money So there's a really important Park on us to make sure that we get the user experience right so I want just to run through some examples I've seen in some of the online stores that I've been you know purchasing Or I've seen online and some of the things I really really hate that really turns me off even if I wanted to buy something there and Something's not the way I want it to be. I typically just navigate away from the page. So First thing here is hate the forms that sorry question. Yes. Oh No, no, okay. Okay. So if you're sorry if you have any questions, just raise feel free to raise your hand a very informal session Don't have to wait till the end So the first one that I really hate is forms that don't auto detect the credit card types So how many times have you gone to? Well, let's look at How you can do so with the credit card with the credit card digits You can actually there is actually a repository on determining the credit card type based on the credit card number that they are Submitting so if I just quickly take a look at the Wikipedia here that I just copied You can basically fake like as soon as they type in the credit card you can figure out what? Credit card type they're actually they're actually using instead of Having these forms where you have a drop-down box and you tell them what credit card you're a belt to input, right? This is just you know inconvenient. It just adds another obstacle in the whole checkout process And if you're if you're a business owner and you're a merchant you're offering, you know online payments You'll probably already be you know Very crazy about the whole checkout experience because you know that even just with one flaw in the whole checkout experience can really bring down You know a huge percentage of potential customers that are actually purchasing items off of your Applications websites or mobile applications and that was from Dell right and Dell is a big company, too Hope I didn't really hope there's no Dell employees here But also at like a coup ten like you'll have to when you're actually checking out you have to actually select The cards that you want to pay with either a mass card visa or JCB etc etc and There are actually a lot of ways that you can Build so I just want to show you some of the examples here that you have to have online and there are open-source libraries that you can actually just take in and Incorporate it into your web application like things like The jQuery credit card validated here It's got an example form that you can try and you can see if I as soon as I start typing on my first two digits It's already detected my credit card, right? Like I don't need to really tell what it is or if I do like a 5-1. It's a master card This is really just the very it's very very It's very small. It may it may you may see it as a very small factor But in the end it makes a whole lot different when the users are actually going through that whole checkout process And there's another Example as well if you like to see afterwards, I'll have the slides up on my slide share as well And that's why I like brain tree, right? So we take a lot we take a lot of notice on the details that we provide so if I went back to my My client page and if you take a look at the credit card form and that's what we do as well so With the credit card number as soon as you you know start typing your number That's when we do the when we detect the credit card on the right side. You'll see Yeah, you'll see visa and you'll see like master card as well. That's what we do The other thing is Formatting dates as it's shown on the credit card. So we all know like on our credit cards. We have Typically in the expiration date formats. It's it's usually a month month month month month and year year So like it's zero seven one five or so so on so forth But there are sites that make you have to pick in your days I mean, it's not hard to convert that number into a into the month into the actual month, but it's just another layer that of a Trouble that they have to go through and There's other examples here as well like it's it's good that they're using the numbers But they're using drop downs right sometimes a lot of times you're your the first field You put in as your car holder name and then you're used to pressing tab to go to the next field So you can start typing your expiration date, but they're making you take use your mouse or use your partner to go through the drop down which is another Not a bad experience, but another Small intricate trouble that they have to go through and with brain tree here in our credit card form We do we basically have you just need to input the numbers So if I just start putting it in zero two and then a year year Obviously, that's not about too far off, but if you say if you're entering a month like 12 Let's do a phallic one and five that's okay So we and you'll notice we all we're also showing the labels here as well So just to remind the user of what they're inputting in that field and what the format is like So these are just some of the little things that we pay attention to and The other one is not valuing the credit card numbers. This is one of the ones I really really hate So you go through this online checkout form you're putting in your first lane last name your shipping address your credit card details And you press, you know You click pay and that were check out and then they go and then they start doing the validation on the fields And they go your credit cards details are wrong and then sometimes they even reset the fields on making you refill them again and again so Don't ask. Let's concentrate on on the credit card form. Don't ask me why I'm at this website, but if you look over here as well You've got your credit card fields here Probably have the wrong image in here So in here there again there so after so this is the image after I click okay after I put in my credit card number I click okay, and then they show me a pop-up box telling me you know provide your Please please provide a ballot credit card, and then they make me enter in my credit card details again But you can actually do all of this in line in the text box field itself So you don't have to wait until they actually submit their orders And this is done by what we call the lung algorithm and you'll find a lot of information like this on the wiki page But essentially there's it there is a formula given a credit card number You can actually figure out whether or not it's a valid credit card number if you just follow the steps take the original number reverse It's a really really weird Algorithm, but you reverse it you double every second number you add it all together And if it's divisible by 10, then it's a valid credit card number So if this is all available already, I just don't understand why people aren't using it to validate it in line So that's just another I mean the number itself already gives a lot of information for you in order to Calculate things like this And there are some websites that actually don't even do any validation for you like this office depot here They've got this little description here telling you to please enter your credit card numbers without spaces or dashes Right, they've got this really really strict format that you as a user you have to follow if you want to move on with this order and Some things like this again put in a invalid credit card number and you click add your card and this is at Amazon You click add your card, and then that's when they go There's a problem with your credit card, and you have to revisit them and with our credit card form we we try to Make it less cumbersome Troublesome so as you soon as you could enter in your credit card number if it's a valid one It's okay. We don't do anything But if you put in an invalid one, that's when we you know tell you and you know There's something wrong with your card credit card and you better double check that number again So these are all done in line without them having to find out at a later point in time And the other one is also not keeping labels visible at all times now This is a slightly less of a problem, but it's also something I go through a lot as well Especially when you go to the Apple store, they do that as well They have these text holder placeholder text in each of the fields But sometimes when you start typing them you might or when you click on them as soon as you click on them The text is gone and you kind of forget what you're supposed to put it in what you're supposed to put in that field And what we do With our credit card forms is that for example once they start inputting the credit card numbers We move that placeholder text and just write above the credit card number the entry so that it reminds them of what they're It's especially important for things like expiration dates when you when you want to tell them what the exact format it is so that they can still follow through and And to keep the mind as well like so everything that's provided in those drop-in UI forms. I showed you They're all provided for you So if you're implementing any if you're implementing it on iOS and Android are on the web all of those little Key Benefits already provide for you so it does all the validation checks the credit card checks the expiration checks So you don't have to worry anything about that and you can concentrate on How you can grow your business and acquire more customers? So last but not least Are any startups here startup founders? Or for each part of startups okay, so there's this there's a initiative that we have a PayPal And a breakthrough as well. We call it the startup blueprint I'm not sure any of you have heard of it, but if you haven't it's essentially a program where We invite startups to enroll into our program and they'll be They'll get benefits like being able to waive off transactions these off of their Brandtree or PayPal integrations, so it's free for the fees are waived up to 18 months And up to $50,000 USD in PayPal or $100,000 USD for brain tree Not to mention we also have mentors as well So every startup that's enrolled in this blueprint program will have assigned a PayPal employee Or a branch of employee. That's part of our startup Evangelist team and they'll be able to help you out with whether it's a business topics or technical topics We'll be able to have constant a consultation hours. We can ask questions at any time But you can do it for email phone call or even Skype if you prefer And we have dedicated customer service so you can if you have any account issues You can also feel free to give us a call and we'll be able to help you out the media So this the whole initiative for the startup programs really to help Grow early-stage startups. So there are there are two criterias for this program So the first one is that the startup has to be less than five years old And the annual revenue cannot be more than one million dollars USD So it's targeted to their early-stage startups who are still trying to focus on growing their business And we just want to take you know one headache out of their whole strategy and That's all I have for today I'm gonna be here for the rest of the day as well. So if anyone has any questions, I'll be downstairs. Oh, we've got some now Okay, cool. Yes, that's right Yeah, yeah, yeah, so once they so the first time they actually go through the process there there is a Field where they you can get their consent to allow them to use the same payment method for future purchase purchases And everything all the payment methods are saved in the boat and and you'll be able to get access to it as well So you can provide those on the screen for them to select if they'd like and they can definitely come back and use the same Without having to going through all the credit card forms Sorry, I said that secure. I mean like you're you have their credit card information already under hold So what's stopping them from just Recycling the so so I mean there are regulations and compliance you think that we are sort of governed by Different industries around the world and we are like compliant to those and that's sort of like I guess our way of showing how We are taking care of that sense of data correctly I can tell you it's very secure Okay Yes Yes, so that's another point so it depends on what the merchant likes so if you want to be if you wanted to actually Put in the security code as well, that's a good point Yes, you can choose not to so I've given me another chance as well. I just forgot to show you this Within the control panel. So if you log into your control panel, you can actually Enable like I mentioned right you can just quickly easy talk easily toggle different payment methods You want so you can accept a demo or you can toggle to set apple pay And then when we have Bitcoin integration there will be field in there as well So it's really really simple. So when you were talking about the CVV things like the security code You can actually because I had it just for testing. I had it disabled But you can actually just enable it if you click save and then The next time I open up this application Then I'll have the CVV code in there as well So I'm not exactly familiar of how like Risky or not risky it is without with or without But I just know that you like if it's available for the merchants if they need or if they require it. Yeah, so even Yeah, so we have so it's similar to PayPal as well. We have a process for doing refunds Yeah, yeah, so I think what happens is you submit a refund case and then it gets reviewed You know either by the branch or by PayPal and then you'll get notified what happens throughout the case So as you've seen like without even any changes in the client source code You can actually configure a lot of the things that are shown on the credit card forms just to handle itself I can't disable PayPal in sandbox for some odd reason But if I if I had it in production and I didn't want PayPal I didn't want to set PayPal then all you need to just do is disable PayPal and then in this credit card form I won't have that PayPal button in there and I'll just have the credit card. So you'll strictly be accepting credit cards Yes Yeah, yeah, so In here if you go to the control panel where you can actually set up all this you can do it through API as well but much easier with the with the Panel here, I'm not sure if you can see the text but in here there's a recurring billing So you can actually set up the plans on how much you want to charge the different types of tiers So the plan ID name description price, etc If you want a trial period if you want to offer a trial period And you can do a lot cool things like this counts as well So you can say you know the first It's very common to have Merchants say the first three months are free or the first three months are half off You can actually set up those discounts as well and apply it to those plans that I'm not entirely sure But I can follow up with you offline Sorry, yes. Yeah. Yeah, so the so Yeah, so the the interface that you saw here which is the web interface It essentially looks very much the same on Iowa actually the screenshot. I showed you in the presentation here is exactly how it looks on On iOS so has the PayPal button if you enable or disable it again This is the same like if you do anything with the control panel It'll affect the changes in the client side and you don't have to Re-deploy your client. You don't have to resummit it to the app source or anything. Everything is just done on the fly. Oh Um Yeah, yeah with the card. I owe with the PayPal SDK. Yeah, you have the card. I owe I don't think we have that integrated in brain tree yet, but I'm sure it's something that we can look into Yes. Yes, it's very similar. We have the view controllers and then Yeah, yeah, that's right. Sorry So with so brain tree isn't launched yet right now you can play around with the sandbox But you'll notice you can't move with the production So all you can do right now you can test your integrations and one at once it launches You can move it production by just flicking switch So we don't have the transaction fees announced yet, but in terms of PayPal. I believe it's 3.9 percent I would expect something similar We don't have an official date or I can't say anything about the official date, but it's coming really really really Yeah, yeah, that's right Yeah, so you can actually do all your integrations using the sandbox and then when it's ready you should just flip it over to production No, not not in production yet, it's only available in North America in Europe Not yet in Asia. Well in Asia with an Asia Pacific it's available in in Australia But it's coming very soon to Nope not not any other major requirements that I know of but if you're interested You just need to go to blueprint.pavile.com and there's a link for you to request an invite. I Have a teammate that Actually leads the blueprint program in Asia that I could connect you to if you're really really interested as well He's just he's in the States right now. That's why he wasn't here, but I can definitely connect you If any of you guys are interested Okay, cool. That's good. Okay, cool. There is nothing else. Thank you guys for joining