Merge pull request #3 from ipatate/develop

public key in env variable or plugin options

components/Snipcart.js

@@ -1,8 +1,6 @@
 "use strict";
 
-var React = require('react');
-
-var GATSBY_SNIPCART_API_KEY = process.env.GATSBY_SNIPCART_API_KEY;
+var React = require("react");
 
 var Snipcart = function Snipcart(_ref) {
   var publicApiKey = _ref.publicApiKey,
@@ -14,16 +12,16 @@ var Snipcart = function Snipcart(_ref) {
     id: "snipcart",
     "data-api-key": publicApiKey,
     "data-currency": currency,
-    "data-config-add-product-behavior": openCartOnAdd === false ? 'none' : null,
+    "data-config-add-product-behavior": openCartOnAdd === false ? "none" : null,
     dangerouslySetInnerHTML: {
       __html: "\n        " + innerHTML + "\n      "
     }
   });
 };
 
 Snipcart.defaultProps = {
-  currency: 'usd',
-  innerHTML: '',
+  currency: "usd",
+  innerHTML: "",
   openCartOnAdd: true
 };
 module.exports = Snipcart;

gatsby-ssr.js

@@ -11,12 +11,13 @@ var SnipcartStyles = require("./components/SnipcartStyles");
 var Snipcart = require("./components/Snipcart");
 
 var SnipcartProvider = require("./components/SnipcartProvider").default;
+
+var GATSBY_SNIPCART_API_KEY = process.env.GATSBY_SNIPCART_API_KEY;
 /**
  * insert script, style and tag in body on ssr render
  * @param options : {currency, version}
  */
 
-
 exports.onRenderBody = function (_ref, pluginOptions) {
   var setPostBodyComponents = _ref.setPostBodyComponents;
 
@@ -28,11 +29,19 @@ exports.onRenderBody = function (_ref, pluginOptions) {
     version: "3.0.15",
     innerHTML: "",
     openCartOnAdd: true
-  }, {}, pluginOptions);
+  }, {}, pluginOptions); // find public api key in options plugin or environment variable
+
+
+  var publicApiKey = GATSBY_SNIPCART_API_KEY || _options.publicApiKey;
+
+  if (!publicApiKey) {
+    throw new Error("Snipcart public API Key is not defined. Insert in plugin options the \"publicApiKey\" parameter or use GATSBY_SNIPCART_API_KEY in environment variable");
+    return null;
+  }
 
   var components = [/*#__PURE__*/React.createElement(Snipcart, {
     key: "snipcart",
-    publicApiKey: _options.publicApiKey,
+    publicApiKey: publicApiKey,
     innerHTML: _options.innerHTML,
     currency: _options.currency,
     openCartOnAdd: _options.openCartOnAdd

readme.md

@@ -12,7 +12,11 @@ This plugin includes a Context for quantity in cart and detects if user is logge
 
 ## API KEY
 
-Set "GATSBY_SNIPCART_API_KEY" variable in environment
+Set the Snipcart public api key in options plugin or use "GATSBY_SNIPCART_API_KEY" variable in environment.
+If you want use different api key by environment, use it in environment variable.
+
+*The environment variable is prioritary on plugin option parameter.*
+
 
 The plugin use :
 
@@ -31,6 +35,7 @@ module.exports = {
         resolve: `gatsby-plugin-snipcart-advanced`,
         options: {
             version: '3.0.15',
+            publicApiKey: '#####', // use public api key here or in environment variable
             defaultLang: 'fr',
             currency: 'eur',
             openCartOnAdd: false,
@@ -56,6 +61,7 @@ module.exports = {
 Read the snipcart document [https://docs.snipcart.com/v3](https://docs.snipcart.com/v3)
 
 - version : define version of snipcart library
+- publicApiKey: Snipcart public api key
 - defaultLang : define default language
 - currency : define currency
 - openCartOnAdd : define if the "snipcart" library opens the cart when user clicks on "add to cart" button
@@ -212,6 +218,14 @@ const AddCartModal = () => {
   export default AddCartModal;
 ```
 
+## Version
+
+1.0.0 :
+- Added possibility of use public key api Snipcart from plugin options or from environment variables
+- Use SnipcartContext instead of SnipCartContext
+
+
+
 ## TODO
 
 - Add validation on plugin options

src/components/Snipcart.jsx

@@ -1,14 +1,12 @@
-const React = require('react');
+const React = require("react");
 
-const GATSBY_SNIPCART_API_KEY = process.env.GATSBY_SNIPCART_API_KEY;
-
-const Snipcart = ({publicApiKey, currency, innerHTML, openCartOnAdd}) => (
+const Snipcart = ({ publicApiKey, currency, innerHTML, openCartOnAdd }) => (
   <div
     hidden
     id="snipcart"
     data-api-key={publicApiKey}
     data-currency={currency}
-    data-config-add-product-behavior={openCartOnAdd === false ? 'none' : null}
+    data-config-add-product-behavior={openCartOnAdd === false ? "none" : null}
     dangerouslySetInnerHTML={{
       __html: `
         ${innerHTML}
@@ -18,8 +16,8 @@ const Snipcart = ({publicApiKey, currency, innerHTML, openCartOnAdd}) => (
 );
 
 Snipcart.defaultProps = {
-  currency: 'usd',
-  innerHTML: '',
+  currency: "usd",
+  innerHTML: "",
   openCartOnAdd: true,
 };
 

src/gatsby-ssr.js

@@ -3,12 +3,13 @@ const SnipcartStyles = require("./components/SnipcartStyles");
 const Snipcart = require("./components/Snipcart");
 const SnipcartProvider = require("./components/SnipcartProvider").default;
 
+const GATSBY_SNIPCART_API_KEY = process.env.GATSBY_SNIPCART_API_KEY;
+
 /**
  * insert script, style and tag in body on ssr render
  * @param options : {currency, version}
  */
 exports.onRenderBody = ({ setPostBodyComponents }, pluginOptions = {}) => {
-
   const _options = {
     ...{
       version: "3.0.15",
@@ -17,10 +18,20 @@ exports.onRenderBody = ({ setPostBodyComponents }, pluginOptions = {}) => {
     },
     ...pluginOptions,
   };
+  // find public api key in options plugin or environment variable
+  const publicApiKey = GATSBY_SNIPCART_API_KEY || _options.publicApiKey;
+
+  if (!publicApiKey) {
+    throw new Error(
+      `Snipcart public API Key is not defined. Insert in plugin options the "publicApiKey" parameter or use GATSBY_SNIPCART_API_KEY in environment variable`
+    );
+    return null;
+  }
+
   const components = [
     <Snipcart
       key="snipcart"
-      publicApiKey={_options.publicApiKey}
+      publicApiKey={publicApiKey}
       innerHTML={_options.innerHTML}
       currency={_options.currency}
       openCartOnAdd={_options.openCartOnAdd}