stripe/braintree - help a brother out

unwashed potato! · 26 Oct 2018 at 00:05

i've been struggling with this for the past week. i actually attempted it a year ago and got no where so put it on the todo list, but i'm currently trying again with no real progress for the time it's taken.

i've been at it with stripe for the most part, trying to get this set up with a nice form, but i'm finding a straight forward guide that applies to my site with no framework impossible to locate.

can someone please help me out.

is it possible to have something like stripe, or preferably braintree (as i hear better things about it) added to a site that has no shopping cart, no wordpress, no framework etc? it's just a custom made site that i want to add a payment section to on a standard form

i've made some improvement to this page that are only local, but essentially it's the link below where there would be a payment form included. the user would have been given a price before visiting this page with a quote ref, which knows the total amount and would be able to be fed to the payment form.

https://www.mayercleaning.co.uk/book-online/cleaning/?service=moving

is this doable? if so, any suggestions as to a simple guide that works for me? everyone i try, like the following link, acts as though you're all set by showing you a small bit of code, but leaves out that it's for some framework and i've just wasted half a day figuring that out.

https://codepen.io/rcdexta/pen/eZPbzB

Cromulent · 27 Oct 2018 at 11:37

What language is the website written in? Just find the Stripe or Braintree SDK for that language, and it will tell you everything you need to know to integrate it with your website backend.

rainbowGuy · 27 Oct 2018 at 12:43

the workflow is simple, you show the price, include a SDK (JS) for stripe.. which opens a modal where user enters their card/address and then pres submit, js does its stuff and then redirects to a URL that you create with a stripe token - you then use this to actually charge the customer & redirect to the thank you page..
you can also store users cust token and then charge user again instead of getting user to enter their card..

unwashed potato! · 27 Oct 2018 at 22:40

thanks. i've google braintree sdk php but what i'm finding says i need this or that framework?

UberTiger · 27 Oct 2018 at 23:08

https://developers.braintreepayments.com/start/overview

Looks like they have some example integrations you can reference too

unwashed potato! · 28 Oct 2018 at 22:53

so i'm following this link

https://braintree.github.io/braintree-web-drop-in/docs/current/#setup

i've put all the code they say on the page, and nothing happens. this page is called the set up page, but offers almost no script but a minimal amount to put. is this guide no good then i take it or am i missing something?

touch · 29 Oct 2018 at 16:36

If you're not sure what you're doing, go for a hosted payment gateway rather than an integrated solution on your own site (eg, direct users to paypal website to enter payment info and redirect back after payment).
Payment is something you really need to do right. If you get it wrong, that could be anything from overcharging/double-charging to leaking card details to a third-party.

You'll probably also need to have a PCI-compliant server for the site if you're handling card details (even if you only take those card details and pass them to some payment API without storing them).

unwashed potato! · 29 Oct 2018 at 17:30

i'm sure i can do this on my site, it's just the guides are imo not clear at all. the guides will show you only half the code actually required

touch · 29 Oct 2018 at 22:50

Fairly sure the answer is no said:
i'm sure i can do this on my site

Yes, I'm sure you can do it.
Are you also sure that your code is secure? Not just the code which submits the payment, but the entire site. Nobody will be able to find a vulnerability and sniff the card details you're passing around?

unwashed potato! · 29 Oct 2018 at 23:08

no more or less than any other wordpress/cart style site i guess. i feel we've got some basic good security, but always open to improving.

i was under the impression the great thing about these services is that they are secure, that they deal with all the details and security of the input fields etc

sb89 · 30 Oct 2018 at 07:09

https://braintree.github.io/braintree-web-drop-in/

Viewing the source for that page might help you a bit.

touch · 30 Oct 2018 at 09:26

Fairly sure the answer is no said:
i was under the impression the great thing about these services is that they are secure, that they deal with all the details and security of the input fields etc

Maybe I havn't understood what you're trying to do.
Your OP said you wanted to add a payment section to a "standard form". I assumed that meant you wanted to accept the payment details through your own site and pass them to an API somewhere to process the payment.
Looking at the example @sb89 posted for how the braintree web drop in works, that's different to what I was expecting (it opens a popup window where you enter the payment details).

If you have the payment fields on your own site, any code anywhere on your page can access those fields so your entire page code needs to be secure.

If you use the popup window option, your code can't access any of the user input fields there so security from your side is less important.

unwashed potato! · 30 Oct 2018 at 12:48

sb89 said:
https://braintree.github.io/braintree-web-drop-in/

Viewing the source for that page might help you a bit.

it doesn't as there's still code missing.

the official documentation seems unneccesarily complex, but then any guide there is skips steps.

it's odd as usually i'd expect to find someone with a guide, but also with the files to download, then you just copy paste the bits into the correct place, editing the id and keys, and done.

but not with braintree it seems

touch · 30 Oct 2018 at 14:39

Fairly sure the answer is no said:
it doesn't as there's still code missing.

That page has everything you need. Use developer tools to look at the code on the page, not a separate reference guide.
Look through the code to see all of the options they've used and just edit it to fit your own requirements.
Here's a cut-down version with the minimum you need to make it work:

Code:

<script src="https://js.braintreegateway.com/web/dropin/1.13.0/js/dropin.min.js"></script>
<script>
braintree.dropin.create({
    authorization: 'sandbox_f252zhq7_hh4cpc39zq4rgjcg',
    container: '#dropin-container'
}, callback);
function callback(){}
</script>
<div id="dropin-container"></div>

unwashed potato! · 28 Apr 2019 at 18:24

i'm trying to make some progress with this.

i have the drop in UI now working, and when you enter card details, it'll come back with a nonce and a load of other details

what i'm struggling to figure out is how to get that information so that it can be used/stored.

at the moment this is what's given back .

Code:

{
  "nonce": "tokencc_bh_12324_65645645_94554456_r5prjt_236",
  "details": {
    "cardType": "Visa",
    "lastFour": "4242",
    "lastTwo": "42"
  },
  "type": "CreditCard",
  "description": "ending in 42",
  "binData": {
    "prepaid": "Unknown",
    "healthcare": "Unknown",
    "debit": "Unknown",
    "durbinRegulated": "Unknown",
    "commercial": "Unknown",
    "payroll": "Unknown",
    "issuingBank": "Unknown",
    "countryOfIssuance": "Unknown",
    "productId": "Unknown"
  }
}

this is currently in <pre> for easy reading, though i can easily change this to be inside whatever, the information for me isn't usable as it's just one big bit of text.

Any suggestions?

Cromulent · 28 Apr 2019 at 18:27

Fairly sure the answer is no said:
i'm trying to make some progress with this.

i have the drop in UI now working, and when you enter card details, it'll come back with a nonce and a load of other details

what i'm struggling to figure out is how to get that information so that it can be used/stored.

at the moment this is what's given back .

Code:

{ "nonce": "tokencc_bh_12324_65645645_94554456_r5prjt_236", "details": { "cardType": "Visa", "lastFour": "4242", "lastTwo": "42" }, "type": "CreditCard", "description": "ending in 42", "binData": { "prepaid": "Unknown", "healthcare": "Unknown", "debit": "Unknown", "durbinRegulated": "Unknown", "commercial": "Unknown", "payroll": "Unknown", "issuingBank": "Unknown", "countryOfIssuance": "Unknown", "productId": "Unknown" } }

this is currently in <pre> for easy reading, though i can easily change this to be inside whatever, the information for me isn't usable as it's just one big bit of text.

Any suggestions?

That is just JSON. You convert it into a JavaScript object and then process it using JavaScript as normal.

unwashed potato! · 28 Apr 2019 at 20:08

ok i've converted it using php to store for later. now onto the next issues