[ad_1]
Hi,
I am using React Stripe Elements in FE and Woocommerce Stripe Payment Gateway Plugin as my BE. I see that I am required to pass ClientSecret variable from my server.
const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', };
How can I do that?
My code:
const [checkout] = useMutation<{ checkout: { order: Order }; }>(CHECKOUT, { onCompleted({ checkout }) { handleSuccessfulCheckout({ order: checkout.order }); if (subscribeToMailchimp) { addToMailchimp(shippingInfo.email); } }, onError(error) { console.log({ title: 'Error', description: 'There was an error with your checkout', status: 'error', }); console.error(error); setFormState('ERROR'); }, }); const handleSubmit = async (event: React.FormEvent) => { event.preventDefault(); setFormState('LOADING'); try { const source = (await handleStripe()) as Source; await checkout({ variables: { input: { paymentMethod: 'stripe', shippingMethod: 'Flat rate', billing: { firstName: shippingInfo.firstName, lastName: shippingInfo.lastName, address1: shippingInfo.address, email: shippingInfo.email, phone: shippingInfo.phone, }, metaData: [ { key:_stripe_source_id, value: source.id, }, ], }, }, }); } catch (error) { setShowErrorMessage(true); console.log({ title: 'Error', description: 'There was an error with your checkout', status: 'error', formState: formState, }); console.error(error); } }; async function handleStripe(): Promise<Source | Error> { if (!stripe || !elements) { throw Error(stripe or elements undefined); } const cardElements = elements.getElement(CardElement); if (!cardElements) { throw Error(Card elements not found); } const { source, error: sourceError } = await stripe.createSource( cardElements, { type: 'card', } ); if (sourceError || !source) { throw Error(sourceError?.message ||Unknown error generating source); } return source; } function handleSuccessfulCheckout({ order }: { order: Order }): void { setFormState('IDLE'); if (typeof window !== 'undefined') { localStorage.removeItem('woo-session'); } const emptyCart: Cart = { contents: { itemCount: 0, nodes: [], }, }; setCart(emptyCart); navigate('/uzsakymas/uzsakymas-gautas', { state: order }); }
Stripe events logs after “succesfull” order:
event:source.chargeable
{
"object": {
"id": "src_1ONoUpKhxv7ffxFkFfPkmQO8",
"object": "source",
"amount": null,
"card": {
"address_line1_check": null,
"address_zip_check": null,
"brand": "Visa",
"country": "DE",
"cvc_check": "unchecked",
"dynamic_last4": null,
"exp_month": 12,
"exp_year": 2025,
"fingerprint": "HRIlzg488RZFVOCG",
"funding": "credit",
"last4": "3184",
"name": null,
"three_d_secure": "required",
"tokenization_method": null
},
"client_secret": "src_client_secret_bRcoO8eiV5p4AHU6YOZEQthT",
"created": 1702697099,
"currency": null,
"flow": "none",
"livemode": false,
"metadata": {
},
"owner": {
"address": null,
"email": null,
"name": null,
"phone": null,
"verified_address": null,
"verified_email": null,
"verified_name": null,
"verified_phone": null
},
"statement_descriptor": null,
"status": "chargeable",
"type": "card",
"usage": "reusable"
}
}event:payment_intent.created
{
"object": {
"id": "pi_3ONoUtKhxv7ffxFk0aPDaV3z",
"object": "payment_intent",
"amount": 2729,
"amount_capturable": 0,
"amount_details": {
"tip": {
}
},
"amount_received": 0,
"application": null,
"application_fee_amount": null,
"automatic_payment_methods": null,
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "automatic",
"client_secret": "pi_3ONoUtKhxv7ffxFk0aPDaV3z_secret_lf7amrXoftevBss6zy5rwhqmq",
"confirmation_method": "automatic",
"created": 1702697103,
"currency": "eur",
"customer": null,
"description": "Rami oda - Order 3517",
"invoice": null,
"last_payment_error": null,
"latest_charge": null,
"livemode": false,
"metadata": {
"customer_email": "[email protected]",
"customer_name": "Romualdas tAMULAI",
"order_id": "3517",
"site_url": "https://simple.tamulaitis.com"
},
"next_action": null,
"on_behalf_of": null,
"payment_method": null,
"payment_method_configuration_details": null,
"payment_method_options": {
"card": {
"installments": null,
"mandate_options": null,
"network": null,
"request_three_d_secure": "automatic"
}
},
"payment_method_types": [
"card"
],
"processing": null,
"receipt_email": null,
"review": null,
"setup_future_usage": null,
"shipping": null,
"source": null,
"statement_descriptor": null,
"statement_descriptor_suffix": null,
"status": "requires_payment_method",
"transfer_data": null,
"transfer_group": null
}
}event:payment_intent.requires_action:
{
"object": {
"id": "pi_3ONoUtKhxv7ffxFk0aPDaV3z",
"object": "payment_intent",
"amount": 2729,
"amount_capturable": 0,
"amount_details": {
"tip": {
}
},
"amount_received": 0,
"application": null,
"application_fee_amount": null,
"automatic_payment_methods": null,
"canceled_at": null,
"cancellation_reason": null,
"capture_method": "automatic",
"client_secret": "pi_3ONoUtKhxv7ffxFk0aPDaV3z_secret_lf7amrXoftevBss6zy5rwhqmq",
"confirmation_method": "automatic",
"created": 1702697103,
"currency": "eur",
"customer": null,
"description": "Rami oda - Order 3517",
"invoice": null,
"last_payment_error": null,
"latest_charge": null,
"livemode": false,
"metadata": {
"customer_email": "[email protected]",
"customer_name": "Romualdas tAMULAI",
"order_id": "3517",
"site_url": "https://simple.tamulaitis.com"
},
"next_action": {
"type": "use_stripe_sdk",
"use_stripe_sdk": {
"source": "src_1ONoUuKhxv7ffxFkhXTT1zXb",
"stripe_js": "https://hooks.stripe.com/redirect/authenticate/src_1ONoUuKhxv7ffxFkhXTT1zXb?client_secret=src_client_secret_2cVpLt70qoh9dJ72kVfHoFSB&source_redirect_slug=test_YWNjdF8xT0N2UlhLaHh2N2ZmeEZrLF9QQ0N1VWpKeUdIU01URTA3NUtVS2VYakNsemI3czFh0100f9F8oTeK",
"type": "three_d_secure_redirect"
}
},
"on_behalf_of": null,
"payment_method": null,
"payment_method_configuration_details": null,
"payment_method_options": {
"card": {
"installments": null,
"mandate_options": null,
"network": null,
"request_three_d_secure": "automatic"
}
},
"payment_method_types": [
"card"
],
"processing": null,
"receipt_email": null,
"review": null,
"setup_future_usage": null,
"shipping": null,
"source": "src_1ONoUpKhxv7ffxFkFfPkmQO8",
"statement_descriptor": null,
"statement_descriptor_suffix": null,
"status": "requires_action",
"transfer_data": null,
"transfer_group": null
}
}I think the problem is that payment_intent.requires_action (“stripe_js”: “https://hooks.stripe.com/redirect/authenticate/src_1ONoUuKhxv7ffxFkhXTT1zXb?client_secret=src_client_secret_2cVpLt70qoh9dJ72kVfHoFSB&source_redirect_slug=test_YWNjdF8xT0N2UlhLaHh2N2ZmeEZrLF9QQ0N1VWpKeUdIU01URTA3NUtVS2VYakNsemI3czFh0100f9F8oTeK”) uses clientSecret not from the payment_intent.created (pi_3ONoUtKhxv7ffxFk0aPDaV3z_secret_lf7amrXoftevBss6zy5rwhqmq), but from the source.chargeable (src_client_secret_bRcoO8eiV5p4AHU6YOZEQthT).
So basically what I need help with is: how to get client_secret from payment_intent.created inside my React app? Because if I get it from from source.client_secret (see my code above) I get the wrong one (with src_client in the beggining).