-
Notifications
You must be signed in to change notification settings - Fork 30
swell.payment.createElements does not respect seperateElements option #98
Copy link
Copy link
Open
Description
I'd like to render separate elements for card's number, expiration and CVC. However when I use config for swell.payment.createElements mentioned in official docs it does not respect seperateElements option.
In browser I get this error message:
The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().
When I specify elementId directly for card and use it without !seperateElements: true` it works.
useEffect(() => {
swell.payment.createElements({
card: {
seperateElements: true,
cardNumber: {
elementId: '#card-number',
},
cardExpiry: {
elementId: '#card-expiry',
},
cardCvc: {
elementId: '#card-cvc',
}
}
})
}, [])
return (
<label>
<span className="copy">Card Number</span>
<div id="card-number" />
</label>
<div className="flex flex-between gap-20">
<label className="flex-1">
<span className="copy">Card Expiry</span>
<div id="card-expiry" />
</label>
<label className="flex-1">
<span className="copy">CVC</span>
<div id="card-cvc" />
</label>
</div>
)
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels