SHOPPING OVERVIEW
End Point
For more details, check out the source code on
Github
1. Introduction
WooCommerce Citcon gateway plugin extends WooCommerce to accept Alipay, WeChat Pay, Union Pay. It provides countless opportunities for delighting shoppers, building loyalty, and increasing revenue.
Accept payments anytime, anywhere. Whether your business runs on desktop or mobile, we’ve got you covered.
2. Integration Guide
2.1. Installation Guide
2) Login to Admin panel and click “Plugins” -> “Add New” -> “Upload Pugin” as shown in the following screenshot.
3) Choose downloaded WooCommerce Citcon plugin .zip file and Click “Install
Now”.
- Once plugin installed successfully, click “Activate Plugin”.
- Click “Plugins”. Find CitconPay Gateway for WooCommerce and click
“Activate”.
6) Find “CitconPay” and click “Manage” button to configure Citcon payment settings.
- Make sure “Enable CitconPay” is checked and enter Citcon CHOP token in API Token field. Select Test or Live Mode accordingly. Save
Note: CHOP token is a merchant-specific and distributed by Citcon, which is used to authenticate API requests to Cticon API. Please keep the token secure.
- Enable/disable Specific Payment Method
2.2. Checkout
- Add items to the shopping cart, and proceed to checkout
- Under CitconPay, choose Alipay, WeChat Pay or Union
- Click “Place Order”, one of the following page will show up
- If you select AliPay or WechatPay, then page will show QR code
- If you select Union Pay,then page will show
- Use Alipay/WeChat mobile app to scan the above QR code on the screen or type credit card on the Union Pay payment page.
- Once payment is finished, either order confirmation or order failure page will be displayed.
2.3. RefundLogin to admin panel.
- Click “WooCommerce” -> “Orders”.
- Click the order which you want to refund
- Click “refund”
- Type refund amount, then click “refund”
- Click “OK” in popup If the refund is successful, the website will display a refund confirmation page.
3. FAQ
3.1. Re-order Payment Methods
In function payment_fields in woocommerce-gateway-citconpay.php file, change payment method list items order to re-order them.
3.2. Configure Default Payment Method
In function payment_fields in woocommerce-gateway-citconpay.php file, add checked=“checked” to the default payment method list item.
3.3. Configure Currency
If the system reports “Currency is not supported” message after enabling the Citcon payment, go to general and change currency to the value that’s associated with the
DOCUMENT CHANGE RECORD
Ver | Date | Affected parts | Document type | Prepared By |
1.0.0 | 12-20-2019 | All | New feature explanation | Elle |
1.0.1 | 3-3-2020 | Introduction, II/5, II/6 | Refer to notes in page 2 under “Change notes from v1.0.0 to v1.0.1” | Haixin |
1.0.2 | 3-3-2020 |
| Adding CAD | Jeff |
1.03 | 9-20-2020 | I | Remove private link invitation | Elle |
- Update introduction to include mobile experience
- Update Section II – point 5 & point 6, adding UnionPay payment method
I . How to configure Citcon gateway in Shopify dashboard:
- Open shopify admin panel in your browser
- Choose your store, key in credentials to login if not logged in yet
3)Choose Payment providers; from Setting page:
4)Choose alternate payment methods ; from the payment provider page:
5) Choose <alternate payment methods> from the payment provider page:
- Fill <User Login> and <Citcon CHOP token>
- User login: merchant email associate with the Citcon merchant account
- Citcon CHOP token: CHOP token configured by Citcon
- Payment methods: merchant should choose only the payment types they contracted to accept through the Citcon gateway
- Enable or disable test mode and activate payment
- Noted: to accept Credit Card network transaction, merchant need to be on-boarded with Elavon with it’s CHOP token correctly configured by Citcon merchant tech team
After Merchant correctly configures their shopify admin portal, merchant can proceed to test out checkout flow by following the below instructions. Because this Shopify plugin has been tested merchants may go direct to production. If the merchant receives the following message during
checkout contact support@citcon-inc.com as additional configuration ot troubleshooting is required.
II. Consumer checkout experience:
- Adding items to your shopping cart from your store page:
2) Confirm contact & shipping information:
3. Choose a shipping method:
Noted, if merchant only chose to accept ALP/WXP through Citcon, the payment method will only show ALP/WXP here.
- Complete order to bring up Checkout page: Click on payment method logo to proceed
- Amount in USD or CAD: the amount of order to be paid
- Company name: the merchant name set up by Citcon
- Order ID: Order reference # created by It is the unique identifier for this order
- Payment type: will show accordingly based on merchant selection
Note: The transaction currency for the demo below is USD. If the transaction is conducted with CAD, the currency type on the UI will be adapted.
For example, ‘Amount in USD’ will be changed to ‘Amount in CAD’; ‘USD to RMB Exchange Rate’ will be changed to ‘CAD to RMB Exchange Rate’, and so on.
If all payment method are selected: For USD transaction:
If only ALP is selected: For USD transaction
If only WechatPay and UnionPay are selected: For USD transaction:
For CAD transaction:
6. After choosing the payment type, the consumer will be redirected to the Citcon CHOP page to complete the transaction:
– Choose ALP to checkout For USD Transaction:
For CAD transaction:
- Choose WXP to checkout For USD transaction:
For CAD transaction:
- Choose Credit Card to checkout
- Choose UnionPay to checkout
For CAD transaction:
7. Payment success page, choose “continue shopping” to go back to home page:
– Merchant Refund flow
Option #1: Through Shopify admin portal
1. Open under Orders tab, then select the order you want to refund:
3. Confirm the amount you want to refund to this order:
Option #2: Through Citcon Dashboard
Once a merchant is successfully on-boarded, Citcon will create a dashboard account for the merchant. Merchant can login to the dashboard and perform a refund from there.
After the merchant successfully tests all payment types of transaction & refund, Citcon will issue a production CHOP token to the merchant. Merchant then can use this token to add Citcon gateway in its public store site.
1. Introduction
Citcon is a payment gateway that supports payment methods such as Alipay,
WeChat Pay, and Credit Cards. Citcon offers omni-channel payment solutions
together with fund settlement. For more information, please contact sales@citconinc.com.
Among the many integration patterns of Citcon Payment products, Citcon Online
Hosted Payment (CHOP) is the most convenient for e-Commerce web sites, for its
encapsulation of complex logic and user-facing components of the payment flows.
When integrated with CHOP, consumers from a merchant’s web site are redirected
to the secure and PCI-DSS compliant Citcon CHOP web site to complete payments.
The result of the payments is communicated to merchant in real-time client-side
callback, as well as via asynchronous near-real-time instant payment notifications.
For more details of CHOP, please read https://doc.citconpay.com/citconAPI/#chop.
This document describes how to install Magento payment extension of CHOP into a
Magento 2 deployment.
Important: Citcon payment extension package for Magento 2 supports Magento
2.2.x & Magento 2.3.x and requires PHP version 7.1 and above.
2. Integration Guide
2.1. Information Needed
2) A provisioned CitconPay CHOP Access Token (if you don’t have it, please contact sales@citcon-inc.com)
3) A CitconPay CHOP access URL (if you don’t have it, please contact sales@citcon-inc.com)
2.2. Installation
) Log into your hosting space via a FTP client
2) Clear Magento caches via your Magento2 admin panel
- Uncompress Citcon payment extension package for Magento 2 and upload files to your website server under Magento root code folder app/code/
Folder app/code/ should look like the following screenshot:
4) Run the following command at the command line under Magento root folder
php bin/magento setup:upgrade php bin/magento setup:di:compile
5) Flush Magento cache as described in step 2.
2.3. Configuration
1) Go to Magento 2 admin panel, select menu Stores -> Configuration -> Sales
-> Payment Methods -> Citconpay Online Payments
2) Configure one of the following Citcon merchant settings
• Sandbox Payment URL and Sandbox API Key
• Live Payment URL and Live API Key Please refer to the following screenshot.
Consumers will see Citcon payment methods on checkout page. Depending on Citcon payment configurations, one or more payment methods (WeChat Pay, Alipay or Credit Card) will be displayed. See example below.
At this moment, log into admin portal. Go to Sales -> orders and find your order. Status “Processing” means that the payment goes through successfully.
To refund an order that is paid by CitconPay, follow the normal procedure to create a Credit Memo, and then click on Refund.
- Use Alipay/WeChat mobile app to scan the above QR code on the screen or type credit card on the Union Pay payment page.
- Once payment is finished, either order confirmation or order failure page will be displayed.
3. FAQ
3.1. Citcon Payment Debug Log
- Citcon log file is saved at var/log/citcon.log under Magento root code folder.