{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/adding-stripe-payment-in-react-application/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"2b4f6f36-50c5-59ab-8fe8-e62eea1f4fa0","excerpt":"In this article i will explain you how you can add stripe payment to your react application Step 1: Install required package for stripe Step 2: Go to your…","html":"<p>In this article i will explain you how you can add stripe payment to your react application</p>\n<h4>Step 1: Install required package for stripe</h4>\n<pre><code class=\"language-js\">npm install @stripe/react-stripe-js @stripe/stripe-js --save\n\n</code></pre>\n<h4>Step 2: Go to your stripe account and get the public stripe key</h4>\n<ul>\n<li>\n<p>Login to your stripe account</p>\n</li>\n<li>\n<p>Go to developers option in header</p>\n</li>\n<li>\n<p>Click on API Keys on left panel</p>\n</li>\n<li>\n<p>You will be able to see your publishable key</p>\n</li>\n</ul>\n<h4>Step 3: Copy paste the following code in your react functional component</h4>\n<ul>\n<li>Replace your publishable key with the publishable key which you got in the above steps</li>\n</ul>\n<pre><code class=\"language-js\">import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { loadStripe } from \"@stripe/stripe-js\";\nimport {\n  CardElement,\n  Elements,\n  useStripe,\n  useElements,\n} from \"@stripe/react-stripe-js\";\n\nconst CheckoutForm = () => {\n  const stripe = useStripe();\n  const elements = useElements();\n\n  const handleSubmit = async (event) => {\n    event.preventDefault();\n\n    if (elements == null) {\n      return;\n    }\n\n    const { error, paymentMethod } = await stripe.createPaymentMethod({\n      type: \"card\",\n      card: elements.getElement(CardElement),\n    });\n  };\n\n  return (\n    &#x3C;form onSubmit={handleSubmit}>\n      &#x3C;CardElement />\n      &#x3C;button type=\"submit\" disabled={!stripe || !elements}>\n        Pay\n      &#x3C;/button>\n    &#x3C;/form>\n  );\n};\n\nconst stripePromise = loadStripe(\"stripe_publishable_key\");\n\nconst StripeCheckOut = () => {\n  return (\n    &#x3C;Elements stripe={stripePromise}>\n      &#x3C;CheckoutForm />\n    &#x3C;/Elements>\n  );\n};\n\nexport default StripeCheckOut;\n</code></pre>","fields":{"slug":"/adding-stripe-payment-in-react-application/"},"frontmatter":{"title":"Adding stripe payment in react application","date":"April 20, 2022","description":"In this article i will explain you how you can add stripe payment to your react application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/stripe-react.jpeg"}},"previous":{"fields":{"slug":"/aws-serverless-node-restapi-using-serverless-framework/"},"frontmatter":{"title":"AWS Serverless Node Rest API using lambda function, api gateway and serverless framework","date":"April 06, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/serverless-apigateway-node.jpg"}},"next":{"fields":{"slug":"/create-custom-directive-angular/"},"frontmatter":{"title":"How to create custom directive in angular","date":"April 30, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/creating-custom-directive-angular.jpeg"}}},"pageContext":{"id":"2b4f6f36-50c5-59ab-8fe8-e62eea1f4fa0","previousPostId":"361811c6-75ac-583f-ada2-0052ae2cebbc","nextPostId":"1391ca31-71e9-50de-8880-84c95b074ac2"}},
    "staticQueryHashes": ["3860684146"]}