Skip to content

Shopify

What Is Shopify?

Shopify is the e-commerce plugin that provides you with an interface to support selling your products online.

Shopify allows you to create, edit, and publish your e-commerce website using templates that are easy to use.

Shopify allows you to fully customize your website, online store, and blog. There is a full set of features that can support your selling needs, including creating Shopping Cart, Store Management, Marketing & SEO, and managing the Store Front.

You can use your Shopify integration with Xendit, in order to enable accepting payments through Credit Cards, Virtual Accounts, and Alfamart.

  • Register, integrate, and go live in no time

  • Accept via Virtual Account, Credit Card, and Retail Outlets

  • Configure and activate as needed

  • Refund via Credit Card Feature

  • First month free!

alt text

How to Integrate Xendit with Shopify

To have this enabled, here’s what you need to do:

  1. Click this link to activate your Xendit payment:

    1. Click this link to activate grouped payment:
      1. Xendit
    2. Click this link to activate single payment channel:

      1. Alfamart (Please contact us to activate this payment before continue)
      2. Bank Transfer BCA (Please contact us to activate this payment before continue)
      3. Bank Transfer BRI
      4. Bank Transfer BNI
      5. Bank Transfer Mandiri
      6. Bank Transfer Permata
      7. Credit Cards
      8. OVO (Please contact us to activate this payment before continue)
  2. Login to your Shopify account alt text

  3. Click “Install payment provider" alt text

  4. After clicking Install, you should be taken into Settings > Payment providers alt text

  5. In the Alternative payments section where it says Using: Xendit, click Edit. In the next step, you will need to retrieve the user ID and key from the Xendit dashboard. (tick test mode if you’re using development environment. You’re unable to use production mode if your account is not live yet) alt text

  6. Create or login to your Xendit dashboard here alt text

  7. Once inside your dashboard, click Settings > Configuration > Invoices > Copy Shopify User ID and Key (Tick test mode if you’re using development environment. You’re unable to use production mode if your account is not live yet!) alt text

    Settings > Configuration alt text

    Settings > Configuration > Invoices alt text

  8. Copy the Supported Plugin Shopify User ID and Key alt text

  9. Go back to your Shopify page, paste the Shopify User ID and Key. Hit Save. alt text

  10. You can now test out your Xendit invoice checkout from a customer’s perspective: Side bar > Sales channels > click on the eye symbol

    alt text


Xendit Shopify Flow

Pay via Xendit

  1. Add product to cart alt text

  2. Click Check Out alt text

  3. Input customer information and click Continue to payment method alt text

  4. Choose Xendit as a payment method and click Complete order alt text

    In the Shopify Admin dashboard, Once the customer clicks Complete order, the order will appear in All Orders > Abandoned Checkout alt text

    In the Xendit dashboard, once the customer clicks Complete order, the order will appear in Invoices list as “Unpaid” alt text

  5. Customer will be redirected to the Xendit Invoice Interface alt text

Accepting Payments via Virtual Account

  1. Select Bank Transfer and choose the preferred bank to transfer to. alt text

  2. Copy the Virtual Account number alt text

  3. After the customer pays via ATM/iBanking/mBanking, the customer will be redirected into Shopify’s thank you page alt text

  4. In the Shopify admin dashboard, you will see that the order created in Orders > All Orders alt text

  5. Click the order and scroll down to Timeline to see the Checkout number alt text

  6. You can copy the checkout ID and paste it in the Xendit dashboard to view and reconcile the transaction alt text

  7. In the Xendit admin dashboard, you will see that the order is paid in your Xendit dashboard and that the status is “Settled” alt text

  8. You can try to simulate the payment on the development environment here

Accepting Payments via Credit Card

In the Shopify Admin dashboard, Once the customer clicks Complete order, the order will appear in All Orders > Abandoned Checkout

In the Xendit dashboard, once the customer clicks Complete order, the order will appear in Invoices list as “Unpaid”

  • To pay via Credit Card, choose Card, input card number, expiry date, and 3 digit CVV. Click Pay Now. alt text

  • Enter OTP and hit Submit alt text

  • The customer will be redirected into Shopify’s thank you page. alt text

  • In the Shopify dashboard, the orders will be marked as Paid alt text

  • In Xendit Dashboard > Invoices, the invoice will be marked as Paid alt text

  • In Xendit Dashboard > Credit Cards, the invoice will be marked as Charged alt text

-You will see that the Xendit fee has been deducted alt text

Refunding Order

Here's what you can do to process refund transactions on shopify:

  1. You can refund the payment by clicking Refund on the order details. alt text

  2. You can specify how much you want to refund on the refund window. alt text

  3. Please note that orders paid via methods other than credit card cannot be refunded.

  4. You will see that the refunded amount is deducted from the payment total. alt text alt text

  5. Upon full or partial refunds, the payment status will change to “Refunded” alt text

Cancelling order

You can cancel the payment by clicking more action and choose cancel on order details

alt text

You can specify how much you want to refund on the cancel window.

You cannot refund orders paid via methods other than credit card.

You will see that the refunded amount is deducted from the payment total

alt text

Refunded orders and canceled orders will become red with the amount struck-through. The payment status will say “Refunded” or “Partially Refunded” accordingly. alt text

Reconciliation

To match the Shopify order with Xendit’s invoice, you can use the shopify checkout order number and search it in Invoice tab on Xendit Dashboard

alt text

alt text

Abandoned checkout orders will also appear in Xendit Dashboard > Invoices

Troubleshooting

If there’s something that you need to ask regarding an order from shopify using our payment gateway, please open the order details and note the checkout number so that we can help you faster.

alt text