How to access Private Keys in client-side Elements

Need help Plugins
1

Hi all,

I’m creating a plugin that integrates Stripe payments.

Within the Element, the Initialize function initializes Stripe with a provided API key. Currently the keys are set up as Public keys.

image

For security, these would obviously be better as Private keys. Though when I set them as Private, I can’t easily access them from my Element.

What would be the most straightforward way to get Private keys into Element code?

Thank you in advance.

2

As you’ve figured out, things are not secret when they are exposed in the browser. :slightly_smiling_face:

One technique is to have your front end code call a backend workflow. Then any processing requiring secrets is done in that backend workflow.

1 Like
3

Thanks Lindsay.

Can server-side actions access Private keys directly via context.keys?

4

Yes like this: context.keys["Stripe Secret Key"] then the name just has to match in the keys section

2 Likes
5

Thanks, I’m going to try this now.

6

Just an update. I created a server-side action that retrieves the private key.

image
image717×447 14.1 KB

Then, created a backend workflow that calls this action, and returns the key.

image
image867×430 14.9 KB

Then, created a property in the Client-side element that takes the endpoint to run the action.

image

Now, this endpoint can be accessed within the Element’s Update function via properties.publishable_key_endpoint.

The endpoint can now be used in function Initialize for a POST request to retrieve the STRIPE_PUBLISHABLE_KEY.

    fetch(publishableKeyEndpoint, {
      method: 'POST'
    })
      .then(response => response.json())
      .then(data => {
        if (data.status === 'success' && data.response && data.response.publishable_key) {
          const publishableKey = data.response.publishable_key;
          instance.data.publishableKey = publishableKey;
          return instance.data.loadStripeScript(publishableKey);

And it works!

I’d like to simplify it eventually if possible, but the main thing for now is that it’s working.

7

I haven’t used Stripe, but according to google the Publishable Key isn’t supposed to be a private key, so that you can do directly in your element without all the workarounds since it’s intended for client side use.

The Secret Key is the one you can’t let get exposed

2 Likes
8

PK can be used for client side for some scripts.
If you need SK, this need to be used server side.
Not sure what you are doing, but I don’t see any reason to use a server side script where you can use API Connector.

1 Like