CODEWITHSUNDEEP
node.jsreactjsstripe-payments
Abdullah Abid
Abdullah Abid

Reputation: 1661

Creating a custom Stripe form with React

What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements , i have already built a custom form and after some digging i found a solution that fits my needs but the solution was in vanilla Javascript, so what it does is that it appends a script to the body and creates a global Stripe variable that can you can use to access the Stripe API

import React from "react";

const loadStripe = () => {
  if (!window.document.getElementById("stripe-script")) {
    var s = window.document.createElement("script");
    s.id = "stripe-script";
    s.type = "text/javascript";
    s.src = "https://js.stripe.com/v2/";
    s.onload = () => {
      window["Stripe"].setPublishableKey(
        "PUBLIC_KEY_HERE"
      );
    };
    window.document.body.appendChild(s);
  }

  return window.Stripe;
};

export default loadStripe;

and then i use it as 

let Stripe = loadStripe();
const onSubmit = (cardNumber,exp_month,exp_year,CVC) =>{

Stripe.card.createToken(
  {
    number: cardNumber,
    exp_month: exp_month,
    exp_year: exp_year,
    cvc: CVC,
  },
  (status, response) => {
    console.log(status);
    console.log(response);}
  }
}

the above solution obviously does work but I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution (because as far as i know i shouldn't be creating and appending scripts in the body using JS)

Any Help would be much appreciated :)

Upvotes: 2

Views: 2174

Answers (1)

ttmarek
ttmarek

Reputation: 3240

I was hoping that someone could point me in the right direction so that i could get rid of the loadStripe Component and use Something like a npm package or a React Specific solution

If you're looking for an npm package, Stripe recently released their own official library to load Stripe.js which you can find here:

https://www.npmjs.com/package/@stripe/stripe-js

In fact, @stripe/stripe-js works much in the same way as the custom loadStripe function you have now as you can see here:

https://github.com/stripe/stripe-js/blob/master/src/shared.ts#L7-L24

I should note that it's perfectly okay to append scripts in the body using JavaScript as long as you have a good handle on how the script loads (i.e., through async Promises).

That being said, using your loadStripe function or Stripe's official one (@stripe/stripe-js) isn't a requirement. Controlling how and when to inject Stripe.js in the DOM is very helpful when doing server-side rendering (0). But, if that isn't something you're doing, you can just include Stripe.js manually (1) in the <head> of your html like this:

<html>
  <head>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

What i am trying to do is create a custom stripe form in ReactJS ,i don't want to use react-stripe-elements

If you are using React v16.8 or greater, the official recommendation would be to use our new React library which you can find here:

https://www.npmjs.com/package/@stripe/react-stripe-js

But if your heart's set on not using either @stripe/react-stripe-js or the older react-stripe-elements library, it is definitely possible to roll your own custom integration. Here's a very bare-bones example of how you could do that:

https://codesandbox.io/s/eager-cdn-krumt

I'm including Stripe.js here: https://codesandbox.io/s/eager-cdn-krumt?file=/public/index.html:1062-1116

And integrating it into a component here: https://codesandbox.io/s/eager-cdn-krumt?file=/src/Checkout.js

Be sure to replace pk_test_xyz with your own publishable key before testing it out.

Hope this helps!

[ 0 ] https://alligator.io/react/server-side-rendering/
[ 1 ] https://stripe.com/docs/js/including

Upvotes: 1

Related Questions