Integrate credit card payment with your Shopify store directly on the checkout page using Razorpay Direct - Credit Card plugin.

Integration Steps

Follow the steps given below to integrate the plugin and refer to the go-live checklist before taking the integration live.

1. Build Integration

Follow the steps given below to install the plugin:

Handy Tips

If you are an existing Razorpay user, you can directly begin the integration process from step 4.

Create a
Razorpay account
.
Submit your KYC, and if we require any further clarification, we will reach out to you on WhatsApp, SMS and email.
Once our team completes the KYC verification and you are enabled to accept payments, we will send an account activation confirmation on WhatsApp, SMS and email.
Create a
Shopify account
.
Install
Razorpay Direct - Credit Card
from the Shopify app store.

Handy Tips
If you have multiple stores, select the store for which you want to install the Razoarpay Direct - Credit Card.
You will be redirected to the Shopify home screen. Click Install app.
You will be redirected to a landing page. Click I am an existing user and log in to your Razorpay account.
Handy Tips
- Ensure you log in with owner credentials to connect Razorpay with Shopify successfully.
- If you are a new Razorpay user, click I am new to Razorpay and
  sign up
  for an account.
Click Activate Razorpay Direct - Credit Card on the activation screen on your Shopify Dashboard.

Razorpay Direct - Credit Card Plugin now appears as a payment method on your Shopify Store.

Enabled credit card plugin on shopify store

Handy Tips

Webhooks is auto-configured. You need to verify if webhooks are enabled on your
Razorpay Dashboard
.
The order.paid, payment.authorized, refund.processed and refund.failed events are auto-configured. You do not have to configure it on the Razorpay Dashboard.

2. Go-live Checklist

Before you go live with the Razorpay Direct - Credit Card Plugin on your Shopify store, follow the steps given below:

2.1. Test Transaction in Test Mode

After the integration is complete, you need to ensure that the integration is working as expected. You can start accepting actual payments from your customers once the test mode transaction is successful.
Follow the steps given below to test a transaction in test mode:

Log in to your
Shopify store
.
Navigate to Settings → Payments.
Click Manage on the Razorpay Direct - Credit Card app.
At the bottom of the page, select the Enable test mode check box and click Save.
On your Shopify store, add an item to your cart and click Buy it now.
Fill in your contact and shipping details and click Continue to shipping.
Select the Shipping method and click Continue to payment.
Select Credit card and enter the card details.
Click Pay now and complete the order.

2.2. Switch from Test Mode to Live Mode

You can perform an end-to-end simulation of funds flow in the Test Mode. Once confident that the installation and integration is working as expected, switch to the Live Mode and start accepting payments from customers.

To switch from Test Mode to Live Mode:

Log in to your
Shopify store
.
Navigate to Settings → Payments.
On the Supported payment methods section, click Manage on the Razorpay Direct - Credit Card app.
At the bottom of the page, clear the Enable test mode check box and click Save.

You can now start accepting actual payments on your Shopify store.

Verify Payment Status

You can track the payment status from the Razorpay Dashboard or poll our APIs.

Dashboard

Log in to the
Dashboard
and navigate to Transactions → Payments.
Check if a payment_ID has been generated and note the status. In case of a successful payment, the status is marked as captured.

Poll APIs

Poll Payment APIs

to check the payment status.

Refunds

Initiate Refunds

Follow the steps given below to initiate refunds using Shopify store:

Log in to the
Shopify account
.
After a payment is completed, navigate to Orders.
Select the order you want to initiate a refund.
Click Refund.
Select the quantity of the item and click Refund.
You can either issue a full refund or a partial refund.
- For a full refund, enter the entire payment amount.
- For a partial refund, enter a value lesser than the payment amount.
You can verify the refund status from the Razorpay Dashboard. Navigate to Transactions → Refunds and check if a Refund Id is generated for the relevant Payment Id.