timothyWU-commercejs | Stripe Developers | Page 1

vagrant sail Aug 9, 2022, 7:32 AM

#

Sure! Although I don't think we have some official doc specifically for commercejs

tranquil galleon Aug 9, 2022, 7:32 AM

#

hello ! thanks for the quick response !

#

yeah i didn t see any doc about commercejs in stripe but commercejs do have a doc : https://commercejs.com/docs/guides/stripe-integration/

Commerce.js - API-first eCommerce infrastructure for next generation brands

Stripe | Commerce.js docs

Add Stripe as a payment gateway into your checkout.

#

but like i said, i m a newbie so i don t really know how to use this implementation with stripe element so i was wondering if i could get some help 😅

#

i have already followed this doc about how to make a custom payflow : https://stripe.com/docs/payments/quickstart

Custom payment flow

#

but know i m a bit lost about what to do to

vagrant sail Aug 9, 2022, 7:42 AM

#

Looks like you are better stick with the Commercejs Doc

#

It uses a bit old integration on Card Element (We have a newer Payment Element component) tho

tranquil galleon Aug 9, 2022, 7:43 AM

#

so i have to remove all of the thing i ve made with your doc or ? i m sorry i m very bad in devellopement

vagrant sail Aug 9, 2022, 7:43 AM

#

const order = await commerce.checkout.capture(checkoutTokenId, {
      ...orderDetails,
      // Include Stripe payment method ID:
      payment: {
        gateway: 'stripe',
        stripe: {
          payment_method_id: paymentMethodResponse.paymentMethod.id,
        },
      },
    })

This part let me believe commerce.checkout is a dedicated commercejs component

#

Unfortunately yes, if you are willing to continue with commercejs

#

If you don't use them then it's totally fine to continue with our official Doc

#

And you have a newer component

tranquil galleon Aug 9, 2022, 7:45 AM

#

thx, but i ve already put my database on commercejs it s gonna be hard only using stripe it ll take a lot of time

vagrant sail Aug 9, 2022, 7:46 AM

#

Sure, so let's just continue with the their guide

tranquil galleon Aug 9, 2022, 7:48 AM

#

and if i understand correctly, i have to replace the page /api/create-payment-flow by their exemple ?

vagrant sail Aug 9, 2022, 7:52 AM

#

Rather removing instead of replacing

#

I think commercejs does all the headless backend for you, so you won't need a backend yourself

tranquil galleon Aug 9, 2022, 7:56 AM

#

ok, and i where should i put this exemple? in the folder api like create-payment-intent ? or on the client side on a page ?

#

my project is like this

vagrant sail Aug 9, 2022, 7:57 AM

#

Should be client side

tranquil galleon Aug 9, 2022, 7:59 AM

#

ok si i have to put in the payement.js files where i was calling only stripe like your doc were doing ?

meager harbor Aug 9, 2022, 8:06 AM

#

Hi! I'm taking over this thread.

#

Unfortunately we don't know how commercejs works here. So I would recommend to ask your questions to commercejs support directly.

tranquil galleon Aug 9, 2022, 8:09 AM

#

ok ! thx a lot for your time

meager harbor Aug 9, 2022, 8:35 AM

#

Pasting your new question:

Hi again, i m following this doc https://commercejs.com/docs/guides/stripe-integration/#example-implementation thats have this "const card = elements.create('card')" but when i import { Elements } from "@stripe/react-stripe-js" i does not work, am i doing something wrong ?

Commerce.js - API-first eCommerce infrastructure for next generation brands

Stripe | Commerce.js docs

Add Stripe as a payment gateway into your checkout.

tranquil galleon Aug 9, 2022, 8:35 AM

#

thx

meager harbor Aug 9, 2022, 8:35 AM

#

The code here: https://commercejs.com/docs/guides/stripe-integration/#example-implementation is using Stripe.js, not react-stripe, so it's expected to not work.

#

If you want to use React, we have this documentation about it: https://stripe.com/docs/stripe-js/react

tranquil galleon Aug 9, 2022, 8:37 AM

#

ok thx, and if i want to use the elements on stripe.js ? how can i import or get it ?

#

i have something like that

#

meager harbor Aug 9, 2022, 8:43 AM

#

Once you loaded Stripe js with const stripe = Stripe('pk_test_xxx'), you can create an element like this const elements = stripe.elements() and const card = elements.create("card").

tranquil galleon Aug 9, 2022, 8:52 AM

#

#

when i try to get Stripe it s give me this error

#

meager harbor Aug 9, 2022, 8:54 AM

#

Did you load Stripe.js on your page? https://stripe.com/docs/js/including

tranquil galleon Aug 9, 2022, 9:01 AM

#

yes i loaded it on the first line

#

line 77

outer parrot Aug 9, 2022, 9:03 AM

#

looks like more of a typescript error than anything actually problematic

#

why aren't you using loadStripe? If you're using React that's what you need to do.

#

overall I suggest you ask the community of that plugin you're using, there's a link to a Slack server in their documentation and they likely have developer support there and can help with integrating with their own docs. We can only really help you here if you're building a vanilla integration with our products and not via that third party

tranquil galleon Aug 9, 2022, 9:08 AM

#

outer parrot why aren't you using loadStripe? If you're using React that's what you need to d...

i wanted to use loadstripe, but as i understand the integration is done with stripe.js, so i ve per default trying to use js instead

outer parrot Aug 9, 2022, 9:09 AM

#

yeah but that doesn't make sense to me since the code in your screenshot is clearly React

#

the code in that third party page you linked doesn't look like React though, so I don't know what you're doing overall or if that project uses React or not

tranquil galleon Aug 9, 2022, 9:10 AM

#

outer parrot overall I suggest you ask the community of that plugin you're using, there's a l...

Yes i ve already tried to ask them but unlike your support, they don t respon at all, i ve seen 1 answer only in 3 days for a guy

tranquil galleon Aug 9, 2022, 9:10 AM

#

outer parrot the code in that third party page you linked doesn't look like React though, so ...

my project is in reactjs but i want to integrate stripe in commerce js so i was following their doc :https://commercejs.com/docs/guides/stripe-integration/#example-implementation

Commerce.js - API-first eCommerce infrastructure for next generation brands

Stripe | Commerce.js docs

Add Stripe as a payment gateway into your checkout.

#

and i m very new in devellopement, and for now i don t have other choice than following what they give me as example

outer parrot Aug 9, 2022, 9:14 AM

#

well you could not use React, that seems to be adding complication

#

like just use their exact basic vanilla-JS sample from scratch

#

if you're new it's going to be hard to take some existing project and integrate with another existing project using two different frameworks so you need to start simple

tranquil galleon Aug 9, 2022, 9:16 AM

#

yes but my entire project has been built in react so i don t have other choice

tranquil galleon Aug 9, 2022, 9:17 AM

#

outer parrot if you're new it's going to be hard to take some existing project and integrate ...

i d like to but i m in internship and they wanted me to build a react/node nextjs commerce with commercejs and stripe

outer parrot Aug 9, 2022, 9:18 AM

#

maybe ask your more experienced colleagues for help then

tranquil galleon Aug 9, 2022, 9:19 AM

#

outer parrot maybe ask your more experienced colleagues for help then

i wish i could but i m the only one in devellopement in the agency

#

they only know a bit

outer parrot Aug 9, 2022, 9:20 AM

#

I see

tranquil galleon Aug 9, 2022, 9:21 AM

#

so i should try to transform this implementation in react ?

outer parrot Aug 9, 2022, 9:23 AM

#

I mean you might not be able to since it's a third party library intended for vanilla JS. I don't know, I never heard of this library before today

#

if you want to use React maybe try integrating with Stripe directly(https://stripe.com/docs/stripe-js/react) instead of that commerceJS, I don't know your requirements and I can't do your job for you

#timothyWU-commercejs