Buy

We already know that our Stripe account has two environments, and each has its own two keys. This means that when we deploy, we'll need to update our code to use these Live keys, instead of the ones from the Test environment.

Well... that's going to be a bummer: the public key is hard-coded right in the middle of my template:

53 lines app/Resources/views/order/checkout.html.twig
... lines 1 - 3
{% block body %}
<div class="nav-space-checkout">
<div class="container">
<div class="row">
... lines 8 - 34
<div class="col-xs-12 col-sm-6">
<form action="" method="POST">
<script
... line 38
data-key="pk_test_HxZzNHy8LImKK9LDtgMDRBwd"
... lines 40 - 45
</script>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

And the private one is stuck in the center of a controller:

58 lines src/AppBundle/Controller/OrderController.php
... lines 1 - 10
class OrderController extends BaseController
{
... lines 13 - 30
public function checkoutAction(Request $request)
{
... lines 33 - 34
if ($request->isMethod('POST')) {
... lines 36 - 37
\Stripe\Stripe::setApiKey("XXX_PRIVATEKEY_XXX");
... lines 39 - 49
}
... lines 51 - 56
}
}

If you love editing random files whenever you deploy, then this is perfect! Have fun!

But for the rest of us, we need to move these keys to a central configuration file so they're easy to update on deploy. We also need to make sure that we don't commit this private key to our Git repository... ya know... because it's private - even though I keep showing you mine.

Quick! To a Configuration File!

How you do this next step will vary for different frameworks, but is philosophically always the same. In Symfony, we're going to move our keys to a special parameters.yml file, because our project is setup to not commit this to Git.

Add a stripe_secret_key config and set its value to the key from the controller:

22 lines app/config/parameters.yml.dist
... lines 1 - 3
parameters:
... lines 5 - 19
stripe_secret_key: XXX_PRIVATEKEY_XXX
... lines 21 - 22

Then add stripe_public_key and set that to the one from the template:

22 lines app/config/parameters.yml.dist
... lines 1 - 3
parameters:
... lines 5 - 20
stripe_public_key: YYY_PUBLISHABLE_KEY_YYY

In Symfony, we also maintain this other file - parameters.yml.dist - as a template for the original, uncommitted file. This one is committed to the repository. Add the keys here too, but give them fake values.

Using the Parameters

Now that these are isolated in parameters.yml, we can take them out of our code. In the controller, add $this->getParameter('stripe_secret_key'):

80 lines src/AppBundle/Controller/OrderController.php
... lines 1 - 11
class OrderController extends BaseController
{
... lines 14 - 31
public function checkoutAction(Request $request)
{
... lines 34 - 35
if ($request->isMethod('POST')) {
... lines 37 - 38
\Stripe\Stripe::setApiKey($this->getParameter('stripe_secret_key'));
... lines 40 - 70
}
... lines 72 - 78
}
}

Next, pass a new stripe_public_key variable to the template set to $this->getParameter('stripe_public_key'):

80 lines src/AppBundle/Controller/OrderController.php
... lines 1 - 11
class OrderController extends BaseController
{
... lines 14 - 31
public function checkoutAction(Request $request)
{
... lines 34 - 72
return $this->render('order/checkout.html.twig', array(
... lines 74 - 75
'stripe_public_key' => $this->getParameter('stripe_public_key')
));
}
}

Finally, in the template - render that new variable:

53 lines app/Resources/views/order/checkout.html.twig
... lines 1 - 3
{% block body %}
<div class="nav-space-checkout">
<div class="container">
<div class="row">
... lines 8 - 34
<div class="col-xs-12 col-sm-6">
<form action="" method="POST">
<script
... line 38
data-key="{{ stripe_public_key }}"
... lines 40 - 45
</script>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

Make sure we didn't break anything by finding a product and adding it to the cart. The fact that this "Pay with Card" shows up means things are probably OK.

This was a small step, but don't mess it up! If that secret key becomes not so secret, sheep-zombies will attack.

Leave a comment!