Why isn't a Key from my model not reactive using the Stripe Elements example?

Support
1

I am working with the Stripe Custom elements example and have run into something I don’t understand. I am having the Stripe Elements come up in a card modal, and that works. I am also setting the card modal model via

"function": "action.options.model = model"

When I use default data with a key that is set with the Stripe card.element EventListener, it reacts. If I turn off the default data and put that same key in my model, it doesn’t react. When I look at the console, the model where I have set it with the function shows

errorMsg: ""

if I use the default data model, it shows

errorMsg: (...)

Which I think is a getter? That is the only difference I see. I am wondering if there is a way to make that key from my model a getter?

2

The most common reason a newly added key is not reactive is because its ‘parent’ object is not set.
can you show us the objects before the new key needs to be reactive and also the same object on with the working method.

BTW you can pre-build the parent object with the data model as an empty object. ( I suspect that is why the dev data works )

c

3

I tried a couple of things with the data model. I have an invoice detail page that contains the payment button to bring up the Stripe Elements payment card modal. I have this model (below) as default, but it is also the same when I use onFormRequest Hook. I have added the keys I want to be reactive to FileMaker to pull from the hook and added them to the default data model. When I click the payment button from the invoice detail page, the only way I can get it to be reactive is if I include the reactive keys as a default data model and they merge with my model.

Working model:

invoiceAgreeNum: "207431"
invoiceAgreementNum: "207431"
invoiceAgreementType: "Defensible Space"
invoiceAgreementURL: "#/agreementdetail?type=detail&id=207431"
invoiceBal: 100
invoiceBillAddress: "123 Avenue"
invoiceBillCity: "Truckee"
invoiceBillName: "John Smith"
invoiceBillState: "CA"
invoiceBillZip: "98989"
invoiceDateCompleted: "05/14/2020"
invoiceItems: [{…}, __ob__: Te]
invoiceKey: "18125"
invoiceNetTerms: ""
invoiceNum: "18125"
invoiceProperty: "123 Drive"
invoiceTotal: 1525
invoiceTotalPayments: 1425
payItems: (2) [{…}, {…}, __ob__: Te]
stripeErrorMsg: (...)
stripeIsLoading: (...)
stripeResult: (...)
__ob__: Te {value: {…}, dep: pe, vmCount: 0}
get stripeErrorMsg: *ƒ* *()*
set stripeErrorMsg: *ƒ* *(t)*
get stripeIsLoading: *ƒ* *()*
set stripeIsLoading: *ƒ* *(t)*
get stripeResult: *ƒ* *()*
set stripeResult: *ƒ* *(t)*
__proto__: Object

Non-working model

invoiceAgreeNum: "207431" 
invoiceAgreementNum: "207431"
 invoiceAgreementType: "Defensible Space" invoiceAgreementURL: "#/agreementdetail?type=detail&id=207431"
 invoiceBal: 100
 invoiceBillAddress: "123 Avenue" 
invoiceBillCity: "Truckee" 
invoiceBillName: "John Smith"
 invoiceBillState: "CA"
 invoiceBillZip: "98989"
 invoiceDateCompleted: "05/14/2020"
 invoiceItems: [{…}, __ob__: Te]
 invoiceKey: "18125" 
invoiceNetTerms: "" 
invoiceNum: "18125"
 invoiceProperty: "123 Drive" 
invoiceTotal: 1525
 invoiceTotalPayments: 1425
 payItems: (2) [{…}, {…}, __ob__: Te] 
stripeErrorMsg: "" 
stripeIsLoading: ""
 stripeResult: "{}" __ob__: Te {value: {…}, dep: pe, vmCount: 0
 __proto__: Object