javascript - Stripe not showing paymentDetails in production. Using NextJS - Stack Overflow

admin管理员组

文章数量:1025259

I've already tested my application using Sandbox credentials, both publishable key and secret.I'm now trying to enable stripe in production mode.

The issue

• In my ui when I change the publishable key to use the live one, no paymentdetails are shown
• If I switch to the test one, it shows correctly

I'm not sure what's missing. i've let enabled only 1 payment methods (card). I don't see any errors so I have a hard time identifying what's the issue.

Here is my paymentDetails component:

"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });


interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName)
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited()
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited")
            onSubmited()
          }
        }

      } else {
        setLoading(false)
      }
    } catch (error) {
      setLoading(false)
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "[email protected]"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"[email protected]"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

I have checked, the logged publishable key is the right one that is shown in stripe dashboard.

Here is the UI diff when I just change the publishable key between test and production modes:

Test

Live mode

Here is the response of the stripe api call to elements/sessions

{
  "account_id": "acct_1QCnqaKB54wUKrYC",
  "apple_pay_merchant_token_webhook_url": null,
  "apple_pay_preference": "disabled",
  "business_name": "PurrStack",
  "card_brand_choice": {
    "eligible": false,
    "preferred_networks": [
      "cartes_bancaires"
    ],
    "supported_cobranded_networks": {
      "cartes_bancaires": false
    }
  },
  "card_installments_enabled": false,
  "custom_payment_method_data": null,
  "customer": null,
  "customer_error": null,
  "experiments_data": {
    "arb_id": "5aefef1d-edf9-4fde-b052-c338d61da6ee",
    "experiment_assignments": {
      "elements_merchant_ui_api_srv": "control",
      "link_global_holdback": "control",
      "link_global_holdback_aa": "holdback",
      "link_popup_webview_option_ios": "control"
    },
    "experiment_metadata": {
      "seed": "22667d1120777235810ad9e2d094443aeecfee4a7c9209374358cf466a0573f4",
      "semi_dominant_payment_methods": []
    }
  },
  "external_payment_method_data": null,
  "flags": {
    "cbc_in_link_popup": true,
    "disable_cbc_in_link_popup": false,
    "disable_payment_element_if_required_billing_config": false,
    "ece_apple_pay_payment_request_passthrough": false,
    "elements_appearance_payment_accordion_overrides": false,
    "elements_disable_express_checkout_button_amazon_pay": false,
    "elements_disable_klarna_ece_crossborder_validation": false,
    "elements_disable_link_email_otp": false,
    "elements_disable_link_global_holdback_lookup": false,
    "elements_disable_payment_element_card_country_zip_validations": false,
    "elements_disable_paypal_express": false,
    "elements_disable_recurring_express_checkout_button_amazon_pay": false,
    "elements_enable_19_digit_pans": false,
    "elements_enable_ach_consumer_sign_up_incentive": true,
    "elements_enable_blik": true,
    "elements_enable_br_card_installments": false,
    "elements_enable_cb_apple_pay_for_connect_platforms": true,
    "elements_enable_controller_app_frame_messenger": false,
    "elements_enable_express_checkout_button_demo_pay": false,
    "elements_enable_external_payment_method_alipay_mobile": false,
    "elements_enable_external_payment_method_amazon_pay": false,
    "elements_enable_external_payment_method_aplazame": false,
    "elements_enable_external_payment_method_aplazo": false,
    "elements_enable_external_payment_method_atome": false,
    "elements_enable_external_payment_method_atone": false,
    "elements_enable_external_payment_method_au_pay": false,
    "elements_enable_external_payment_method_azupay": false,
    "elements_enable_external_payment_method_bankaxept": false,
    "elements_enable_external_payment_method_benefit": false,
    "elements_enable_external_payment_method_billie": false,
    "elements_enable_external_payment_method_bizum": false,
    "elements_enable_external_payment_method_bluecode": false,
    "elements_enable_external_payment_method_bpay": false,
    "elements_enable_external_payment_method_catch": false,
    "elements_enable_external_payment_method_check": false,
    "elements_enable_external_payment_method_coinbase_pay": false,
    "elements_enable_external_payment_method_dankort": false,
    "elements_enable_external_payment_method_dapp": false,
    "elements_enable_external_payment_method_dbarai": false,
    "elements_enable_external_payment_method_divido": false,
    "elements_enable_external_payment_method_ebt_snap": false,
    "elements_enable_external_payment_method_eftpos_australia": false,
    "elements_enable_external_payment_method_famipay": false,
    "elements_enable_external_payment_method_fawry": false,
    "elements_enable_external_payment_method_fonix": false,
    "elements_enable_external_payment_method_gcash": false,
    "elements_enable_external_payment_method_girocard": false,
    "elements_enable_external_payment_method_gopay": false,
    "elements_enable_external_payment_method_grabpay_later": false,
    "elements_enable_external_payment_method_hands_in": false,
    "elements_enable_external_payment_method_humm": false,
    "elements_enable_external_payment_method_interac": false,
    "elements_enable_external_payment_method_iwocapay": false,
    "elements_enable_external_payment_method_kbc": false,
    "elements_enable_external_payment_method_knet": false,
    "elements_enable_external_payment_method_kriya": false,
    "elements_enable_external_payment_method_laybuy": false,
    "elements_enable_external_payment_method_line_pay": false,
    "elements_enable_external_payment_method_mb_way": false,
    "elements_enable_external_payment_method_mercado_pago": false,
    "elements_enable_external_payment_method_merpay": false,
    "elements_enable_external_payment_method_momo": false,
    "elements_enable_external_payment_method_mondu": false,
    "elements_enable_external_payment_method_mybank": false,
    "elements_enable_external_payment_method_netbanking": false,
    "elements_enable_external_payment_method_nexi_pay": false,
    "elements_enable_external_payment_method_oney": false,
    "elements_enable_external_payment_method_online_banking_czech_republic": false,
    "elements_enable_external_payment_method_online_banking_finland": false,
    "elements_enable_external_payment_method_online_banking_poland": false,
    "elements_enable_external_payment_method_online_banking_slovakia": false,
    "elements_enable_external_payment_method_online_banking_thailand": false,
    "elements_enable_external_payment_method_paidy": false,
    "elements_enable_external_payment_method_pay_easy": false,
    "elements_enable_external_payment_method_paybright": false,
    "elements_enable_external_payment_method_payconiq": false,
    "elements_enable_external_payment_method_paydirekt": false,
    "elements_enable_external_payment_method_payit": false,
    "elements_enable_external_payment_method_paypay": false,
    "elements_enable_external_payment_method_paypo": false,
    "elements_enable_external_payment_method_payrexx": false,
    "elements_enable_external_payment_method_paysafecard": false,
    "elements_enable_external_payment_method_paytm": false,
    "elements_enable_external_payment_method_payu": false,
    "elements_enable_external_payment_method_picpay": false,
    "elements_enable_external_payment_method_pix_international": false,
    "elements_enable_external_payment_method_planpay": false,
    "elements_enable_external_payment_method_pledg": false,
    "elements_enable_external_payment_method_poli": false,
    "elements_enable_external_payment_method_postepay": false,
    "elements_enable_external_payment_method_postfinance": false,
    "elements_enable_external_payment_method_rabbitline_pay": false,
    "elements_enable_external_payment_method_rakuten_pay": false,
    "elements_enable_external_payment_method_ratepay": false,
    "elements_enable_external_payment_method_samsung_pay": false,
    "elements_enable_external_payment_method_satispay": false,
    "elements_enable_external_payment_method_scalapay": false,
    "elements_enable_external_payment_method_sequra": false,
    "elements_enable_external_payment_method_sezzle": false,
    "elements_enable_external_payment_method_skrill": false,
    "elements_enable_external_payment_method_swish": false,
    "elements_enable_external_payment_method_tabby": false,
    "elements_enable_external_payment_method_titres_restaurant": false,
    "elements_enable_external_payment_method_tng": false,
    "elements_enable_external_payment_method_truelayer": false,
    "elements_enable_external_payment_method_trustly": false,
    "elements_enable_external_payment_method_twint": false,
    "elements_enable_external_payment_method_v_pay": false,
    "elements_enable_external_payment_method_venmo": false,
    "elements_enable_external_payment_method_vipps": false,
    "elements_enable_external_payment_method_wallets_india": false,
    "elements_enable_external_payment_method_walley": false,
    "elements_enable_external_payment_method_wechat_mobile": false,
    "elements_enable_external_payment_method_younitedpay": false,
    "elements_enable_installments_on_deferred_intents": false,
    "elements_enable_invalid_country_for_pm_error": true,
    "elements_enable_jp_card_installments": false,
    "elements_enable_klarna_express_checkout": false,
    "elements_enable_link_in_ece_personalization": true,
    "elements_enable_link_in_passthrough_ece": true,
    "elements_enable_link_spm": true,
    "elements_enable_mx_card_installments": false,
    "elements_enable_nz_bank_account_spm": false,
    "elements_enable_passive_captcha": true,
    "elements_enable_passive_hcaptcha_in_payment_method_creation": true,
    "elements_enable_progressive_cursor": false,
    "elements_enable_read_allow_redisplay": true,
    "elements_enable_save_for_future_payments_pre_check": false,
    "elements_enable_south_korea_market_underlying_pms": false,
    "elements_enable_write_allow_redisplay": true,
    "elements_hide_card_brand_icons": false,
    "elements_link_global_holdback_rollout": true,
    "elements_should_hide_us_bank_account_manual_entry_cta": false,
    "elements_spm_max_visible_payment_methods": false,
    "elements_spm_messages": false,
    "elements_spm_set_as_default": false,
    "elements_stop_move_focus_to_first_errored_field": true,
    "enable_apple_pay_crossbrowser_express_checkout_element": false,
    "enable_custom_checkout_currency_selector_element": false,
    "enable_express_checkout_click_shape_changes": false,
    "financial_connections_enable_deferred_intent_flow": true,
    "id_bank_transfers_v1_integration": false,
    "legacy_confirmation_tokens": false,
    "link_enable_card_brand_choice": true,
    "link_enable_get_payment_status_in_payment_element": false,
    "link_purchase_protections_rollout": false,
    "payment_element_link_modal_preload_killswitch": false,
    "paypal_express_checkout_recurring_support": false,
    "show_swish_factoring_notice": true,
    "show_swish_redirect_and_qr_code_auth_flows": true,
    "use_link_views": false
  },
  "google_pay_preference": "disabled",
  "klarna_express_config": {
    "klarna_mid": null
  },
  "legacy_customer": null,
  "link_purchase_protections_data": {
    "is_eligible": false,
    "type": null
  },
  "link_settings": {
    "link_authenticated_change_event_enabled": false,
    "link_bank_incentives_enabled": false,
    "link_bank_onboarding_enabled": false,
    "link_consumer_incentive": null,
    "link_crypto_onramp_bank_upsell": false,
    "link_crypto_onramp_elements_logout_disabled": false,
    "link_crypto_onramp_force_cvc_reverification": false,
    "link_default_opt_in": "NONE",
    "link_disable_email_otp": false,
    "link_disabled_reasons": {
      "payment_element_passthrough_mode": [
        "automatic_payment_methods_enabled",
        "link_not_enabled_on_payment_config",
        "does_not_include_card_in_payment_method_types",
        "disable_passthrough_for_billing"
      ],
      "payment_element_payment_method_mode": [
        "link_not_specified_in_payment_method_types"
      ]
    },
    "link_elements_is_crypto_onramp": false,
    "link_elements_pageload_sign_up_disabled": false,
    "link_email_verification_login_enabled": false,
    "link_enable_email_otp_for_link_popup": false,
    "link_enable_instant_debits_in_testmode": false,
    "link_enable_webauthn_for_link_popup": false,
    "link_financial_incentives_experiment_enabled": false,
    "link_funding_sources": [],
    "link_global_holdback_on": false,
    "link_hcaptcha_rqdata": "mSH3BRFHoxZZfaUH8+p1e2XHnkinYZHbVc/n6cLCPqEqC01zukWGICSrLhgf/ZzUDyo5AzwbOSnSZD3UcVNAcgB+5RID0OMZ1KqDgWsuMw4ojhBgq9MsVfPNYT5E8I2BnVB7q2bcb5ORmKJCgD+WfRlEAi69S5HBPQdrJq789OEevQ+tDTAvjbfx18i5bjkABdnS67RpgxxGyJpVq9l7vVNnXsAVg0HLJ9qPxex0Hk4SVA==eyTWs4jlhdl43nE9",
    "link_hcaptcha_site_key": "24ed0064-62cf-4d42-9960-5dd1a41d4e29",
    "link_instant_debits_new_incentive_display_enabled": false,
    "link_local_storage_login_enabled": false,
    "link_m2_default_integration_enabled": false,
    "link_mode": null,
    "link_no_code_default_values_identification": true,
    "link_no_code_default_values_recall": true,
    "link_no_code_default_values_usage": true,
    "link_only_for_payment_method_types_enabled": false,
    "link_passthrough_mode_enabled": false,
    "link_pay_button_element_enabled": true,
    "link_payment_element_disabled_by_targeting": false,
    "link_payment_element_enable_webauthn_login": false,
    "link_payment_session_context": null,
    "link_pm_killswitch_on_in_elements": false,
    "link_popup_webview_option": "shared",
    "link_session_storage_login_enabled": false,
    "link_supported_payment_methods": [],
    "link_targeting_results": {
      "payment_element_passthrough_mode": null
    },
    "link_user_session_id_accuracy_test": false
  },
  "lpm_promotions": null,
  "merchant_country": "FR",
  "merchant_currency": "eur",
  "merchant_id": "acct_1QCnqaKB54wUKrYC",
  "merchant_logo_url": null,
  "meta_pay_signed_container_context": null,
  "order": null,
  "ordered_payment_method_types_and_wallets": [],
  "passive_captcha": {
    "rqdata": null,
    "site_key": "463b917e-e264-403f-ad34-34af0ee10294"
  },
  "payment_method_preference": {
    "object": "payment_method_preference",
    "country_code": "FR",
    "ordered_payment_method_types": [],
    "type": "deferred_intent"
  },
  "payment_method_specs": [],
  "paypal_express_config": {
    "client_id": null,
    "paypal_merchant_id": null
  },
  "prefill_selectors": {
    "default_values": {
      "email": [],
      "merchant_provides_default_values_on_update": true
    }
  },
  "session_id": "elements_session_13Xt3YispIJ",
  "shipping_address_settings": {
    "autocomplete_allowed": false
  },
  "unactivated_payment_method_types": [],
  "unverified_payment_methods_on_domain": [
    "apple_pay"
  ]
}

There are also a bunch of warnings and error that don't show in test mode but does when I try to open the paymentdetails in production

lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
8[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
inpage.js:1 MetaMask no longer injects web3. For details, see: .html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
inpage.js:1 MetaMask no longer injects web3. For details, see: .html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
46d9f3f7-05df-4153-b70b-0a9c3d8d8226:1 WebGPU is experimental on this platform. See 
a2986899-90fa-4235-a54a-59c6882dfd0e:1 WebGPU is experimental on this platform. See 
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
blob::1 WebGPU is experimental on this platform. See 
blob::1 WebGPU is experimental on this platform. See 
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context Provider

I'm all hears thanks for the help :)

The website in question (if it helps, but requires login / registration to reach the payment details): /dashboard

I've already tested my application using Sandbox credentials, both publishable key and secret.I'm now trying to enable stripe in production mode.

The issue

• In my ui when I change the publishable key to use the live one, no paymentdetails are shown
• If I switch to the test one, it shows correctly

I'm not sure what's missing. i've let enabled only 1 payment methods (card). I don't see any errors so I have a hard time identifying what's the issue.

Here is my paymentDetails component:

"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });


interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName)
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited()
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited")
            onSubmited()
          }
        }

      } else {
        setLoading(false)
      }
    } catch (error) {
      setLoading(false)
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "[email protected]"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"[email protected]"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

I have checked, the logged publishable key is the right one that is shown in stripe dashboard.

Here is the UI diff when I just change the publishable key between test and production modes:

Test

Live mode

Here is the response of the stripe api call to elements/sessions

{
  "account_id": "acct_1QCnqaKB54wUKrYC",
  "apple_pay_merchant_token_webhook_url": null,
  "apple_pay_preference": "disabled",
  "business_name": "PurrStack",
  "card_brand_choice": {
    "eligible": false,
    "preferred_networks": [
      "cartes_bancaires"
    ],
    "supported_cobranded_networks": {
      "cartes_bancaires": false
    }
  },
  "card_installments_enabled": false,
  "custom_payment_method_data": null,
  "customer": null,
  "customer_error": null,
  "experiments_data": {
    "arb_id": "5aefef1d-edf9-4fde-b052-c338d61da6ee",
    "experiment_assignments": {
      "elements_merchant_ui_api_srv": "control",
      "link_global_holdback": "control",
      "link_global_holdback_aa": "holdback",
      "link_popup_webview_option_ios": "control"
    },
    "experiment_metadata": {
      "seed": "22667d1120777235810ad9e2d094443aeecfee4a7c9209374358cf466a0573f4",
      "semi_dominant_payment_methods": []
    }
  },
  "external_payment_method_data": null,
  "flags": {
    "cbc_in_link_popup": true,
    "disable_cbc_in_link_popup": false,
    "disable_payment_element_if_required_billing_config": false,
    "ece_apple_pay_payment_request_passthrough": false,
    "elements_appearance_payment_accordion_overrides": false,
    "elements_disable_express_checkout_button_amazon_pay": false,
    "elements_disable_klarna_ece_crossborder_validation": false,
    "elements_disable_link_email_otp": false,
    "elements_disable_link_global_holdback_lookup": false,
    "elements_disable_payment_element_card_country_zip_validations": false,
    "elements_disable_paypal_express": false,
    "elements_disable_recurring_express_checkout_button_amazon_pay": false,
    "elements_enable_19_digit_pans": false,
    "elements_enable_ach_consumer_sign_up_incentive": true,
    "elements_enable_blik": true,
    "elements_enable_br_card_installments": false,
    "elements_enable_cb_apple_pay_for_connect_platforms": true,
    "elements_enable_controller_app_frame_messenger": false,
    "elements_enable_express_checkout_button_demo_pay": false,
    "elements_enable_external_payment_method_alipay_mobile": false,
    "elements_enable_external_payment_method_amazon_pay": false,
    "elements_enable_external_payment_method_aplazame": false,
    "elements_enable_external_payment_method_aplazo": false,
    "elements_enable_external_payment_method_atome": false,
    "elements_enable_external_payment_method_atone": false,
    "elements_enable_external_payment_method_au_pay": false,
    "elements_enable_external_payment_method_azupay": false,
    "elements_enable_external_payment_method_bankaxept": false,
    "elements_enable_external_payment_method_benefit": false,
    "elements_enable_external_payment_method_billie": false,
    "elements_enable_external_payment_method_bizum": false,
    "elements_enable_external_payment_method_bluecode": false,
    "elements_enable_external_payment_method_bpay": false,
    "elements_enable_external_payment_method_catch": false,
    "elements_enable_external_payment_method_check": false,
    "elements_enable_external_payment_method_coinbase_pay": false,
    "elements_enable_external_payment_method_dankort": false,
    "elements_enable_external_payment_method_dapp": false,
    "elements_enable_external_payment_method_dbarai": false,
    "elements_enable_external_payment_method_divido": false,
    "elements_enable_external_payment_method_ebt_snap": false,
    "elements_enable_external_payment_method_eftpos_australia": false,
    "elements_enable_external_payment_method_famipay": false,
    "elements_enable_external_payment_method_fawry": false,
    "elements_enable_external_payment_method_fonix": false,
    "elements_enable_external_payment_method_gcash": false,
    "elements_enable_external_payment_method_girocard": false,
    "elements_enable_external_payment_method_gopay": false,
    "elements_enable_external_payment_method_grabpay_later": false,
    "elements_enable_external_payment_method_hands_in": false,
    "elements_enable_external_payment_method_humm": false,
    "elements_enable_external_payment_method_interac": false,
    "elements_enable_external_payment_method_iwocapay": false,
    "elements_enable_external_payment_method_kbc": false,
    "elements_enable_external_payment_method_knet": false,
    "elements_enable_external_payment_method_kriya": false,
    "elements_enable_external_payment_method_laybuy": false,
    "elements_enable_external_payment_method_line_pay": false,
    "elements_enable_external_payment_method_mb_way": false,
    "elements_enable_external_payment_method_mercado_pago": false,
    "elements_enable_external_payment_method_merpay": false,
    "elements_enable_external_payment_method_momo": false,
    "elements_enable_external_payment_method_mondu": false,
    "elements_enable_external_payment_method_mybank": false,
    "elements_enable_external_payment_method_netbanking": false,
    "elements_enable_external_payment_method_nexi_pay": false,
    "elements_enable_external_payment_method_oney": false,
    "elements_enable_external_payment_method_online_banking_czech_republic": false,
    "elements_enable_external_payment_method_online_banking_finland": false,
    "elements_enable_external_payment_method_online_banking_poland": false,
    "elements_enable_external_payment_method_online_banking_slovakia": false,
    "elements_enable_external_payment_method_online_banking_thailand": false,
    "elements_enable_external_payment_method_paidy": false,
    "elements_enable_external_payment_method_pay_easy": false,
    "elements_enable_external_payment_method_paybright": false,
    "elements_enable_external_payment_method_payconiq": false,
    "elements_enable_external_payment_method_paydirekt": false,
    "elements_enable_external_payment_method_payit": false,
    "elements_enable_external_payment_method_paypay": false,
    "elements_enable_external_payment_method_paypo": false,
    "elements_enable_external_payment_method_payrexx": false,
    "elements_enable_external_payment_method_paysafecard": false,
    "elements_enable_external_payment_method_paytm": false,
    "elements_enable_external_payment_method_payu": false,
    "elements_enable_external_payment_method_picpay": false,
    "elements_enable_external_payment_method_pix_international": false,
    "elements_enable_external_payment_method_planpay": false,
    "elements_enable_external_payment_method_pledg": false,
    "elements_enable_external_payment_method_poli": false,
    "elements_enable_external_payment_method_postepay": false,
    "elements_enable_external_payment_method_postfinance": false,
    "elements_enable_external_payment_method_rabbitline_pay": false,
    "elements_enable_external_payment_method_rakuten_pay": false,
    "elements_enable_external_payment_method_ratepay": false,
    "elements_enable_external_payment_method_samsung_pay": false,
    "elements_enable_external_payment_method_satispay": false,
    "elements_enable_external_payment_method_scalapay": false,
    "elements_enable_external_payment_method_sequra": false,
    "elements_enable_external_payment_method_sezzle": false,
    "elements_enable_external_payment_method_skrill": false,
    "elements_enable_external_payment_method_swish": false,
    "elements_enable_external_payment_method_tabby": false,
    "elements_enable_external_payment_method_titres_restaurant": false,
    "elements_enable_external_payment_method_tng": false,
    "elements_enable_external_payment_method_truelayer": false,
    "elements_enable_external_payment_method_trustly": false,
    "elements_enable_external_payment_method_twint": false,
    "elements_enable_external_payment_method_v_pay": false,
    "elements_enable_external_payment_method_venmo": false,
    "elements_enable_external_payment_method_vipps": false,
    "elements_enable_external_payment_method_wallets_india": false,
    "elements_enable_external_payment_method_walley": false,
    "elements_enable_external_payment_method_wechat_mobile": false,
    "elements_enable_external_payment_method_younitedpay": false,
    "elements_enable_installments_on_deferred_intents": false,
    "elements_enable_invalid_country_for_pm_error": true,
    "elements_enable_jp_card_installments": false,
    "elements_enable_klarna_express_checkout": false,
    "elements_enable_link_in_ece_personalization": true,
    "elements_enable_link_in_passthrough_ece": true,
    "elements_enable_link_spm": true,
    "elements_enable_mx_card_installments": false,
    "elements_enable_nz_bank_account_spm": false,
    "elements_enable_passive_captcha": true,
    "elements_enable_passive_hcaptcha_in_payment_method_creation": true,
    "elements_enable_progressive_cursor": false,
    "elements_enable_read_allow_redisplay": true,
    "elements_enable_save_for_future_payments_pre_check": false,
    "elements_enable_south_korea_market_underlying_pms": false,
    "elements_enable_write_allow_redisplay": true,
    "elements_hide_card_brand_icons": false,
    "elements_link_global_holdback_rollout": true,
    "elements_should_hide_us_bank_account_manual_entry_cta": false,
    "elements_spm_max_visible_payment_methods": false,
    "elements_spm_messages": false,
    "elements_spm_set_as_default": false,
    "elements_stop_move_focus_to_first_errored_field": true,
    "enable_apple_pay_crossbrowser_express_checkout_element": false,
    "enable_custom_checkout_currency_selector_element": false,
    "enable_express_checkout_click_shape_changes": false,
    "financial_connections_enable_deferred_intent_flow": true,
    "id_bank_transfers_v1_integration": false,
    "legacy_confirmation_tokens": false,
    "link_enable_card_brand_choice": true,
    "link_enable_get_payment_status_in_payment_element": false,
    "link_purchase_protections_rollout": false,
    "payment_element_link_modal_preload_killswitch": false,
    "paypal_express_checkout_recurring_support": false,
    "show_swish_factoring_notice": true,
    "show_swish_redirect_and_qr_code_auth_flows": true,
    "use_link_views": false
  },
  "google_pay_preference": "disabled",
  "klarna_express_config": {
    "klarna_mid": null
  },
  "legacy_customer": null,
  "link_purchase_protections_data": {
    "is_eligible": false,
    "type": null
  },
  "link_settings": {
    "link_authenticated_change_event_enabled": false,
    "link_bank_incentives_enabled": false,
    "link_bank_onboarding_enabled": false,
    "link_consumer_incentive": null,
    "link_crypto_onramp_bank_upsell": false,
    "link_crypto_onramp_elements_logout_disabled": false,
    "link_crypto_onramp_force_cvc_reverification": false,
    "link_default_opt_in": "NONE",
    "link_disable_email_otp": false,
    "link_disabled_reasons": {
      "payment_element_passthrough_mode": [
        "automatic_payment_methods_enabled",
        "link_not_enabled_on_payment_config",
        "does_not_include_card_in_payment_method_types",
        "disable_passthrough_for_billing"
      ],
      "payment_element_payment_method_mode": [
        "link_not_specified_in_payment_method_types"
      ]
    },
    "link_elements_is_crypto_onramp": false,
    "link_elements_pageload_sign_up_disabled": false,
    "link_email_verification_login_enabled": false,
    "link_enable_email_otp_for_link_popup": false,
    "link_enable_instant_debits_in_testmode": false,
    "link_enable_webauthn_for_link_popup": false,
    "link_financial_incentives_experiment_enabled": false,
    "link_funding_sources": [],
    "link_global_holdback_on": false,
    "link_hcaptcha_rqdata": "mSH3BRFHoxZZfaUH8+p1e2XHnkinYZHbVc/n6cLCPqEqC01zukWGICSrLhgf/ZzUDyo5AzwbOSnSZD3UcVNAcgB+5RID0OMZ1KqDgWsuMw4ojhBgq9MsVfPNYT5E8I2BnVB7q2bcb5ORmKJCgD+WfRlEAi69S5HBPQdrJq789OEevQ+tDTAvjbfx18i5bjkABdnS67RpgxxGyJpVq9l7vVNnXsAVg0HLJ9qPxex0Hk4SVA==eyTWs4jlhdl43nE9",
    "link_hcaptcha_site_key": "24ed0064-62cf-4d42-9960-5dd1a41d4e29",
    "link_instant_debits_new_incentive_display_enabled": false,
    "link_local_storage_login_enabled": false,
    "link_m2_default_integration_enabled": false,
    "link_mode": null,
    "link_no_code_default_values_identification": true,
    "link_no_code_default_values_recall": true,
    "link_no_code_default_values_usage": true,
    "link_only_for_payment_method_types_enabled": false,
    "link_passthrough_mode_enabled": false,
    "link_pay_button_element_enabled": true,
    "link_payment_element_disabled_by_targeting": false,
    "link_payment_element_enable_webauthn_login": false,
    "link_payment_session_context": null,
    "link_pm_killswitch_on_in_elements": false,
    "link_popup_webview_option": "shared",
    "link_session_storage_login_enabled": false,
    "link_supported_payment_methods": [],
    "link_targeting_results": {
      "payment_element_passthrough_mode": null
    },
    "link_user_session_id_accuracy_test": false
  },
  "lpm_promotions": null,
  "merchant_country": "FR",
  "merchant_currency": "eur",
  "merchant_id": "acct_1QCnqaKB54wUKrYC",
  "merchant_logo_url": null,
  "meta_pay_signed_container_context": null,
  "order": null,
  "ordered_payment_method_types_and_wallets": [],
  "passive_captcha": {
    "rqdata": null,
    "site_key": "463b917e-e264-403f-ad34-34af0ee10294"
  },
  "payment_method_preference": {
    "object": "payment_method_preference",
    "country_code": "FR",
    "ordered_payment_method_types": [],
    "type": "deferred_intent"
  },
  "payment_method_specs": [],
  "paypal_express_config": {
    "client_id": null,
    "paypal_merchant_id": null
  },
  "prefill_selectors": {
    "default_values": {
      "email": [],
      "merchant_provides_default_values_on_update": true
    }
  },
  "session_id": "elements_session_13Xt3YispIJ",
  "shipping_address_settings": {
    "autocomplete_allowed": false
  },
  "unactivated_payment_method_types": [],
  "unverified_payment_methods_on_domain": [
    "apple_pay"
  ]
}

There are also a bunch of warnings and error that don't show in test mode but does when I try to open the paymentdetails in production

lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
8[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
46d9f3f7-05df-4153-b70b-0a9c3d8d8226:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
a2986899-90fa-4235-a54a-59c6882dfd0e:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
blob:https://newassets.hcaptcha/1b9a56ea-12e4-471f-b7db-7dfd62228d38:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
blob:https://newassets.hcaptcha/614b637a-daf5-43f5-8409-4c31734625fe:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context Provider

I'm all hears thanks for the help :)

The website in question (if it helps, but requires login / registration to reach the payment details): https://purrstack-dev.catpack.ninja/dashboard

• javascript
• reactjs
• typescript
• stripe-payments

Share Improve this question Follow edited Nov 19, 2024 at 8:09 ogdabou asked Nov 18, 2024 at 16:13 ogdabouogdabou 59222 gold badges1111 silver badges4242 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I would suggest verifying carefully that your publishable key environment variable is populated when you call loadStripe. Are there any errors from Stripe.js in the console? Do you see any network errors for calls to the Stripe API?

Using this deferred intent pattern and current behaviour, I would expect a request to /elements/sessions to get your payment method configuration.

If there are no issue with the PK env var or Stripe.js errors surfaced, you should write to Stripe support for integration help: https://support.stripe/contact

I've already tested my application using Sandbox credentials, both publishable key and secret.I'm now trying to enable stripe in production mode.

The issue

• In my ui when I change the publishable key to use the live one, no paymentdetails are shown
• If I switch to the test one, it shows correctly

I'm not sure what's missing. i've let enabled only 1 payment methods (card). I don't see any errors so I have a hard time identifying what's the issue.

Here is my paymentDetails component:

"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });


interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName)
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited()
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited")
            onSubmited()
          }
        }

      } else {
        setLoading(false)
      }
    } catch (error) {
      setLoading(false)
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "[email protected]"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"[email protected]"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

I have checked, the logged publishable key is the right one that is shown in stripe dashboard.

Here is the UI diff when I just change the publishable key between test and production modes:

Test

Live mode

Here is the response of the stripe api call to elements/sessions

{
  "account_id": "acct_1QCnqaKB54wUKrYC",
  "apple_pay_merchant_token_webhook_url": null,
  "apple_pay_preference": "disabled",
  "business_name": "PurrStack",
  "card_brand_choice": {
    "eligible": false,
    "preferred_networks": [
      "cartes_bancaires"
    ],
    "supported_cobranded_networks": {
      "cartes_bancaires": false
    }
  },
  "card_installments_enabled": false,
  "custom_payment_method_data": null,
  "customer": null,
  "customer_error": null,
  "experiments_data": {
    "arb_id": "5aefef1d-edf9-4fde-b052-c338d61da6ee",
    "experiment_assignments": {
      "elements_merchant_ui_api_srv": "control",
      "link_global_holdback": "control",
      "link_global_holdback_aa": "holdback",
      "link_popup_webview_option_ios": "control"
    },
    "experiment_metadata": {
      "seed": "22667d1120777235810ad9e2d094443aeecfee4a7c9209374358cf466a0573f4",
      "semi_dominant_payment_methods": []
    }
  },
  "external_payment_method_data": null,
  "flags": {
    "cbc_in_link_popup": true,
    "disable_cbc_in_link_popup": false,
    "disable_payment_element_if_required_billing_config": false,
    "ece_apple_pay_payment_request_passthrough": false,
    "elements_appearance_payment_accordion_overrides": false,
    "elements_disable_express_checkout_button_amazon_pay": false,
    "elements_disable_klarna_ece_crossborder_validation": false,
    "elements_disable_link_email_otp": false,
    "elements_disable_link_global_holdback_lookup": false,
    "elements_disable_payment_element_card_country_zip_validations": false,
    "elements_disable_paypal_express": false,
    "elements_disable_recurring_express_checkout_button_amazon_pay": false,
    "elements_enable_19_digit_pans": false,
    "elements_enable_ach_consumer_sign_up_incentive": true,
    "elements_enable_blik": true,
    "elements_enable_br_card_installments": false,
    "elements_enable_cb_apple_pay_for_connect_platforms": true,
    "elements_enable_controller_app_frame_messenger": false,
    "elements_enable_express_checkout_button_demo_pay": false,
    "elements_enable_external_payment_method_alipay_mobile": false,
    "elements_enable_external_payment_method_amazon_pay": false,
    "elements_enable_external_payment_method_aplazame": false,
    "elements_enable_external_payment_method_aplazo": false,
    "elements_enable_external_payment_method_atome": false,
    "elements_enable_external_payment_method_atone": false,
    "elements_enable_external_payment_method_au_pay": false,
    "elements_enable_external_payment_method_azupay": false,
    "elements_enable_external_payment_method_bankaxept": false,
    "elements_enable_external_payment_method_benefit": false,
    "elements_enable_external_payment_method_billie": false,
    "elements_enable_external_payment_method_bizum": false,
    "elements_enable_external_payment_method_bluecode": false,
    "elements_enable_external_payment_method_bpay": false,
    "elements_enable_external_payment_method_catch": false,
    "elements_enable_external_payment_method_check": false,
    "elements_enable_external_payment_method_coinbase_pay": false,
    "elements_enable_external_payment_method_dankort": false,
    "elements_enable_external_payment_method_dapp": false,
    "elements_enable_external_payment_method_dbarai": false,
    "elements_enable_external_payment_method_divido": false,
    "elements_enable_external_payment_method_ebt_snap": false,
    "elements_enable_external_payment_method_eftpos_australia": false,
    "elements_enable_external_payment_method_famipay": false,
    "elements_enable_external_payment_method_fawry": false,
    "elements_enable_external_payment_method_fonix": false,
    "elements_enable_external_payment_method_gcash": false,
    "elements_enable_external_payment_method_girocard": false,
    "elements_enable_external_payment_method_gopay": false,
    "elements_enable_external_payment_method_grabpay_later": false,
    "elements_enable_external_payment_method_hands_in": false,
    "elements_enable_external_payment_method_humm": false,
    "elements_enable_external_payment_method_interac": false,
    "elements_enable_external_payment_method_iwocapay": false,
    "elements_enable_external_payment_method_kbc": false,
    "elements_enable_external_payment_method_knet": false,
    "elements_enable_external_payment_method_kriya": false,
    "elements_enable_external_payment_method_laybuy": false,
    "elements_enable_external_payment_method_line_pay": false,
    "elements_enable_external_payment_method_mb_way": false,
    "elements_enable_external_payment_method_mercado_pago": false,
    "elements_enable_external_payment_method_merpay": false,
    "elements_enable_external_payment_method_momo": false,
    "elements_enable_external_payment_method_mondu": false,
    "elements_enable_external_payment_method_mybank": false,
    "elements_enable_external_payment_method_netbanking": false,
    "elements_enable_external_payment_method_nexi_pay": false,
    "elements_enable_external_payment_method_oney": false,
    "elements_enable_external_payment_method_online_banking_czech_republic": false,
    "elements_enable_external_payment_method_online_banking_finland": false,
    "elements_enable_external_payment_method_online_banking_poland": false,
    "elements_enable_external_payment_method_online_banking_slovakia": false,
    "elements_enable_external_payment_method_online_banking_thailand": false,
    "elements_enable_external_payment_method_paidy": false,
    "elements_enable_external_payment_method_pay_easy": false,
    "elements_enable_external_payment_method_paybright": false,
    "elements_enable_external_payment_method_payconiq": false,
    "elements_enable_external_payment_method_paydirekt": false,
    "elements_enable_external_payment_method_payit": false,
    "elements_enable_external_payment_method_paypay": false,
    "elements_enable_external_payment_method_paypo": false,
    "elements_enable_external_payment_method_payrexx": false,
    "elements_enable_external_payment_method_paysafecard": false,
    "elements_enable_external_payment_method_paytm": false,
    "elements_enable_external_payment_method_payu": false,
    "elements_enable_external_payment_method_picpay": false,
    "elements_enable_external_payment_method_pix_international": false,
    "elements_enable_external_payment_method_planpay": false,
    "elements_enable_external_payment_method_pledg": false,
    "elements_enable_external_payment_method_poli": false,
    "elements_enable_external_payment_method_postepay": false,
    "elements_enable_external_payment_method_postfinance": false,
    "elements_enable_external_payment_method_rabbitline_pay": false,
    "elements_enable_external_payment_method_rakuten_pay": false,
    "elements_enable_external_payment_method_ratepay": false,
    "elements_enable_external_payment_method_samsung_pay": false,
    "elements_enable_external_payment_method_satispay": false,
    "elements_enable_external_payment_method_scalapay": false,
    "elements_enable_external_payment_method_sequra": false,
    "elements_enable_external_payment_method_sezzle": false,
    "elements_enable_external_payment_method_skrill": false,
    "elements_enable_external_payment_method_swish": false,
    "elements_enable_external_payment_method_tabby": false,
    "elements_enable_external_payment_method_titres_restaurant": false,
    "elements_enable_external_payment_method_tng": false,
    "elements_enable_external_payment_method_truelayer": false,
    "elements_enable_external_payment_method_trustly": false,
    "elements_enable_external_payment_method_twint": false,
    "elements_enable_external_payment_method_v_pay": false,
    "elements_enable_external_payment_method_venmo": false,
    "elements_enable_external_payment_method_vipps": false,
    "elements_enable_external_payment_method_wallets_india": false,
    "elements_enable_external_payment_method_walley": false,
    "elements_enable_external_payment_method_wechat_mobile": false,
    "elements_enable_external_payment_method_younitedpay": false,
    "elements_enable_installments_on_deferred_intents": false,
    "elements_enable_invalid_country_for_pm_error": true,
    "elements_enable_jp_card_installments": false,
    "elements_enable_klarna_express_checkout": false,
    "elements_enable_link_in_ece_personalization": true,
    "elements_enable_link_in_passthrough_ece": true,
    "elements_enable_link_spm": true,
    "elements_enable_mx_card_installments": false,
    "elements_enable_nz_bank_account_spm": false,
    "elements_enable_passive_captcha": true,
    "elements_enable_passive_hcaptcha_in_payment_method_creation": true,
    "elements_enable_progressive_cursor": false,
    "elements_enable_read_allow_redisplay": true,
    "elements_enable_save_for_future_payments_pre_check": false,
    "elements_enable_south_korea_market_underlying_pms": false,
    "elements_enable_write_allow_redisplay": true,
    "elements_hide_card_brand_icons": false,
    "elements_link_global_holdback_rollout": true,
    "elements_should_hide_us_bank_account_manual_entry_cta": false,
    "elements_spm_max_visible_payment_methods": false,
    "elements_spm_messages": false,
    "elements_spm_set_as_default": false,
    "elements_stop_move_focus_to_first_errored_field": true,
    "enable_apple_pay_crossbrowser_express_checkout_element": false,
    "enable_custom_checkout_currency_selector_element": false,
    "enable_express_checkout_click_shape_changes": false,
    "financial_connections_enable_deferred_intent_flow": true,
    "id_bank_transfers_v1_integration": false,
    "legacy_confirmation_tokens": false,
    "link_enable_card_brand_choice": true,
    "link_enable_get_payment_status_in_payment_element": false,
    "link_purchase_protections_rollout": false,
    "payment_element_link_modal_preload_killswitch": false,
    "paypal_express_checkout_recurring_support": false,
    "show_swish_factoring_notice": true,
    "show_swish_redirect_and_qr_code_auth_flows": true,
    "use_link_views": false
  },
  "google_pay_preference": "disabled",
  "klarna_express_config": {
    "klarna_mid": null
  },
  "legacy_customer": null,
  "link_purchase_protections_data": {
    "is_eligible": false,
    "type": null
  },
  "link_settings": {
    "link_authenticated_change_event_enabled": false,
    "link_bank_incentives_enabled": false,
    "link_bank_onboarding_enabled": false,
    "link_consumer_incentive": null,
    "link_crypto_onramp_bank_upsell": false,
    "link_crypto_onramp_elements_logout_disabled": false,
    "link_crypto_onramp_force_cvc_reverification": false,
    "link_default_opt_in": "NONE",
    "link_disable_email_otp": false,
    "link_disabled_reasons": {
      "payment_element_passthrough_mode": [
        "automatic_payment_methods_enabled",
        "link_not_enabled_on_payment_config",
        "does_not_include_card_in_payment_method_types",
        "disable_passthrough_for_billing"
      ],
      "payment_element_payment_method_mode": [
        "link_not_specified_in_payment_method_types"
      ]
    },
    "link_elements_is_crypto_onramp": false,
    "link_elements_pageload_sign_up_disabled": false,
    "link_email_verification_login_enabled": false,
    "link_enable_email_otp_for_link_popup": false,
    "link_enable_instant_debits_in_testmode": false,
    "link_enable_webauthn_for_link_popup": false,
    "link_financial_incentives_experiment_enabled": false,
    "link_funding_sources": [],
    "link_global_holdback_on": false,
    "link_hcaptcha_rqdata": "mSH3BRFHoxZZfaUH8+p1e2XHnkinYZHbVc/n6cLCPqEqC01zukWGICSrLhgf/ZzUDyo5AzwbOSnSZD3UcVNAcgB+5RID0OMZ1KqDgWsuMw4ojhBgq9MsVfPNYT5E8I2BnVB7q2bcb5ORmKJCgD+WfRlEAi69S5HBPQdrJq789OEevQ+tDTAvjbfx18i5bjkABdnS67RpgxxGyJpVq9l7vVNnXsAVg0HLJ9qPxex0Hk4SVA==eyTWs4jlhdl43nE9",
    "link_hcaptcha_site_key": "24ed0064-62cf-4d42-9960-5dd1a41d4e29",
    "link_instant_debits_new_incentive_display_enabled": false,
    "link_local_storage_login_enabled": false,
    "link_m2_default_integration_enabled": false,
    "link_mode": null,
    "link_no_code_default_values_identification": true,
    "link_no_code_default_values_recall": true,
    "link_no_code_default_values_usage": true,
    "link_only_for_payment_method_types_enabled": false,
    "link_passthrough_mode_enabled": false,
    "link_pay_button_element_enabled": true,
    "link_payment_element_disabled_by_targeting": false,
    "link_payment_element_enable_webauthn_login": false,
    "link_payment_session_context": null,
    "link_pm_killswitch_on_in_elements": false,
    "link_popup_webview_option": "shared",
    "link_session_storage_login_enabled": false,
    "link_supported_payment_methods": [],
    "link_targeting_results": {
      "payment_element_passthrough_mode": null
    },
    "link_user_session_id_accuracy_test": false
  },
  "lpm_promotions": null,
  "merchant_country": "FR",
  "merchant_currency": "eur",
  "merchant_id": "acct_1QCnqaKB54wUKrYC",
  "merchant_logo_url": null,
  "meta_pay_signed_container_context": null,
  "order": null,
  "ordered_payment_method_types_and_wallets": [],
  "passive_captcha": {
    "rqdata": null,
    "site_key": "463b917e-e264-403f-ad34-34af0ee10294"
  },
  "payment_method_preference": {
    "object": "payment_method_preference",
    "country_code": "FR",
    "ordered_payment_method_types": [],
    "type": "deferred_intent"
  },
  "payment_method_specs": [],
  "paypal_express_config": {
    "client_id": null,
    "paypal_merchant_id": null
  },
  "prefill_selectors": {
    "default_values": {
      "email": [],
      "merchant_provides_default_values_on_update": true
    }
  },
  "session_id": "elements_session_13Xt3YispIJ",
  "shipping_address_settings": {
    "autocomplete_allowed": false
  },
  "unactivated_payment_method_types": [],
  "unverified_payment_methods_on_domain": [
    "apple_pay"
  ]
}

There are also a bunch of warnings and error that don't show in test mode but does when I try to open the paymentdetails in production

lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
8[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
inpage.js:1 MetaMask no longer injects web3. For details, see: .html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
inpage.js:1 MetaMask no longer injects web3. For details, see: .html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
46d9f3f7-05df-4153-b70b-0a9c3d8d8226:1 WebGPU is experimental on this platform. See 
a2986899-90fa-4235-a54a-59c6882dfd0e:1 WebGPU is experimental on this platform. See 
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
blob::1 WebGPU is experimental on this platform. See 
blob::1 WebGPU is experimental on this platform. See 
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context Provider

I'm all hears thanks for the help :)

The website in question (if it helps, but requires login / registration to reach the payment details): /dashboard

I've already tested my application using Sandbox credentials, both publishable key and secret.I'm now trying to enable stripe in production mode.

The issue

• In my ui when I change the publishable key to use the live one, no paymentdetails are shown
• If I switch to the test one, it shows correctly

I'm not sure what's missing. i've let enabled only 1 payment methods (card). I don't see any errors so I have a hard time identifying what's the issue.

Here is my paymentDetails component:

"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });


interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName)
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited()
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited")
            onSubmited()
          }
        }

      } else {
        setLoading(false)
      }
    } catch (error) {
      setLoading(false)
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "[email protected]"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"[email protected]"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

I have checked, the logged publishable key is the right one that is shown in stripe dashboard.

Here is the UI diff when I just change the publishable key between test and production modes:

Test

Live mode

Here is the response of the stripe api call to elements/sessions

{
  "account_id": "acct_1QCnqaKB54wUKrYC",
  "apple_pay_merchant_token_webhook_url": null,
  "apple_pay_preference": "disabled",
  "business_name": "PurrStack",
  "card_brand_choice": {
    "eligible": false,
    "preferred_networks": [
      "cartes_bancaires"
    ],
    "supported_cobranded_networks": {
      "cartes_bancaires": false
    }
  },
  "card_installments_enabled": false,
  "custom_payment_method_data": null,
  "customer": null,
  "customer_error": null,
  "experiments_data": {
    "arb_id": "5aefef1d-edf9-4fde-b052-c338d61da6ee",
    "experiment_assignments": {
      "elements_merchant_ui_api_srv": "control",
      "link_global_holdback": "control",
      "link_global_holdback_aa": "holdback",
      "link_popup_webview_option_ios": "control"
    },
    "experiment_metadata": {
      "seed": "22667d1120777235810ad9e2d094443aeecfee4a7c9209374358cf466a0573f4",
      "semi_dominant_payment_methods": []
    }
  },
  "external_payment_method_data": null,
  "flags": {
    "cbc_in_link_popup": true,
    "disable_cbc_in_link_popup": false,
    "disable_payment_element_if_required_billing_config": false,
    "ece_apple_pay_payment_request_passthrough": false,
    "elements_appearance_payment_accordion_overrides": false,
    "elements_disable_express_checkout_button_amazon_pay": false,
    "elements_disable_klarna_ece_crossborder_validation": false,
    "elements_disable_link_email_otp": false,
    "elements_disable_link_global_holdback_lookup": false,
    "elements_disable_payment_element_card_country_zip_validations": false,
    "elements_disable_paypal_express": false,
    "elements_disable_recurring_express_checkout_button_amazon_pay": false,
    "elements_enable_19_digit_pans": false,
    "elements_enable_ach_consumer_sign_up_incentive": true,
    "elements_enable_blik": true,
    "elements_enable_br_card_installments": false,
    "elements_enable_cb_apple_pay_for_connect_platforms": true,
    "elements_enable_controller_app_frame_messenger": false,
    "elements_enable_express_checkout_button_demo_pay": false,
    "elements_enable_external_payment_method_alipay_mobile": false,
    "elements_enable_external_payment_method_amazon_pay": false,
    "elements_enable_external_payment_method_aplazame": false,
    "elements_enable_external_payment_method_aplazo": false,
    "elements_enable_external_payment_method_atome": false,
    "elements_enable_external_payment_method_atone": false,
    "elements_enable_external_payment_method_au_pay": false,
    "elements_enable_external_payment_method_azupay": false,
    "elements_enable_external_payment_method_bankaxept": false,
    "elements_enable_external_payment_method_benefit": false,
    "elements_enable_external_payment_method_billie": false,
    "elements_enable_external_payment_method_bizum": false,
    "elements_enable_external_payment_method_bluecode": false,
    "elements_enable_external_payment_method_bpay": false,
    "elements_enable_external_payment_method_catch": false,
    "elements_enable_external_payment_method_check": false,
    "elements_enable_external_payment_method_coinbase_pay": false,
    "elements_enable_external_payment_method_dankort": false,
    "elements_enable_external_payment_method_dapp": false,
    "elements_enable_external_payment_method_dbarai": false,
    "elements_enable_external_payment_method_divido": false,
    "elements_enable_external_payment_method_ebt_snap": false,
    "elements_enable_external_payment_method_eftpos_australia": false,
    "elements_enable_external_payment_method_famipay": false,
    "elements_enable_external_payment_method_fawry": false,
    "elements_enable_external_payment_method_fonix": false,
    "elements_enable_external_payment_method_gcash": false,
    "elements_enable_external_payment_method_girocard": false,
    "elements_enable_external_payment_method_gopay": false,
    "elements_enable_external_payment_method_grabpay_later": false,
    "elements_enable_external_payment_method_hands_in": false,
    "elements_enable_external_payment_method_humm": false,
    "elements_enable_external_payment_method_interac": false,
    "elements_enable_external_payment_method_iwocapay": false,
    "elements_enable_external_payment_method_kbc": false,
    "elements_enable_external_payment_method_knet": false,
    "elements_enable_external_payment_method_kriya": false,
    "elements_enable_external_payment_method_laybuy": false,
    "elements_enable_external_payment_method_line_pay": false,
    "elements_enable_external_payment_method_mb_way": false,
    "elements_enable_external_payment_method_mercado_pago": false,
    "elements_enable_external_payment_method_merpay": false,
    "elements_enable_external_payment_method_momo": false,
    "elements_enable_external_payment_method_mondu": false,
    "elements_enable_external_payment_method_mybank": false,
    "elements_enable_external_payment_method_netbanking": false,
    "elements_enable_external_payment_method_nexi_pay": false,
    "elements_enable_external_payment_method_oney": false,
    "elements_enable_external_payment_method_online_banking_czech_republic": false,
    "elements_enable_external_payment_method_online_banking_finland": false,
    "elements_enable_external_payment_method_online_banking_poland": false,
    "elements_enable_external_payment_method_online_banking_slovakia": false,
    "elements_enable_external_payment_method_online_banking_thailand": false,
    "elements_enable_external_payment_method_paidy": false,
    "elements_enable_external_payment_method_pay_easy": false,
    "elements_enable_external_payment_method_paybright": false,
    "elements_enable_external_payment_method_payconiq": false,
    "elements_enable_external_payment_method_paydirekt": false,
    "elements_enable_external_payment_method_payit": false,
    "elements_enable_external_payment_method_paypay": false,
    "elements_enable_external_payment_method_paypo": false,
    "elements_enable_external_payment_method_payrexx": false,
    "elements_enable_external_payment_method_paysafecard": false,
    "elements_enable_external_payment_method_paytm": false,
    "elements_enable_external_payment_method_payu": false,
    "elements_enable_external_payment_method_picpay": false,
    "elements_enable_external_payment_method_pix_international": false,
    "elements_enable_external_payment_method_planpay": false,
    "elements_enable_external_payment_method_pledg": false,
    "elements_enable_external_payment_method_poli": false,
    "elements_enable_external_payment_method_postepay": false,
    "elements_enable_external_payment_method_postfinance": false,
    "elements_enable_external_payment_method_rabbitline_pay": false,
    "elements_enable_external_payment_method_rakuten_pay": false,
    "elements_enable_external_payment_method_ratepay": false,
    "elements_enable_external_payment_method_samsung_pay": false,
    "elements_enable_external_payment_method_satispay": false,
    "elements_enable_external_payment_method_scalapay": false,
    "elements_enable_external_payment_method_sequra": false,
    "elements_enable_external_payment_method_sezzle": false,
    "elements_enable_external_payment_method_skrill": false,
    "elements_enable_external_payment_method_swish": false,
    "elements_enable_external_payment_method_tabby": false,
    "elements_enable_external_payment_method_titres_restaurant": false,
    "elements_enable_external_payment_method_tng": false,
    "elements_enable_external_payment_method_truelayer": false,
    "elements_enable_external_payment_method_trustly": false,
    "elements_enable_external_payment_method_twint": false,
    "elements_enable_external_payment_method_v_pay": false,
    "elements_enable_external_payment_method_venmo": false,
    "elements_enable_external_payment_method_vipps": false,
    "elements_enable_external_payment_method_wallets_india": false,
    "elements_enable_external_payment_method_walley": false,
    "elements_enable_external_payment_method_wechat_mobile": false,
    "elements_enable_external_payment_method_younitedpay": false,
    "elements_enable_installments_on_deferred_intents": false,
    "elements_enable_invalid_country_for_pm_error": true,
    "elements_enable_jp_card_installments": false,
    "elements_enable_klarna_express_checkout": false,
    "elements_enable_link_in_ece_personalization": true,
    "elements_enable_link_in_passthrough_ece": true,
    "elements_enable_link_spm": true,
    "elements_enable_mx_card_installments": false,
    "elements_enable_nz_bank_account_spm": false,
    "elements_enable_passive_captcha": true,
    "elements_enable_passive_hcaptcha_in_payment_method_creation": true,
    "elements_enable_progressive_cursor": false,
    "elements_enable_read_allow_redisplay": true,
    "elements_enable_save_for_future_payments_pre_check": false,
    "elements_enable_south_korea_market_underlying_pms": false,
    "elements_enable_write_allow_redisplay": true,
    "elements_hide_card_brand_icons": false,
    "elements_link_global_holdback_rollout": true,
    "elements_should_hide_us_bank_account_manual_entry_cta": false,
    "elements_spm_max_visible_payment_methods": false,
    "elements_spm_messages": false,
    "elements_spm_set_as_default": false,
    "elements_stop_move_focus_to_first_errored_field": true,
    "enable_apple_pay_crossbrowser_express_checkout_element": false,
    "enable_custom_checkout_currency_selector_element": false,
    "enable_express_checkout_click_shape_changes": false,
    "financial_connections_enable_deferred_intent_flow": true,
    "id_bank_transfers_v1_integration": false,
    "legacy_confirmation_tokens": false,
    "link_enable_card_brand_choice": true,
    "link_enable_get_payment_status_in_payment_element": false,
    "link_purchase_protections_rollout": false,
    "payment_element_link_modal_preload_killswitch": false,
    "paypal_express_checkout_recurring_support": false,
    "show_swish_factoring_notice": true,
    "show_swish_redirect_and_qr_code_auth_flows": true,
    "use_link_views": false
  },
  "google_pay_preference": "disabled",
  "klarna_express_config": {
    "klarna_mid": null
  },
  "legacy_customer": null,
  "link_purchase_protections_data": {
    "is_eligible": false,
    "type": null
  },
  "link_settings": {
    "link_authenticated_change_event_enabled": false,
    "link_bank_incentives_enabled": false,
    "link_bank_onboarding_enabled": false,
    "link_consumer_incentive": null,
    "link_crypto_onramp_bank_upsell": false,
    "link_crypto_onramp_elements_logout_disabled": false,
    "link_crypto_onramp_force_cvc_reverification": false,
    "link_default_opt_in": "NONE",
    "link_disable_email_otp": false,
    "link_disabled_reasons": {
      "payment_element_passthrough_mode": [
        "automatic_payment_methods_enabled",
        "link_not_enabled_on_payment_config",
        "does_not_include_card_in_payment_method_types",
        "disable_passthrough_for_billing"
      ],
      "payment_element_payment_method_mode": [
        "link_not_specified_in_payment_method_types"
      ]
    },
    "link_elements_is_crypto_onramp": false,
    "link_elements_pageload_sign_up_disabled": false,
    "link_email_verification_login_enabled": false,
    "link_enable_email_otp_for_link_popup": false,
    "link_enable_instant_debits_in_testmode": false,
    "link_enable_webauthn_for_link_popup": false,
    "link_financial_incentives_experiment_enabled": false,
    "link_funding_sources": [],
    "link_global_holdback_on": false,
    "link_hcaptcha_rqdata": "mSH3BRFHoxZZfaUH8+p1e2XHnkinYZHbVc/n6cLCPqEqC01zukWGICSrLhgf/ZzUDyo5AzwbOSnSZD3UcVNAcgB+5RID0OMZ1KqDgWsuMw4ojhBgq9MsVfPNYT5E8I2BnVB7q2bcb5ORmKJCgD+WfRlEAi69S5HBPQdrJq789OEevQ+tDTAvjbfx18i5bjkABdnS67RpgxxGyJpVq9l7vVNnXsAVg0HLJ9qPxex0Hk4SVA==eyTWs4jlhdl43nE9",
    "link_hcaptcha_site_key": "24ed0064-62cf-4d42-9960-5dd1a41d4e29",
    "link_instant_debits_new_incentive_display_enabled": false,
    "link_local_storage_login_enabled": false,
    "link_m2_default_integration_enabled": false,
    "link_mode": null,
    "link_no_code_default_values_identification": true,
    "link_no_code_default_values_recall": true,
    "link_no_code_default_values_usage": true,
    "link_only_for_payment_method_types_enabled": false,
    "link_passthrough_mode_enabled": false,
    "link_pay_button_element_enabled": true,
    "link_payment_element_disabled_by_targeting": false,
    "link_payment_element_enable_webauthn_login": false,
    "link_payment_session_context": null,
    "link_pm_killswitch_on_in_elements": false,
    "link_popup_webview_option": "shared",
    "link_session_storage_login_enabled": false,
    "link_supported_payment_methods": [],
    "link_targeting_results": {
      "payment_element_passthrough_mode": null
    },
    "link_user_session_id_accuracy_test": false
  },
  "lpm_promotions": null,
  "merchant_country": "FR",
  "merchant_currency": "eur",
  "merchant_id": "acct_1QCnqaKB54wUKrYC",
  "merchant_logo_url": null,
  "meta_pay_signed_container_context": null,
  "order": null,
  "ordered_payment_method_types_and_wallets": [],
  "passive_captcha": {
    "rqdata": null,
    "site_key": "463b917e-e264-403f-ad34-34af0ee10294"
  },
  "payment_method_preference": {
    "object": "payment_method_preference",
    "country_code": "FR",
    "ordered_payment_method_types": [],
    "type": "deferred_intent"
  },
  "payment_method_specs": [],
  "paypal_express_config": {
    "client_id": null,
    "paypal_merchant_id": null
  },
  "prefill_selectors": {
    "default_values": {
      "email": [],
      "merchant_provides_default_values_on_update": true
    }
  },
  "session_id": "elements_session_13Xt3YispIJ",
  "shipping_address_settings": {
    "autocomplete_allowed": false
  },
  "unactivated_payment_method_types": [],
  "unverified_payment_methods_on_domain": [
    "apple_pay"
  ]
}

There are also a bunch of warnings and error that don't show in test mode but does when I try to open the paymentdetails in production

lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
8[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
inpage.js:1 MetaMask no longer injects web3. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
get @ inpage.js:1
HQ @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
rB @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
(anonymous) @ hsw.js:1
L @ hsw.js:1
AE @ hsw.js:1
(anonymous) @ hsw.js:1
KE @ hsw.js:1
$ @ hsw.js:1
$func216 @ 0019a1a6:0x2735b
$func142 @ 0019a1a6:0x10ffe
$func323 @ 0019a1a6:0x40f0d
$Gb @ 0019a1a6:0x348a1
aE @ hsw.js:1
h @ hsw.js:1Understand this errorAI
46d9f3f7-05df-4153-b70b-0a9c3d8d8226:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
a2986899-90fa-4235-a54a-59c6882dfd0e:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
blob:https://newassets.hcaptcha/1b9a56ea-12e4-471f-b7db-7dfd62228d38:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
blob:https://newassets.hcaptcha/614b637a-daf5-43f5-8409-4c31734625fe:1 WebGPU is experimental on this platform. See https://github/gpuweb/gpuweb/wiki/Implementation-Status#implementation-status
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=0nkp2qxfldi8&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=463b917e-e264-403f-ad34-34af0ee10294&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context ProviderUnderstand this warningAI
newassets.hcaptcha/captcha/v1/05c78a4/static/hcaptcha.html#frame=challenge&id=12kthjhc6znx&host=b.stripecdn&sentry=true&reportapi=https%3A%2F%2Faccounts.hcaptcha&recaptchacompat=true&custom=false&hl=en&tplinks=on&pstissuer=https%3A%2F%2Fpst-issuer.hcaptcha&sitekey=24ed0064-62cf-4d42-9960-5dd1a41d4e29&size=invisible&theme=light&origin=https%3A%2F%2Fb.stripecdn:1 Failed to create WebGPU Context Provider

I'm all hears thanks for the help :)

The website in question (if it helps, but requires login / registration to reach the payment details): https://purrstack-dev.catpack.ninja/dashboard

• javascript
• reactjs
• typescript
• stripe-payments

Share Improve this question Follow edited Nov 19, 2024 at 8:09 ogdabou asked Nov 18, 2024 at 16:13 ogdabouogdabou 59222 gold badges1111 silver badges4242 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I would suggest verifying carefully that your publishable key environment variable is populated when you call loadStripe. Are there any errors from Stripe.js in the console? Do you see any network errors for calls to the Stripe API?

Using this deferred intent pattern and current behaviour, I would expect a request to /elements/sessions to get your payment method configuration.

If there are no issue with the PK env var or Stripe.js errors surfaced, you should write to Stripe support for integration help: https://support.stripe/contact

本文标签： javascriptStripe not showing paymentDetails in production Using NextJSStack Overflow