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

user_12329136 0
Viewed 129

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?

stripe-payments react-native reactjs
2 Answers

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

user_72963230

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.

user_124748620
Related