Giters

duffelhq / duffel-api-javascript

JavaScript client library for the Duffel API

Home Page:https://duffel.com/docs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CardPayment Component

iamcharlesb opened this issue · comments

commented

Hello Team,

The CardPayment component isn't working. I tried both the React and Vanilla JS components and both throw an error.

Component URL
https://duffel.com/docs/guides/collecting-customer-card-payments

Please check the attached screenshot below
image

Please let me know if there is any other way I can collect the Payments from the customer?

Regards,
Charles

commented

Hi @iamcharlesb, thanks for reporting it and I'm sorry you are having issues! Could you provide a few more details to help us out with debugging? How are you rendering the component, what React version are you using? What component library version are you using?

commented

Hello @lapa182 - I have just imported the CardPayment and used in React project just as it is and came across the above Error ( The error can be seen in the above screenshot ). I tried this in my Next JS project.

Also I copied your HTML and Vanilla JS, ran separately from React JS and this one too throwed the same error as above.

commented

Could you provide the code example, a sandbox or a repository so we can check? I created a separate project using CRA and Next.js and tested both versions of React (17 and 18), using the latest component library and seems to work fine.

A working example for example:

import { CardPayment } from '@duffel/components'
import '@duffel/components/dist/CardPayment.min.css'

const successfulPaymentHandlerFn = () => {
  alert('yay!')
}

const errorPaymentHandlerFn = (error) => {
  alert('nay!')
}

export const Example = () => (
  <CardPayment
    duffelPaymentIntentClientToken={'eyJjbGllbnRfc2VjcmV0IjoicGlfM0xEbHBVQWcySmhFeTh2WTBXTUxPZ1NuX3NlY3JldF9VREpvNm1uVTZLV05JaGVzRkJyNGxVOTNLIiwicHVibGlzaGFibGVfa2V5IjoicGtfdGVzdF9EQUJLY0E2Vzh6OTc0cTdPSWY0YmJ2MVQwMEpwRmMyOUpWIn0='}
    successfulPaymentHandler={successfulPaymentHandlerFn}
    errorPaymentHandler={errorPaymentHandlerFn}
  />
)
commented

Thank you @lapa182 .

Please check this git repo. I have zipped up the react project and you can do the setup using "npm install --save-dev" command.
https://github.com/iamcharlesb/duffel

commented

Thanks, @iamcharlesb. I just cloned your repository and find out we have a bug that when you use an invalid client token it doesn't render the component correctly. If you update your token to use the one I provided you should be able to generate it for testing purposes.

I suggest following our guide on how to collect the payment to retrieve a valid duffelPaymentIntentClientToken.

I will raise a ticket for our team to improve how we handle invalid duffelPaymentIntentClientToken to generate a friendlier error message.

commented

Thanks a ton @lapa182 . Please could you share any link to generate the client token?

commented

@iamcharlesb sorry for the late reply! You should be able to get duffelPaymentIntentClientToken by following this guide. It comes after you create your payment intent

commented

Closed the issue as stale.

commented