Stripe Checkout Modes

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.


    • Related Articles

    • Enabling Stripe Capture (Pre-authorisation)

      As well as Stripe taking payment straight away when a customer checks out, you can also enable payment capture which checks the customer has the funds but holds it in their bank account to be transferred later (Pre-authorisation). This is handy for ...
    • Add a domain to Stripe

      In order to use Apple Pay, Google Pay, Link, and PayPal on Stripe you need to verify the domain that the payment information will be sent from. In order to do this you will need to do the following: 1. Log into you Stripe Account. 2. Click on the ...
    • v3.1.5.0

      - Improved when the cache plugin stores cached versions, and when it clears them. - Fixed some issues with the robots.txt file. - Improved the Payment Logs CMS page to make it easier to use. - Improved the Email Manager CMS page to make it easier to ...
    • v3.4.5.2

      - Added extra filters for min and max weight to the delivery method filtering. - Changed the bogof matching to allow for multiple parent products. - General improvements to the code, as well as some minor fixes for persistent errors. - Improved ...
    • Google Tag Manager

      Accessing the Google Tag Manager Settings You can access the Google Tag Manager settings by going to “KC:Web” -> “Google Tag Manager” on the left-hand menu. Available Options Type: The type of trigger for the enhanced ecommerce data to be sent to ...