Endpoint to get clientSecret
-
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).
Viewing 7 replies - 1 through 7 (of 7 total)
Viewing 7 replies - 1 through 7 (of 7 total)
- The topic ‘Endpoint to get clientSecret’ is closed to new replies.
