#Fork
lost valley
I am embedding a Stripe form on a HubSpot Quote to collect payment info along with some other details by form inputs.
Current implementation is with a Card Element, a PaymentIntent is created prior to the Quote and pi_sk added to the form. They fill in details and submit, this adds other filled inputs against the Source as Metadata. A source.chargeable webhook then fires off and we join the dots and update where necessary.
I'm wanting to change the Card Element to a Payment Element (and SetupIntent instead of PaymentIntent), to open up Direct Deposit and other payment options. This is a fairly simple change on the form, but the Payment element doesn't allow metadata to be added to it and I can't see another way to do this from within the form submission and Stripe JS (confirmSetup). Those additional input fields being stored in metadata is a strong requirement for this project.
The only way I can think of supporting the Payment Element is to on form submit have an ajax call fire off metadata to our servers directly, then make the call to StripeJS confirmSetup, then on receiving a different webhook event tie them together.
Is this the best way forward for my requirements?
empty gazelle
this adds other filled inputs against the Source as Metadata
Could you elaborate this one? An example request?
lost valley
// not all form inputs filled out
var errorElement = document.getElementById('card-errors');
errorElement.textContent = 'Please ensure all fields are completed';
} else {
// form filled out fully
var sourceInfo = {
owner: {
name: info_name,
email: info_email,
},
metadata: {
ptgid_billingentity: ptgid,
hubspot_deal_id: info_deal_id,
hubspot_company_id: info_company_id,
abn: info_abn,
billing_email: info_billingemail,
method_of_payment: 'stripe',
company_entity_name: info_entity,
stripe_customer_id: customer_id,
pi_sk: pi_sk,
signer_name: info_name,
signer_email: info_email
}
};
// Ref: https://stripe.com/docs/js/tokens_sources/create_source
stripe.createSource(card, sourceInfo).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the source to your server
stripeSourceHandler(result.source);
}
});
}```Can you include these metadata on when creating PaymentIntent?
or SetupIntent, in server
lost valley
The PaymentIntent/SetupIntent needs to be created prior to the Quote being created, as it needs to drop in the SK for the Card/Payment element to work
empty gazelle
Um I see. So after you have the Quote and before confirming on PaymentElement, fire a request to backend with these metadata, and try to update the PI/SI with the metadata
would it work?
Mostly like your suggestion tho
lost valley
That's what I was thinking yeah, just wanting to make sure I wasn't missing something that allows me to forego that extra step sending metadata separately - piggybacking it to Stripe another way. eg if there was an UpdateSetupIntent JS option
No worries if that is the best way forward, just making sure I wasn't missing anything 👍