How to access settings
Sign in to the Control Panel (link to external site) of your BigCommerce Store.
To learn more about the Control Panel, please refer to BigCommerce's Help Center (link to external site).
On the navigation menu on the left, click "Apps" and from under "My apps", click "Trust Payments Limited".
You should now be presented with the Trust Payments Settings page, where you can configure the app's integration with the Trust Payments gateway, TRU Connect.
Settings
Enable: (Toggle shown in top-right) Turn this on to enable your payment methods to be shown on the checkout.
Site reference: You must enter your unique site reference in the “Site Reference” field.
It is strongly recommended that you first enter your test site reference (e.g. “test_site12345”), allowing you to perform test payments to our test bank to ensure your implementation works as expected.
When you are ready to go live, you change this to be your live site reference (e.g. “site24680”).
Payment options: Gives you the ability to allow payments to be captured once the order has been placed or once the order has been shipped. (If “Capture on Shipment” is set, the payment will be shown as “Pending” and “Suspended” within MyST).
Transactions flagged as "Suspended" in MyST will not be captured by your acquiring bank unless an Admin manually updates the order to capture using the BigCommerce Control Panel. If no action is taken in 7 days, the transaction will update "Cancelled" status.
JWT username and JWT secret: You need a user account with the role “Webservices JWT” for the app to create the token needed to process a payment. If this user account has not already been provided, please request that one is created for your site reference(s) by contacting our Support Team.
Webservices username and Webservice password: The "Webservices" user is required to authenticate your requests with Trust Payments. Click here to learn how to register a "Webservices" user account.
Card payments description: Enter the title of this payment method to be displayed on the checkout to customers.
Notification password: You must use the same value as entered when configuring the notification in the MyST Rule Manager. This password is to prevent your notifications from being modified by unauthorised users.
Switch to Live Mode: (Toggle shown in bottom-right) This setting allows you to switch the app between live and test configurations. When enabled, the app is configured to operate in live mode.
Google Pay
To begin your integration with Google Pay, you will need to contact our Support Team to confirm/request the following:
- Confirm your acquiring bank supports Google Pay as a payment option.
- Ensure Google Pay is enabled on your site reference.
- Ensure you have a valid JWT username and secret.
To start testing Google Pay transactions, navigate to the Settings page, scroll down to the Google Pay section and follow the steps below:
- Enter your company name in the Merchant name field provided (e.g. "My Company Ltd.").
- Enter your Merchant Id provided by Google, found on this page:
https://pay.google.com/business/console/ (link to external site). - Enable Google Pay using the toggle provided.
Ensure you click "Update" at the bottom of the Settings page when done to save your changes.
When configured correctly, the Google Pay button will be displayed on your checkout.
Enable Alternative Payment Methods (APM)
Scrolling to the bottom of the Settings page, you will see a list of APMs supported by the app. Please ensure you select the APMs that are enabled on your Trust Payments account.
Once you have selected the APMs, click "Update" to enable the selected APMs to be shown on the checkout.
Payment button styling
In the top right of the app Settings page, you have the option to style your payment button on the checkout for both credit/debit cards and APM transactions.
The styling specified in the pop-up will be applied to the CSS selector on the Checkout page of the HTML element where the Trust Payments button is located. You can change the position of the Trust Payments button on your checkout, but we do not recommend it.
By enabling "CSS properties" in the top-right of the pop-up, you can toggle the styling on/off.
To save the changes, you must click the "Submit" button. To remove custom styling from the buttons, click "Reset" to restore the default settings, which are as follows:
Container id
.checkout-step--payment .checkout-view-header
CSS properties
iframe[id^='st-'] {
width: 100%;
}
#st-form{
background: #F9F9F9;
padding: 30px;
}
#trustpaymentLi.checkout-form{
border: 1px solid #00000024;
margin-bottom: 20px;
}
#trustpaymentLi button{
background: #47B590;
color: #fff;
padding: 13px 30px;
text-transform: uppercase;
font-weight: 600;
width: 100%;
}
#trustpaymentLi .paymentItems{
height: 425px;
overflow-y: scroll;
}
#trustpaymentLi #st-expiration-date{
width: 150px;
float: left;
margin-right: 20px;
}
#trustpaymentLi #st-security-code{
width: 238px;
float: right;
}
.optimizedCheckout-form-checklist-item {
border-color: #a5a5a53b !important;
}
.paymentItems li:nth-child(even){
background: #F9F9F9;
}
.optimizedCheckout-form-checklist-checkbox:checked~.form-label::after {
background: #E47D61;
}
.optimizedCheckout-form-checklist-checkbox:checked~.form-label::before {
border-color: #E47D61;
}
#trustpaymentLi .card-number__input {
padding: 1.6rem .8rem !important;
}
#trustpaymentLi .expiration-date__input {
padding: 1.6rem .8rem !important;
}
#trustpaymentLi .security-code__input {
padding: 1.6rem .8rem !important;
}
#trustpaymentLi :focus {
outline-color: #fff !important;
}
Order details
All orders processed using TRU Connect will be visible under the Orders Details page.
Payment number: The unique number allocated to the order. This will also be the orderreference shown in MyST. To view more information on the order, click the green payment number displayed on the left of the table.
BigCommerce order id: The unique BigCommerce order id which matches orders on the BigCommerce Orders page.
Payment type:
For "Capture on Shipment", this will be shown as "AUTH",
and for "Capture on order placed", this will be shown as "SALE".
Payment status: The status of the payment:
Pending – Payment has not been taken.
Confirmed – Payment has been taken.
Settlement status: To notify you if the funds have been captured:
Suspended – Requires merchant to manually update the transaction in order for funds to be captured.
Pending – Awaiting capture. No action from merchant is currently required.
Confirmed – Funds have been captured.
Currency: The currency associated with the transaction.
Total: The original amount of the transaction.
Amount paid: The final amount that has been captured.
Created date (GMT): Timestamp in GMT for when the order was created.
Action: Back-office actions to update orders or process full / partial refunds.
For Suspended transactions (using "Capture on Shipment"), there are two ways to change the state of the transaction to allow capture. You can click the "Settle" button, or alternatively you can update the order by changing the Status from "Awaiting Payment"... (as shown below)
...to "Shipped"...
...and the order will change within the Trust Payments app.
