Stripe for OpenCart. Configuration. Part 2

This is the second part of the article describing how to configure Stripe payment gateway for OpenCart 2. The first part can be found here.

Product page
OpenCart Marketplace
Demonstration site admin area
Demonstration site front-end

Tab ‘System’

Contents of the ‘System’ tab are shown in figure 1. Configurations are summarized in table 1.

Stripe for OpenCart Sysytem tab
Figure 1.

Table 1. ‘System’ tab configurations

Configuration name Description
Extension status Enables/disables the extension
Authorized Payment Status Defines status of an order when payment was authorized
Captured Payment Status Defines status of an order when payment was captured
Refunded Payment Status Defines status of an order when payment was refunded
Show permitted payment systems If enabled then the icons of permitted payment card vendors will be displayed on checkout (figure 2)
Test mode Switches the extension into test mode. It’s a good idea to test the extension in the test mode before start to receive payments from your customers. In order to switch between the live and the test mode you need to set your stripe account into appropriate mode as well
Clear settings If enabled this setting allows you to preserve settings of the extension when you uninstall it
Notify on order error This useful feature allows you to receive an email notification if error occurs during payment process so that you can handle such situation manually if needed

Select payment method view
Figure 2.

‘Checkout’ tab

Contents of the ‘Checkout’ tab are shown in figure 3. Configurations are summarized in table 2.

Stripe for OpenCart Checkout tab
Figure 3.

Table 2. ‘Checkout’ tab configurations

Configuration name Description
Cardholder’s name If this setting enabled then payment form has the additional field (figure 4) so that a customer can fill in its name to show it in charge details at Stripe Dashboard. By default customer’s name is took from customer’s account details
Save card If this setting is enabled then the checkbox element is added to the payment form (figure 4). If customer checks this element the payment card will be saved in your stripe account so the next time customer can use that saved card without the need to fill in details of the payment card anew. It increases safety and usability of payment operations. If a customer has saved cards then payment form will have additional field with drop-down list of all the saved payment cards (figure 5)
Saved card password This setting allows a customer to specify an additional password for a saved card. If ensures an additional level of security in case your store will be compromised
Allow customers to edit cards This setting allows a customer to manage saved cards through his/her account (figure 6). The extension uses Stripe’s “Source” API as the most modern and robust. At the time of writing this article Stripe didn’t allow to delete a saved source object (payment card), so the only option, available to a customer through its account is which saved card should be used as default payment source. This option affects recurring payments – the default payment source is the source for recurring payments
Popup form This setting switches the payment form between embedded and pop up modes (figure 7)
3D Secure Enables 3D Secure payment flow. This setting affects payment flow in the case when 3D Secure is an option. If the bank issuer requires 3D Secure – 3D Secure payment flow fill be applied disregarding this setting. If a card doesn’t support 3D Secure normal payment flow will be applied
Bitcoin support Enables Bitcoin support (figure 8)
Alipay support Enables Alipay support (figure 9)
Bancontact support Enables Bancontact payment option (figure 9a)
Giropay support Enables Giropay payment option (figure 9b)
iDEAL support Enables iDEAL payment option (figure 9c)
SOFORT support Enables SOFORT payment option (figure 9d)
Hide button This is the compatibility feature for one step checkout extensions. It allows you to hide extension’s the order confirm button (one step checkout provides its own button) when something went wrong and you end up with two confirm buttons on the page
Button’s CSS class This is the compatibility feature for one step checkout extensions. It allows you to add additional CSS class names to the confirm order button so it can be clicked programmatically in case of a problem with one step extension. It also gives you the ability to customize button’s appearance via additional CSS rules

Embedded payment form
Figure 4.

Selection of saved payment cards
Figure 5

Saved payment cards management though customer admin area
Figure 6.

Pop up payment form
Figure 7.

Bitcoin payment form
Fugure 8.

Alipay payment form
Figure 9.

Figure 9a

Figure 9b

Figure 9c

Figure 9d

‘Form customization’ tab

This tab allows you to customize the appearance of the payment form: background color, form shadow, form border, form width, border radius, pop-in and pop-out animations etc (figure 10). Since the meaning of the control elements of this tab is straightforward there is no need to describe them in details.

Stripe for OpenCart Form customization tab
Figure 10.

‘Payment button’ tab

The extension allows you to add the button to a product page to pay in one click (figure 12). A customer, using this button, can place an order from a product page in one click without the need to go through all checkout process. The only restriction is that customer need to be logged in and product may not have required options or recurring plan associated with it.
Contents of the ‘Payment button’ tab are shown in figure 11. Configurations are summarized in table 3.

Stripe for OpenCart Pay in one click button tab
Figure 11.

The pay in one click button
Fifure 12.

Table 2. ‘Payment button’ tab configurations

Configuration name Description
Status Status of the button: enabled/disabled
Payment method name The description of payment method, to be shown at the order information page (figure 13)
Shipping method Defines shipping method for products which require shipping. If this setting not defined and product requires shipping then button won’t be displayed
Describe price Enables/disables description field displayed below the button (figure 12). This field describes the structure of a price total. Useful when product requires shipping and so total price is different than product price
Text height The height of text of the button
Vertical padding The spacing between content and top and bottom edges of the button
Horizontal padding The spacing between content and left and right edges of the button
Button’s border radius Border radius of the button
Button color Background color of the button
Button’s text color Font color of the button
Full width Makes responsive layout of the button – button fills in all available width

OpenCart order information page
Figure 13.

‘Tamplate’ tab

So far ‘Template’ tab contains only ‘Payment error template’ which defines contents of the email which is sent to the store admin when an error occurs during the payment process (figure 14). This template supports shortcodes. In order to get the list of all the available shortcodes click on the blue button with the question mark on it near the template’s input field.

Stripe for OpenCart Template tab
Fugure 14.
Read continuation of the article.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>