Payments

From SocialStack

SocialStack has an installable module for handling payments, shopping carts, products and subscriptions amongst other payment related functionality.

Getting Started

First, install the payments module:

socialstack install payments

This will pull in multiple separate modules, e.g. Api/Payments. When you next start the project, you'll then have a products and prices area of your admin panel.

Adding products

In short, a product can have multiple tiers (for bulk pricing), and a product's price can be localised (for international support). The UI for this will be specialised as a pricing grid in the future, but for now you'll need to create separate prices and separate products per tier, if your product has both bulk prices and is localised.

When adding prices, the Amount is in the smallest unit of a currency. In US Dollars and Euro's for example, that is in cents. In Pound Sterling, it is in pence.

A product also has pricing strategies - see the separate page for more information on how those work.

Configuring the module

Currency codes

Prices on products can be localised and are localised by various components on the frontend such as the default UI/Payments/Checkout component. For this to work, it's important that you go into the Locales part of the admin panel and set the "Currency code" on your locale(s). This currency code is, for example, "USD" or "GBP", depending on what your primary audience is. You can also add additional locales to your site and set currency codes on each one.

Payments locale currencycode.png

The currency code field on locales is used by the frontend to pick how to display prices

Payment gateway

Next, you'll need to setup a payment gateway. By default Stripe is ready to go, so you'll need a test Stripe publishable/ private key. Once you have this info, head into the Configuration part of the administration panel where you should see a Stripe entry, and drop in your details. At a minimum, only PublishableKey and SecretKey are required.

Stripe gateway config.png