If your goal is to keep the values from "optIn", you could add them last.

For example:

addCardData =  { 
  cardId, 
  cardName, 
  ...optIn 
};

If your goal is to add both versions of cardId and both versions of cardName, you have two options:

1. Change the name of cardId and cardName, since an object can only old one attribute with a given name.

For example:

addCardData =  { 
  newCardId: cardId, 
  newCardName: cardName, 
  ...optIn 
};

2. Add the optIn object as an attribute

addCardData =  { 
  cardId, 
  cardName, 
  optIn
};

Then you can refer to it by addCardData.optIn.cardId.

The main goal is just merge? I mean, merge choosing between new data or old data? Here is a sample code showing both cases:

    const cardId = 999;
    const cardName = "Anakin";
    const optIn = {a:123, b:456, cardId:789, cardName:"Skywalker"}
    
    console.log({ ...optIn, cardId, cardName}); // merge applying new data on cardId/cardName
    console.log({ cardId, cardName, ...optIn}); // merge keeping original data on cardId/cardName

Here is a way to combine both objects. If any of the properties already exists in optIn it will be changed into an array in addCardData and the new value will then be pushed onto it:

const optIn={a:123,b:456,cardId:789,cardName:"Harry"},cardId=222,cardName="Sally";

const addCardData = {...optIn};
Object.entries({cardId,cardName}).forEach(([k,v])=>{
 (addCardData[k]=Array.isArray(addCardData[k])?addCardData[k]:[addCardData[k]]).push(v)
});

console.log(addCardData);