Payments - Revision history

80.229.4.125: /* Using built in UI's */

2024-05-29T14:18:22Z

Using built in UI's

← Older revision		Revision as of 14:18, 29 May 2024
Line 60:		Line 60:

	addToCart({product: 19, isSubscribing: true}); // Adds the subscription product #19 to the cart.		addToCart({product: 19, isSubscribing: true}); // Adds the subscription product #19 to the cart.

			addToCart({product: 14, quantity: 1, ref: 'test'}); // Add 1 of product #14 to the cart with a reference of test.


	</syntaxhighlight>		</syntaxhighlight>

80.229.4.125: /* Using built in UI's */

2024-05-28T14:06:31Z

Using built in UI's

← Older revision		Revision as of 14:06, 28 May 2024
Line 41:		Line 41:
	= Using built in UI's =		= Using built in UI's =

	* Typically sites use the shopping cart checkout flow. This uses a checkout page which is suggested to use /checkout as the URL and contain UI/Payments/Checkout on it. You must also add a page with default URL set to "~~/checkout~~/complete" with UI/Payments/Complete on it.		* Typically sites use the shopping cart checkout flow. This uses a checkout page which is suggested to use /checkout as the URL and contain UI/Payments/Checkout on it. You must also add a page with default URL set to "/complete" with UI/Payments/Complete on it.

	* Display what is currently in the cart with the UI/Payments/Cart component.		* Display what is currently in the cart with the UI/Payments/Cart component.

Luke: /* Using built in UI's */

2022-08-30T23:55:28Z

Using built in UI's

← Older revision		Revision as of 23:55, 30 August 2022
Line 79:		Line 79:
	</syntaxhighlight>		</syntaxhighlight>

	* If you would just like a payment method input/selector, which includes selecting previously saved payment methods. Note that the saved payment methods are saved as a token - your site will only store the non-sensitive details such as the last 4 digits and the expiry date. Because of this the full requirements of PCI DSS are avoidable as by default the payment card details never touch your site's servers.		* If you would just like a payment method input/selector, which includes selecting previously saved payment methods, use type='payment'. Note that the saved payment methods are saved as a token - your site will only store the non-sensitive details such as the last 4 digits and the expiry date. Because of this the full requirements of PCI DSS are avoidable as by default the payment card details never touch your site's servers.

	<syntaxhighlight lang="jsx">		<syntaxhighlight lang="jsx">

Luke at 23:51, 30 August 2022

2022-08-30T23:51:09Z

← Older revision		Revision as of 23:51, 30 August 2022
Line 86:		Line 86:

	</syntaxhighlight>		</syntaxhighlight>

			= Working inside the API =

			In a nutshell, the payments module will ultimately create a Purchase with ProductQuantity entries attached to it, then attempt to execute the purchase. For example if a Subscription is created, each time the subscription is billed it will raise a new Purchase and copy over the Subscriptions ProductQuantity entries. This allows historical purchases to list out the items even if the current subscription has been modified in some way.

Luke: /* Payment gateway */

2022-08-30T23:48:45Z

Payment gateway

← Older revision		Revision as of 23:48, 30 August 2022
Line 26:		Line 26:

	[[File:Stripe_gateway_config.png]]		[[File:Stripe_gateway_config.png]]

			Once you have setup the payment gateway, it's '''important that you add a webhook to your site'''. On the Stripe dashboard, create a webhook to https://yourSiteOrStageSite.com/v1/stripe-gateway/webhook.

			This of course won't work when testing locally because Stripe can't access your computer on a LAN (aside from using a Stripe webhook simulator) so the webhook is best set to point at a stage site. You can test your webhook setup is working by using one of Stripe's [https://stripe.com/docs/testing#authentication-and-setup test payment cards with delayed authorisation such as 3DS]. The purchase request is created at Stripe and is marked as pending in your API. Stripe provides the 3DS URL to the frontend which you must then display - the default checkout component (UI/Payments/Checkout) will simply redirect to it. When the user successfully completes the 3DS challenge, the webhook is pinged by Stripe to indicate the payment completed successfully.

	= Adding products =		= Adding products =

Luke: /* Using built in UI's */

2022-08-30T23:42:18Z

Using built in UI's

← Older revision		Revision as of 23:42, 30 August 2022
Line 37:		Line 37:
	= Using built in UI's =		= Using built in UI's =

	* Typically sites use the shopping cart checkout flow. This uses ~~one main~~ page which is suggested to use /checkout as the URL and contain UI/Payments/Checkout on it.		* Typically sites use the shopping cart checkout flow. This uses a checkout page which is suggested to use /checkout as the URL and contain UI/Payments/Checkout on it. You must also add a page with default URL set to "/checkout/complete" with UI/Payments/Complete on it.

	* Display what is currently in the cart with the UI/Payments/Cart component.		* Display what is currently in the cart with the UI/Payments/Cart component.

Luke at 23:41, 30 August 2022

2022-08-30T23:41:06Z

← Older revision		Revision as of 23:41, 30 August 2022
Line 10:		Line 10:

	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.		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.

			= 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.

			[[File: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. If the Stripe entry is not there, you can create it too, or restart the API if you haven't done so yet since installing the module. Config entries are created automatically if they don't exist during startup.

			[[File:Stripe_gateway_config.png]]

	= Adding products =		= Adding products =
Line 19:		Line 35:
	A product also has [[Pricing Strategies\|pricing strategies]] - see the separate page for more information on how those work.		A product also has [[Pricing Strategies\|pricing strategies]] - see the separate page for more information on how those work.

	= ~~Configuring~~ the ~~module~~ =		= Using built in UI's =

			* Typically sites use the shopping cart checkout flow. This uses one main page which is suggested to use /checkout as the URL and contain UI/Payments/Checkout on it.

			* Display what is currently in the cart with the UI/Payments/Cart component.

			* You can add to the cart via the useCart hook:

			<syntaxhighlight lang="js">

			import { useCart } from 'UI/Payments/CartSession';

			...

			var { addToCart } = useCart();

			...

			addToCart({product: 14, quantity: 20}); // Add 20 of product #14 to the cart.

			addToCart({product: 19, isSubscribing: true}); // Adds the subscription product #19 to the cart.

			</syntaxhighlight>

			* Or alternatively to add to the cart, the UI/Payments/ProductQuantity component. This has a +/- quantity UI and an add to cart button:

			<syntaxhighlight lang="jsx">

			import { useCart } from 'UI/Payments/CartSession';

			...

			var { getCartQuantity } = useCart();

	~~== 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.~~		<ProductQuantity product={productObject} quantity={getCartQuantity(productObject.id)}/>

	~~[[File:Payments_locale_currencycode.png]]~~		</syntaxhighlight>

	~~''The currency code field on locales is used~~ by the ~~frontend to pick how to display prices'~~'		* If you would just like a payment method input/selector, which includes selecting previously saved payment methods. Note that the saved payment methods are saved as a token - your site will only store the non-sensitive details such as the last 4 digits and the expiry date. Because of this the full requirements of PCI DSS are avoidable as by default the payment card details never touch your site's servers.

	=~~= Payment gateway ==~~		<syntaxhighlight lang="jsx">

	~~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. If the Stripe entry is not there, you can create it too, or restart the API if you haven'~~t done so yet since installing the module. Config entries are created automatically if they don~~'~~t exist during startup.~~		<Input type='payment' name='paymentMethod' label='Payment method' validate={['Required']} />

	~~[[File:Stripe_gateway_config.png]]~~		</syntaxhighlight>

Luke: /* Payment gateway */

2022-08-30T23:30:20Z

Payment gateway

← Older revision		Revision as of 23:30, 30 August 2022
Line 31:		Line 31:
	== Payment gateway ==		== 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.		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. If the Stripe entry is not there, you can create it too, or restart the API if you haven't done so yet since installing the module. Config entries are created automatically if they don't exist during startup.

	[[File:Stripe_gateway_config.png]]		[[File:Stripe_gateway_config.png]]

Luke: /* Configuring the module */

2022-08-30T23:29:01Z

Configuring the module

← Older revision		Revision as of 23:29, 30 August 2022
Line 20:		Line 20:

	= Configuring the module =		= 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.		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.

			[[File: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.		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.

	[[File:Stripe_gateway_config.png]]		[[File:Stripe_gateway_config.png]]

Luke: /* Configuring the module */

2022-08-30T23:27:00Z

Configuring the module

← Older revision		Revision as of 23:27, 30 August 2022
Line 24:		Line 24:

	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.		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.

			[[File:Stripe_gateway_config.png]]