Stripe Checkout Modes
The Stripe payment integration for Khaos Control Web has various options for the style of integration that is used, these are detailed below.
Hosted
The "hosted" option will send the website user to a Stripe-hosted page to take the payment details:
The customer can choose to pay with a saved card if they have used Stripe before, or they can enter a new card as part of the payment process.
Once the user has entered their payment details and the process is complete, they will be redirected back to the website to complete the order.
Embedded
The "embedded" option is similar to the "hosted" option, but rather than the customer being sent to a Stripe-hosted page to take the payment, the page is loaded on the website via an iframe element:
The customer has the same options as with the hosted page, being able to either use an existing card or enter new card details.
Once the user has entered their payment details and the process is complete, they will be redirected to the order confirmation page to complete the order.
The main advantage of this method over the "hosted" option is that the user won't appear to leave the website at any point during the payment process.
Payment Buttons
The "payment buttons" option works in a similar way to Paypal. When the user clicks the button to pay a popup window is opened where they can enter their payment details:
This is different to the "hosted" or "embedded" options as it doesn't provide any details about the order within the popup window.
Once the user has entered their payment details and the process is complete the popup window will be closed and the user will be redirected to the order confirmation page to complete the order.
This has the advantage of allowing for Google Pay and Apple Pay to be used, and these buttons will be available on the relevant devices as a separate payment button.
You are also able to disable the standard "Link" payment button via your Stripe account, which means this option can be used to add only the Google / Apple Pay buttons as payment methods.
Custom Flow
The "custom flow" option is similar to the "embedded" option, as it loads the Stripe details into the website using an iframe element, but it is a much simpler version with no item details listed:
This option allows for much more customisation as to the look and feel of the integration, although the main payment section is still the same as on the other integrations.
In a similar way to the "embedded" option, the user never leaves the website while filling in their payment details and processing the order.