Created
April 27, 2015 08:15
-
-
Save dcaravana/4d9c2903f2ca2afa7e7b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| diff --git a/README.md b/README.md | |
| index a9b9f4f..398252e 100644 | |
| --- a/README.md | |
| +++ b/README.md | |
| @@ -61,7 +61,7 @@ var Foo = React.createClass({ | |
| }); | |
| ``` | |
| -## A Goole Maps component | |
| +## A Google Maps component | |
| You may want to do some additional initialization after the script loads and before ReactScriptLoaderMixin calls onScriptLoaded. For example, the Google maps API calls a JSONP callback on your page before you can start using the API. If you naively try calling the Google maps methods in onScriptLoaded you'll probably see 'undefined is not a function' errors in the javascript console. ReactScriptLoader helps you avoid this problem by implementing the ***deferOnScriptLoaded()*** callback in your component class. If this method returns true, ReactScriptLoaderMixin will wait on calling onScriptLoaded() until you manually call ***ReactScriptLoader.triggerOnScriptLoaded(scriptURL)*** method. This is best illustrated in the following example: | |
| @@ -128,7 +128,7 @@ exports.Map = Map; | |
| ## A Stripe Checkout example | |
| -This last example shows how to create a component called StripeButton that renders a button and uses Stripe Checkout to pop up a payment dialog when the user clicks on it. The button is rendered immediately but if the user clicks before the script is loaded the user sees a loading indicator, which disappears when the script has loaded. (Additional logic should be added to remove the loading dialog once all StripeButtons have been unmounted from the page. This remains an exercise for the reader :) ) If the script fails to load, we show the user an error message when the user clicks on the button. | |
| +This last example shows how to create a component called ReactStripeButton that renders a button and uses Stripe Checkout to pop up a payment dialog when the user clicks on it. The button is rendered immediately but if the user clicks before the script is loaded the user sees a loading indicator, which disappears when the script has loaded. (Additional logic should be added to remove the loading dialog once all ReactStripeButtons have been unmounted from the page. This remains an exercise for the reader :) ) If the script fails to load, we show the user an error message when the user clicks on the button. | |
| ```javascript | |
| /** @jsx React.DOM */ | |
| @@ -136,7 +136,7 @@ This last example shows how to create a component called StripeButton that rende | |
| var React = require('react'); | |
| var ReactScriptLoaderMixin = require('./ReactScriptLoader.js').ReactScriptLoaderMixin; | |
| -var StripeButton = React.createClass({ | |
| +var ReactStripeButton = React.createClass({ | |
| mixins: [ReactScriptLoaderMixin], | |
| getScriptURL: function() { | |
| return 'https://checkout.stripe.com/checkout.js'; | |
| @@ -153,9 +153,9 @@ var StripeButton = React.createClass({ | |
| onScriptLoaded: function() { | |
| // Initialize the Stripe handler on the first onScriptLoaded call. | |
| - // This handler is shared by all StripeButtons on the page. | |
| - if (!StripeButton.stripeHandler) { | |
| - StripeButton.stripeHandler = StripeCheckout.configure({ | |
| + // This handler is shared by all ReactStripeButtons on the page. | |
| + if (!ReactStripeButton.stripeHandler) { | |
| + ReactStripeButton.stripeHandler = StripeCheckout.configure({ | |
| key: 'YOUR_STRIPE_KEY', | |
| image: '/YOUR_LOGO_IMAGE.png', | |
| token: function(token) { | |
| @@ -175,7 +175,7 @@ var StripeButton = React.createClass({ | |
| }, | |
| showStripeDialog: function() { | |
| this.hideLoadingDialog(); | |
| - StripeButton.stripeHandler.open({ | |
| + ReactStripeButton.stripeHandler.open({ | |
| name: 'Demo Site', | |
| description: '2 widgets ($20.00)', | |
| amount: 2000 | |
| @@ -183,12 +183,12 @@ var StripeButton = React.createClass({ | |
| }, | |
| onScriptError: function() { | |
| this.hideLoadingDialog(); | |
| - StripeButton.scriptDidError = true; | |
| + ReactStripeButton.scriptDidError = true; | |
| }, | |
| onClick: function() { | |
| - if (StripeButton.scriptDidError) { | |
| + if (ReactStripeButton.scriptDidError) { | |
| console.log('failed to load script'); | |
| - } else if (StripeButton.stripeHandler) { | |
| + } else if (ReactStripeButton.stripeHandler) { | |
| this.showStripeDialog(); | |
| } else { | |
| this.showLoadingDialog(); | |
| @@ -202,5 +202,5 @@ var StripeButton = React.createClass({ | |
| } | |
| }); | |
| -exports.StripeButton = StripeButton; | |
| +exports.ReactStripeButton = ReactStripeButton; | |
| ``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment