{"componentChunkName":"component---src-templates-blog-post-js","path":"/2020/07/stripe-integration-with-netlify-and-gatsby","result":{"data":{"markdownRemark":{"id":"52a8abd4-fd09-5682-8bfe-89d2e2893f7a","html":"<p>But I had a few challenges along the way, so I am documenting my notes here in case I need to do this again in the future.</p>\n<p>In the process of building my <a href=\"/olivias-cards-for-mustard-seed\">Olivias Cards for Mustard Seed School</a> fundraiser page, I needed a checkout solution. I have experience with <a href=\"https://stripe.com\">Stripe</a>, so that was the obvious choice.</p>\n<p>The final code is in this repository, the <a href=\"https://github.com/mcurcio/mcurcio.com/blob/master/src/pages/olivias-cards-for-mustard-seed/index.js\">frontend code is here</a> (caution: the frontend code is a MESS), and the <a href=\"https://github.com/mcurcio/mcurcio.com/blob/master/lambda/olivias-cards/olivias-cards.js\">backend code is here</a>.</p>\n<p>The requirements were:</p>\n<ol>\n<li>No PCI requirements - Stripe needed to handle all of the processing and security</li>\n<li>Custom shipping costs logic, including free shipping code</li>\n<li>Generated invoices and emails</li>\n<li>Integrated on the page (no external checkout form)</li>\n</ol>\n<p>Thanks to <a href=\"https://stripe.com/payments/elements\">Stripe Elements</a> requirement #1 was achievable with essentially copy/pasting code from the React plugin docs. The other requirements were a bit more challenging.</p>\n<p>I tried two different methods for generating the backend code. At first, I tried using the <a href=\"https://stripe.com/docs/api/orders/object\">Stripe Orders API</a> because a quick glance through the docs showed that I could pass individual line items to the checkout process, which I <em>assumed</em> would get translated to a final receipt. Spoiler: all of the line items are coalesced into a single charge.</p>\n<p>The second solution that I tried was successful -- using the <a href=\"https://stripe.com/docs/api/invoices\">Stripe Invoices API</a> I was able to add the individual line items and then apply them to a single invoice which could be charged. All of the relevant code is in <a href=\"https://github.com/mcurcio/mcurcio.com/blob/master/lambda/olivias-cards/olivias-cards.js\">the serverless Lambda code</a>.</p>\n<p><em>Header image via <a href=\"https://mitchgavan.com/react-serverless-shop/\">https://mitchgavan.com/react-serverless-shop/</a></em></p>","frontmatter":{"date":"2020-07-16T12:13:10.000Z","humanDate":"July 16, 2020","title":"Netlify checkout with Stripe","description":"Thanks to Netlify and Stripe, it has never been easier to throw together a payment page that scales.","tags":["olivias cards","mustard seed school","stripe","netlify","serverless"],"affiliate":null,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAHABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIE/8QAFQEBAQAAAAAAAAAAAAAAAAAAAQL/2gAMAwEAAhADEAAAAbgl1hP/xAAaEAACAgMAAAAAAAAAAAAAAAAAAQIDBBIj/9oACAEBAAEFAu5B3ueuUf/EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAEDAQE/AYf/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAbEAACAQUAAAAAAAAAAAAAAAAAApEBAyEyM//aAAgBAQAGPwLLJBtQ6W4P/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAERMZH/2gAIAQEAAT8hbd2pZDLdkSyB/9oADAMBAAIAAwAAABD8H//EABYRAQEBAAAAAAAAAAAAAAAAAAARMf/aAAgBAwEBPxDFV//EABYRAQEBAAAAAAAAAAAAAAAAABEAIf/aAAgBAgEBPxB0i//EABwQAQACAgMBAAAAAAAAAAAAAAEAIRFhMUFR0f/aAAgBAQABPxBwPyEv0mLDocg0jrUaBOlvk//Z","aspectRatio":2.85,"src":"/static/316183f5071f91cf8fbc43ee480b3c2a/256ea/header.jpg","srcSet":"/static/316183f5071f91cf8fbc43ee480b3c2a/f0ee2/header.jpg 285w,\n/static/316183f5071f91cf8fbc43ee480b3c2a/4b42b/header.jpg 570w,\n/static/316183f5071f91cf8fbc43ee480b3c2a/256ea/header.jpg 736w","sizes":"(max-width: 736px) 100vw, 736px"}}}}}},"pageContext":{"id":"52a8abd4-fd09-5682-8bfe-89d2e2893f7a","slug":"/2020/07/stripe-integration-with-netlify-and-gatsby"}}}