stripe/braintree - help a brother out

unwashed potato!

unwashed potato!

unwashed potato!

Soldato
Joined
12 Feb 2006
Posts
17,380
Location
Surrey
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
 
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.
 
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..
 
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).
 
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
 
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
Click to expand...

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.
 
sb89 said:
https://braintree.github.io/braintree-web-drop-in/

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

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
 
Fairly sure the answer is no said:
it doesn't as there's still code missing.
Click to expand...

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>
 
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?
 
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?
Click to expand...

That is just JSON. You convert it into a JavaScript object and then process it using JavaScript as normal.
 
You must log in or register to reply here.
Back
Top Bottom