medusa paystack breaks in medusa v2 no default service exported

[justinelut]

Error: Loaders for module Payment failed: medusa-payment-paystack doesn't seem to have a main service exported -- make sure your module has a default export of a service, is there a way to fix this because am using medusa v2 for my store.

[a11rew]

Medusa 2 support

Hi @justinelut 👋
This plugin has not yet been updated to support Medusa 2 hence the error you're facing.
If you or anyone has adapted the service to work with Medusa 2 already, contributions are very welcome. Otherwise, I have this on the roadmap for the plugin and support will be added soon.

[justinelut]

Unfortunately i am a frontend developer and i dont know how to develop npm packages, i was developing a nextjs application for an ecommerce application based in kenya, i was using your paystack module and medusa, i have completed the frontend and deployed the backend but am unable to add payment,

[a11rew]

Started working on V2 support in #v2-support

[Jay13238]

Hey, I am also in a similar position as @justinelut

Just wanted to ask, how long do you think updating the plugin to V2 will take? Sorry if its a bother, just unsure on the process

[a11rew]

A beta version of this plugin with support for Medusa V2 has been published under the next tag.

You are welcome to try it out and report early issues here

npm install medusa-payment-paystack@next

You can find a tentative list of breaking changes here.

I expect to be done with the rest of the migration - tests, updating starters and writing a migration guide soon.

[Jay13238]

Awesome thank you so much

[a11rew]

From your screenshots, the Paystack session hasn't been initialised. Enable debug mode in the backend if it isn't already, you should see an error after choosing Paystack.

If the error says you're missing an email address make sure your call to initiatePaymentSession in the storefront contains the user's email as part of the context:

[justinelut]

everything is working fine but i get an error, when paystack pops up, duplicate transaction reference

[a11rew]

I imagine this is because you're retrying the failed transaction above and should go away with a new cart. To confirm, you are getting the reference in the storefront now yes?

You can force a new cart to be created by removing the _medusa_cart_id cookie in your devtools then try again

[justinelut]

just cleared the card id but still getting the same error, duplicate transaction reference

[a11rew]

@justinelut You will have to provide more information for me to be able to help you.

• Are you getting a reference in the payment session context?
• Is this reference provided by the plugin different in every new cart on your store?
• Are you passing the reference to the Paystack popup correctly?
• Is the amount you're passing to the popup the same amount passed to Paystack by the plugin? It should be amount * 100 in the frontend. You can confirm if they're different by going to the checkout link in paystackTxAuthData (will be at the same place you find the transaction reference) and then seeing the amount shown there
• Are you getting any errors in the backend from the plugin?

[justinelut]

backend paystack data is there as you can see in the above screenshot, the errors below arrises from paystack but as you can see am using the same ref from the backend in the request
,
and after i still get the below error

[justinelut]

here is my implementation of the paystack button

[a11rew]

@justinelut the issue is you're passing a different amount on the frontend than is sent to Paystack on the backend.

You're looking to pay 87089KES on your store. Paystack requires you send the value in the smallest subunit of the currency, i.e. amount * 100. The plugin sends Paystack the amount therefore as 8708900. Since the transaction has been initiated with that amount, when you send 87089 to Paystack on the frontend they return that 400 error.

To fix this, multiply the cart total in the frontend by 100 so the amount sent to Paystack is in the smallest currency sub-unit. i.e. in the amount prop passed to PaystackButton, multiple cart.total by 100.

[justinelut]

finally that worked, thnak you so much, let me continue testing it

[a11rew]

This among other reasons is why for V2 of this plugin, we'll likely no longer be recommending the react-paystack library. Paystack has a "Resume transaction" flow designed especially for this usecase which the library doesn't support. The storefront should not have to deal with the details of the transaction, it should just "resume" the transaction initiated on the backend.

I have an open issue filed in the react-paystack library - iamraphson/react-paystack#113 and there's an open PR iamraphson/react-paystack#110 adding partial support for it which both haven't received any activity so it isn't likely it will be added there anytime soon.

In V2, the recommended flow will be taking only the accessCode returned by the plugin and passing it to the Paystack popup to resume the transaction. No more fiddling with amounts and currency codes on the storefront. The one source of truth will be the transaction initialised on the backend.

[justinelut]

Thank you this works for me and am able to capture payments in the paystack dashboard, i think paystack should fix that multiplying by 100, its so frustrating to debug, if you dont follow the documentation properly

[waptik]

This among other reasons is why for V2 of this plugin, we'll likely no longer be recommending the react-paystack library. Paystack has a "Resume transaction" flow designed especially for this usecase which the library doesn't support. The storefront should not have to deal with the details of the transaction, it should just "resume" the transaction initiated on the backend.

I have an open issue filed in the react-paystack library - iamraphson/react-paystack#113 and there's an open PR iamraphson/react-paystack#110 adding partial support for it which both haven't received any activity so it isn't likely it will be added there anytime soon.

In V2, the recommended flow will be taking only the accessCode returned by the plugin and passing it to the Paystack popup to resume the transaction. No more fiddling with amounts and currency codes on the storefront. The one source of truth will be the transaction initialised on the backend.

Thanks for the latest update.
Looks like resumetransaction only accepts one parameter(accessCode) as seen here. Where to place await placeOrder() now if i'm using that method?

UPDATE: i was using @types/paystack__inline-js to get the types hence the confusion. i got the correct type definitions by borrowing code from https://github.com/adefemi/paystack-inline-ts

[a11rew]

With the release of v2.0 of the plugin in Nov '24 and the updating of the examples we have in this repo to show how the plugin can be integrated with V2 installations, this plugin now has official support for Medusa V2.

Closing this issue now, thank you guys.