BUx-Blue-Logo-Modified

The Ultimate Guide: How to Set up Payments in Shopify

Shopify is a subscription-based commerce platform that allows anyone to set up an online store and sell their products. Shopify store owners can also sell in physical locations with accompanying hardware. Shopify merchants with an online and physical presence can sync their inventory and stocks and manage their store(s) from one account on any device. By setting up your Shopify store with BUx, you can offer easier payment checkouts for your customers with instant access to 50,000 over-the-counter locations nationwide, e-wallets, web banking, and more.

How to Integrate the BUx plugin into your Shopify Account

BUx is a leading end-to-end payment platform in the Philippines, giving businesses of all sizes opportunities to offer multiple online payment methods to customers, backed by an extensive network of payment channels nationwide. Through BUx, MSMEs can easily access the largest and most reputable over-the-counter channels with over 50,000 locations (7-eleven, Cebuana Lhuiller, etc.), mobile wallets (GCash, GrabPay, etc.), Instapay and PESONet banks (BPI, UnionBank, etc.) for card payments. QRPH, the national QR code standard introduced by BSP in 2019, is also available. Customers and merchants can safely transfer money between participating Instapay and PCHC banks and e-wallets by sharing one QR code. 

  • Here’s how to integrate BUx into your Shopify:

 

Create a Manual Payment Method and name it BUx Payments 

Note: Important payment method name should exactly be BUx Payments

Create a private app and name it BUx Payments

  1. From your Shopify Admin, go to Apps
  2. Click Develop Apps
  3. Click Create Custom App
  4. Name the App Name as BUx Payments and select the App Developer
    1.  

Note: The app developer can be the store owner or a collaborative account with develop apps permission

 

Set the admin API permissions for the private app for Order Editing and Orders to Read and Write.

Go to Checkout Setting and under Order Processing, add the following code to the additional script:

{% if order.gateway == ‘Bux Payments’ %}

<script>

var base_url = ‘https://bux.ph/shopify/’;

var client_id = ‘<BUX_CLIENT_ID>’;

var order_id = {{ checkout.order_id }};

var redirect_url = base_url + client_id + ‘/’ + order_id;

 

        Shopify.Checkout.OrderStatus.addContentBox(

        ‘<h2> BUx Payments </h2>’,

        ‘<h4> You need to go to BUx to complete your payment. <br/> <br/> <br/><a href=”‘+redirect_url+'” onclick=”location.href=this.href;return false;”> Go to BUx</a></h4>’)

</script>

{% endif %}


In the code seen above, replace the text inside “<BUX_CLIENT_ID>” with your Client ID from the Integration Credentials.

Add a Webhook

  1. Event: Order Creation
  2. Format: JSON
  3. URL: https://api.bux.ph/v1/api/shopify/<client_id>/generate/”

 

Note: Replace <client_id> with your CLIENT_ID on integration credentials.

 Click Save Webhook for the next step.

Go to your BUx dashboard, go to Integration and enter the credentials:

  1. APP API Key – APP API key of the BUx Payments Private App
  2. APP Password – APP Password of the BUx Payments Private App
  3. Webhook Token – Verification token indicated on the webhook page.
    1.  

SHARE ARTICLE

Share on facebook
Share on twitter
Share on linkedin
Share on email