Implementing Stripe Connect using JSONP in an Ember.js app

Question

I am currently integrating Stripe Connect with an Ember.js 1.7.0-beta.4 application (which supports query params). Per Stripe documentation, I need to receive a GET Redirect from Stripe in my Ember.js application, and use the query params to make a final POST request.

So far, I've captured the query params and am attempting to make an AJAX POST from the same controller, but the AJAX POST returns an error because apparently Stripe's API no longer supports CORS - despite a 2-year-old Stripe blog entry saying otherwise:

XMLHttpRequest cannot load https://connect.stripe.com/oauth/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

The current Stripe docs say to use JSONP, noting in that same blog post that "since JSONP only supports GET requests, but our API uses a variety of request methods, we had to implement HTTP method override support with a _method query parameter."

Unfortunately, I don't know how to integrate the JSONP approach into the Ember.js application.

Stripe's docs instruct me to "Add this script tag to your page to get started with Stripe.js."

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

Do I just paste this verbatim into a Handlebars.js template? Then how do I make the required POST request with query params? And where?

Bottom Line: How do I integrate Stripe's JSON approach to enable Stripe Connect in my Ember.js application?

tikotzky tikotzky · Accepted Answer · 2014-08-08T17:30:06

I haven't tested it with stripe but i'll break apart your question into 3 parts and try to answer each part.

1) Where to put the script tag?
the script tag would go in the header

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

2) How to make a JSONP request?
You would make a reqular request using $.getJSON all you need to do is make sure that the contains ?callback=? see: http://api.jquery.com/jquery.getjson/#jsonp

3) How to do a GET request using _method to override the method.
You would do something like

$.getJSON('http://connect.stripe.com/whatever-the-correct-url-is?callback=?', {
  _method: 'POST'
})

If you made a request like that the server should process it as a POST

To Tie it all together you should need to do something like in step 3 but also add in the rest of the params that stripe requires.

Implementing Stripe Connect using JSONP in an Ember.js app

2 Answers