CODEWITHSUNDEEP
reactjsreact-nativestripe-payments
Page COW
Page COW

Reputation: 755

Why is my payment button not displaying the pop up? (Stripe)

My Stripe button isn't working. Here is the code:

import StripeCheckout from 'react-stripe-checkout';

export default function SignUpOne({ ... }) {
...

  const onToken = (token) => {
        console.log("onToken fired: ", token);
        handlePost(token);
    }

  return(
  ...
     <StripeCheckout
            label='Start Your Free Trial'
            
            // image='https://static.thenounproject.com/png/1259474-200.png'
            name='Native Notify Sign Up'
            description="It's free for 7 days. Then it's $29 / Month. Cancel anytime."
            panelLabel="Sign Up"
            
            currency='USD'
            locale='auto'
            stripeKey='pk_test_my-token'
            token={onToken}
            >
            <Button 
                title="Sign Up"
                color={"#06bd43"}
            />
     </StripeCheckout>
  )
}

Nothing is happening when I click the button. There should be a pop-up that appears on the screen.

What am I doing wrong?

Upvotes: 1

Views: 571

Answers (2)

Nolan H
Nolan H

Reputation: 7419

Please be aware that the react-stripe-checkout package is quite outdated and uses the old "checkout" integration that is no longer recommended. Stripe recommends migrating to the new Checkout experience to take advantage of all the latest features.

While this does require a server to create sessions, you can also use Payment Links to send your customers to Checkout with no code required.

Upvotes: 1

Amit Sharma
Amit Sharma

Reputation: 1795

You don't need to add the extra button tag in this case because Stripecheckout itself generate a button. Also you need to call the onToken function like this this.onToken . Here is the New tag for you.

<StripeCheckout
    label='Start Your Free Trial'
    // image='https://static.thenounproject.com/png/1259474-200.png'
    name='Native Notify Sign Up'
    description="It's free for 7 days. Then it's $29 / Month. Cancel anytime."
    panelLabel="Sign Up"
    currency='USD'
    locale='auto'
    stripeKey='pk_test_my-token'
    token={this.onToken}
></StripeCheckout>

Here is the result that I recieve when I run your code with above modifications

https://prnt.sc/1munr4d

Upvotes: 1

Related Questions