After rendering the widget’s attributes, the
StripeCheckoutWidgetComponent renders the
StripeCheckout component, passing to it the relevant data as props:
stripeKey is our publishable test key,
amount the total to charge (Stripe wants it in cents), the
currency to use, and a callback for the
StripeCheckout executes this callback and passes the token to it after having validated the payment details. We can then use this token in our Lambda backend to trigger the actual payment. Our above callback,
handleToken, simply displays a notification; we’ll elaborate on that in a minute.
react-stripe-checkout documentation for other props available for configuring the checkout procedure.