Stripe client secret?

[gregorterrill]

Description

Running into a similar issue as #214 although it's not clear how that was solved.

I can't get my customized payment form working without providing a client secret to stripe.elements() - I'm using the Appearance API to modify the form, so I need to call it like this:

const elements = stripe.elements({clientSecret, appearance});

If I pass a totally bogus value as clientSecret, the Elements JS fails to run and the form doesn't get initalized. If I pass a value in the correct format pi_blah_secret_blah then the JS runs but I see in the console a 400 to https://api.stripe.com/v1/elements/sessions and a 404 to https://api.stripe.com/v1/payment_intents however it seems like the payment still goes through. If I pass in any client secret from any past PaymentIntent made through the example Commerce templates (which can be found digging through the intentData in the stripe_paymentintents DB table) it works with no 400 errors, although that's clearly not what I should be doing. Not sure how using a client secret for a different transaction would impact things - it hasn't caused any strange behaviour yet in testing though (maybe if my Stripe account were in live mode this would break things, I dunno).

Not sure that this is necessarily a bug or just a documentation issue, but in any case, are you able to provide an example of the correct way to get either the client secret, Stripe reference number, or PaymentIntent for the current cart and/or the current subscription plan? If I had the ref I could get the client secret as below (in a custom module). However, I'm not sure if its possible to get the ref value for the current cart/subscription transaction prior to any payment being sent to Stripe (as the payment form hasn't even been initialized yet).

$ref = 'pi_XXXXXXXXXXXXXXXXX';
$intent = StripePlugin::getInstance()->getPaymentIntents()->getPaymentIntentByReference($ref);
$intentData = json_decode($intent->intentData);
$clientSecret = $intentData->client_secret;

Additional info

• Craft CMS version: 4.3.1
• Stripe for Craft Commerce version: 3.0.1
• PHP version: 8.1.5

[gaelpleeroy]

I do have the same issue as I would like to use the custom Stripe Elements but without the client secret it's not possible.

[nicholasc]

Having the same issue here. @gregorterrill did you happen to make it work in production?

[pdaleramirez]

@gregorterrill Would it be possible to attach the Secret Keys in the container form? and then call the value in JavaScript? Similar to how the stripe intentsForm.twig does it here

commerce-stripe/src/templates/paymentForms/intentsForm.twig

Line 5 in e7cd3cb

{% if clientSecret is defined %}data-client-secret="{{clientSecret}}" {% endif %}

[westhouseit]

@pdaleramirez That only works because the clientSecret template variable is declared here:

commerce-stripe/src/gateways/PaymentIntents.php

Line 387 in 62e04b0

$clientSecret = $intentData['client_secret'];

[westhouseit]

As far as I can see it's currently impossible to use the Payment Element (https://stripe.com/docs/payments/payment-element).

Please can you re-add the bug tag.

[samueldraper]

@pdaleramirez @lukeholder we are having this issue and it's now critical for it to be fixed. Please could you re-categorise this as a bug and prioritise so that we can Stripe's Payment Element as intended. Thank you.

[gregorterrill]

@pdaleramirez That doesn't work because the PaymentIntent hasn't been created yet (in the majority of cases for my checkout flow, at least), and therefore there's no client secret yet. The only "solution" I've found is to bypass commerce-stripe entirely and create my own API endpoint which gets a client secret per the instructions from Stripe's documentation.

In the Twig template JS, this is how I'm initializing the card field using the Stripe Elements API:

const stripe = Stripe("{{ getenv('STRIPE_PUBLISHABLE_API_KEY') }}");
const appearance = {
  theme: 'none',
};
const style = {
  base: {
    color: '#3B3B3B',
    backgroundColor: 'transparent',
    fontFamily: '"Public Sans", "Avenir Next Condensed", "Arial Narrow", sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#706B67'
    }
  },
  invalid: {
    color: '#F80000',
    iconColor: '#F80000'
  }
};

let elements;
let card;
const form = document.getElementById('payment-form');

initializeStripeElements();

async function initializeStripeElements() {
    const { clientSecret } = await fetch("{{ siteUrl('actions/dashboard/get-new-stripe-client-secret') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ 
        {{ craft.app.config.general.csrfTokenName|e('js') }} : "{{ craft.app.request.csrfToken|e('js') }}",
        amount: {{ max(cart ? cart.totalPrice, 1) * 100}}, // Stripe wants this value in cents, and has a $1 minimum
        userId: {{ currentUser.id }},
        gatewayId: {{ gatewayId }}
      }),
    }).then((r) => r.json());

    // This is the line causing the error if we don't do the above call because it fails without a clientSecret
    elements = stripe.elements({ clientSecret, appearance }); 

    card = elements.create('card', { style: style });
    card.mount('#card-element');

    card.on('change', function({error}) {
      let displayError = document.getElementById('card-errors');
      if (error) {
        displayError.textContent = error.message;
      } else {
        displayError.textContent = '';
      }
    });
  }

And the API endpoint:

public function actionGetNewStripeClientSecret(): ?Response 
    {
      // Commerce Stripe doesn't currently support getting client secrets for fresh transactions, so we do this manually
      // per the instructions here: https://stripe.com/docs/payments/quickstart
      $this->requirePostRequest();
      $amount = $this->request->getParam('amount');
      $userId = $this->request->getParam('userId');
      $gatewayId = $this->request->getParam('gatewayId');

      // get customer as we need to pass the Stripe customer ref ID
      $customer = StripePlugin::getInstance()->customers->getCustomerById($userId);

      // make sure the user has a payment source
      $userPaymentSources = Commerce::getInstance()->getPaymentSources()->getAllPaymentSourcesByCustomerId($userId);
      if (isset($userPaymentSources[0])) {
        $paymentSource = $userPaymentSources[0];
      }

      \Stripe\Stripe::setApiKey(App::env('STRIPE_SECRET_API_KEY'));

      $paymentIntent = \Stripe\PaymentIntent::create([
        'amount' => $amount,
        'currency' => 'cad',
        'customer' => $customer->reference ?? null,
        'payment_method' => $paymentSource ?? null
      ]);

      $response = array(
        'clientSecret' => $paymentIntent->client_secret
      );

      return $this->asJson($response);
    }

I could be way off base here, but this seems to work, in that I can finally initialize card elements, but it is not without it's own problems - what ends up happening is every time someone hits a payment screen (or just wants to edit a saved card which also needs its fields initialized this way), it creates a $1 PaymentIntent which shows up as an incomplete payment in Stripe (because if they proceed with the purchase, Craft creates its own PaymentIntent and uses that). Also it seems like commerce-stripe should be able to handle this functionality instead of having to go directly via the Stripe API.

[pdaleramirez]

@gregorterrill There will be a completely new Stripe gateway plugin that supports Stripe elements. We’ll be releasing it soon. We’ll update this issue when it gets released.

[gregorterrill]

@pdaleramirez That's good news! Will the new version also support subscriptions?

[westhouseit]

@pdaleramirez So that we can plan, do you have an approximate timescale for completion - days, weeks, months?

[westhouseit]

@pdaleramirez Can we please have an update/timeline.