1

The problem in short is that after I finish submitting the test card details on the payment form, It should process the payment with stripe's API via commerceJs. But I keep getting an error saying

payment.gateway: Gateway with ID "stripe" not found.

I looked around and people suggested that I check the stripe sandbox toggle on commerceJs, because it should be on but I already checked it since I added stripe payment.

I also thought there was a problem with the orderData object but it's printing all the right values.

PaymentForm.jsx

import React from 'react';
import { Typography, Button, Divider } from '@material-ui/core'
import { Elements, CardElement, ElementsConsumer } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js'

import Review from './Review';

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY)

function PaymentForm({ checkoutToken, nextStep, backStep, onCaptureCheckout, shippingData }) {

    const handleSubmit = async (event, elements, stripe) => {
        event.preventDefault()

        if (!stripe || !elements) return;

        const cardElement = elements.getElement(CardElement)

        const { error, paymentMethod } = await stripe.createPaymentMethod({ type: 'card', card: cardElement })

        if (error) {
            console.log('[error]', error)
        } else {
            const orderData = {
                line_items: checkoutToken.live.line_items,
                customer: { firstname: shippingData.firstName, lastname: shippingData.lastName, email: shippingData.email },
                shipping: {
                    name: 'Primary',
                    street: shippingData.address1,
                    town_city: shippingData.city,
                    county_state: shippingData.shippingSubdivision,
                    postal_zip_code: shippingData.zip,
                    country: shippingData.shippingCountry
                },
                fulfillment: { shipping_method: shippingData.shippingOption },
                payment: {
                    gateway: 'stripe',
                    stripe: {
                      payment_method_id: paymentMethod.id,
                    },
                  },

            }

            console.log(orderData);
            onCaptureCheckout(checkoutToken.id, orderData)
            nextStep()
        }
        
    }

    

    return (
        <>
            <Review checkoutToken={checkoutToken} />
            <Divider />
            <Typography variant='h6' style={{ margin: '20px 0' }}>Payment method</Typography>

            <Elements stripe={stripePromise}>
                <ElementsConsumer>
                {({ elements, stripe }) => (
                        <form onSubmit={(e) => handleSubmit(e, elements, stripe)}>
                            <CardElement />
                            <br /> <br />
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <Button variant='outlined' onClick={backStep}>Back</Button>
                                <Button variant='contained' type='submit' disabled={!stripe} color='primary'>
                                    Pay {checkoutToken.live.subtotal.formatted_with_symbol}
                                </Button>
                            </div>
                        </form>
                        )}
                </ElementsConsumer>
            </Elements>
        </>
    );
}

export default PaymentForm;

For reference I'm following this tutorial https://www.youtube.com/watch?v=377AQ0y6LPA, My problem starts on 2:59:02 mark.

Screenshot of the output

BASSAM
  • 11
  • 2
  • Your code seems to match their docs (https://commercejs.com/docs/guides/stripe-integration/#example-implementation) so it seems like something in the version of the library you are using maybe? They seem to have a Slack for support which you could try – koopajah Jul 29 '22 at 22:23
  • @koopajah I downloaded the same library version in the tutorial but you are right I should contact them on slack. – BASSAM Jul 29 '22 at 22:35

1 Answers1

2

I found that I needed to log into my Chec.io dashboard. from there I went into "Settings/ Payment gateways" then clicked on my "Stripe" payment gateway. in the "Edit payment gateway: Stripe" window I toggled the "Sandbox Mode" button and saved my changes. that seemed to do the trick for me. spend about a day wrestling with this issue before I stumbled upon this solution.

pilgrimk
  • 21
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Albert Logic Einstein Aug 23 '22 at 14:47