LogoLogo
Explore with DeepWikiJoin Slack CommunityContact Us
  • About Hyperswitch
    • Introduction
    • Payments Suite
    • Payments Modules
      • Cost Observability
      • Revenue Recovery
      • Vault
        • Server to Server Vault tokenization
        • Vault SDK Integration
      • Intelligent Routing
      • Reconciliation
        • Getting Started with Recon
      • Alternate Payment Method Widgets
        • Hyperwidget Integration Guide
    • Roadmap - Q2 2025
      • Previous Roadmap - Q1 2025
      • Previous Roadmap - Q4 2024
      • Previous Roadmap - Q3 2024
      • Previous Roadmap - Q2 2024
      • Previous roadmap - Q1 2024
      • Previous roadmap - Q4 2023
  • Use-Cases
    • For SaaS Businesses
    • For B2B SaaS Businesses
    • For E-Commerce Businesses
    • For Marketplace/Platforms
  • Explore Hyperswitch
    • Payment Orchestration
      • Accept Payments
        • Connectors
          • Activate Connector on Hyperswitch
          • Try a Payment
          • Available Connectors
            • ACI
            • Adyen
            • Airwallex
            • Authorizedotnet
            • Bambora
            • Bank of America
            • Billwerk
            • Bluesnap
            • Braintree
            • Checkout
            • Coinbase
            • Cybersource
              • Apple Pay
              • Google Pay
            • dLocal
            • Fiserv
            • GlobalPayments
            • GoCardless
            • Klarna
            • Mollie
            • MultiSafepay
            • Nuvei
            • OpenNode
            • Paypal
            • PayU
            • Prophetpay
            • Rapyd
            • Shift4
            • Stripe
            • TrustPay
            • Volt
            • Worldline
            • Worldpay
            • Zen
            • Netcetera
              • Authenticating Payments via Netcetera Through HyperSwitch SDK
        • Setup Payment Methods
          • Cards
          • Wallets
            • Apple Pay
              • Web Domain
              • iOS Application
            • Google Pay
            • PayPal
          • Pay Later
          • Banks
            • Bank Debits
            • Bank Redirects
            • Bank Transfers
            • Open Banking
          • Crypto
          • Test Credentials
        • Payment Links
          • Configurations
          • Create Payment Links
          • Secure Payment Links
          • Setup Custom Domain
        • Save a Payment Method
        • Manual Capture
        • Incremental Authorization
        • Tokenization & Card Vault
          • Network Tokenisation
        • Supported Payment Workflows
        • Co-badged Cards
        • Webhooks
      • Process Payouts
        • Getting Started with Payouts
        • Using Saved Payment Methods
        • Smart Router for Payouts
        • Smart Retries in Payout
        • Payout Links
      • Smart Routing
        • Rule Based Routing
        • Volume Based Routing
        • Default Fallback Routing
      • Smart Retries
        • 3DS Step-up Retries
      • 3DS / Strong Customer Authentication
        • Setting up 3DS Decision Manager
        • Native 3DS Authentication
        • External Authentication for 3DS
      • Fraud & Risk Management
        • Activating FRM in Hyperswitch
        • Fraud Blocklist
      • Subscriptions
        • PG Agnostic Card Forwarding
        • Zero Amount Authorization
      • Split Payments
        • Stripe Split Payments
        • Adyen Split Payments
        • Xendit Split Payments
    • Checkout Experience
      • Customizable and Native Integrations
        • Web
          • Node And React
          • Customization
          • Error Codes
          • Node and HTML
          • Vanilla JS and REST API Integration
        • Android
          • Kotlin with Node Backend
          • Customization
          • Features
        • iOS
          • Swift with Node Backend
          • Customization
          • Features
        • React Native
          • React Native with Node Backend
          • Card Widget
          • Customization
        • Flutter
          • Flutter with Node Backend
          • Customization
        • Headless SDK
        • Server Setup
      • Click To Pay
        • Visa Click to Pay: V1 to V2 Migration
      • Payment Methods Management
    • Payment Operations
      • Managing Accounts and Profiles
        • ⚙️Control Centre Account setup
        • Hyperswitch Account Structure
      • Manage Your Team
      • Analytics & operations
        • Exporting payments data
      • Disputes / Chargebacks
      • Surcharge
        • Surcharge Setup guide
      • Multi-Tenancy
      • Data migration
        • Import data to Hyperswitch
        • Export data from Hyperswitch
    • Security and Compliance
      • PCI Compliance
      • Data Security
      • GDPR compliance
      • Identity and Access Management
    • E-commerce Platform Plugins by Hyperswitch
      • 🔌WooCommerce Plugin
        • Setup
        • Roadmap
        • Compatibility
        • FAQs
      • Saleor App
        • Setup
      • Automatic Tax calculation for Express Checkout wallets
  • Hyperswitch open source
    • Overview
      • Run Hyperswitch Locally Using Docker
        • Run Additional Services
      • Development Environment Setup
        • Backend
          • Configure and Run the Application
          • Try out APIs
        • SDK (Frontend)
        • Control Center
    • Deploy on AWS
      • Deploy on AWS using CloudFormation
      • Component-wise Deployment
        • Deploy app server
        • Deploy Control Center
        • Deploy web client
          • Production ready deployment
          • Integrate web client on your web app
          • Playground deployment for prototyping (optional)
        • Deploy Card Vault
          • Production ready deployment on AWS
          • Cloud setup guide
    • Deploy on Kubernetes
      • Deploy on GCP Using Helm Charts
      • Deploy on Azure Using Helm Charts
    • Exploration Guide
    • Account setup
      • Using Hyperswitch Control Center
      • Test a payment
      • Using postman
    • Troubleshooting
  • Testing Payments
  • Check list for Production
    • Going live
      • For SaaS Setup
      • For On-Prem Setup
        • Monitoring
        • PCI compliance
          • Get started
          • Completing the SAQ
        • Data Security
        • Updates
  • Learn more
    • API Reference
    • Connectors Supported
    • SDK Reference
      • React
      • JS
      • Custom Events
    • Hyperswitch architecture
      • Router
      • Storage
      • A Payments Switch with virtually zero overhead
    • Payment flows
    • Blog
  • Community Guidelines
Powered by GitBook

Compliance

  • Vulnerability Disclosure
  • PCI DSS 4.0
  • ISO 27001:2022

Community

  • Slack
  • Discord
  • GitHub Discussion
On this page
  • Prerequisites
  • 1. Setting up the Juspay App on your Saleor Dashboard
  • 2. Accept payments through Juspay Saleor App

Was this helpful?

  1. Explore Hyperswitch
  2. E-commerce Platform Plugins by Hyperswitch
  3. Saleor App

Setup

Juspay Saleor Payment App Setup

Last updated 6 months ago

Was this helpful?

Connects Juspay's Hyperswitch and Hypercheckout with Saleor, enabling merchants to process payments securely and efficiently within their Saleor storefront for both Indian and international customers.

This section covers the steps to setup Juspay payment app through saleor

Prerequisites

1. Sign up to payments dashboard

1.1 Non Indian payments dashboard sign up

to Hyperswitch dashboard and navigate to connectors tab to configure connector(s) and enable various Payment Methods.

Note: While configuring connectors, please ensure that you also set up connector's webhook with hyperswitch.

1.2 Indian payments dashboard sign up

to Hypercheckout dashboard and navigate to Payments > PG Control Centre to configure payment gateways and enable various Payment Methods.

Note: While configuring payment gateways, please ensure that you also set up it's webhook with hypercheckout dashboard .

Juspay Saleor app relies on these webhooks to update the payment status accurately and in real-time.

2. Sign up to Saleor dashboard

Sign up to , set up a new project, and tailor your store to meet your unique needs.

1. Setting up the Juspay App on your Saleor Dashboard

1.1 Install the App

  1. Input your Saleor API URL and click Add to Saleor. This action will start the installation process and display the installation page.

  2. Finally, click on Install App, this will install the app in your dashboard

1.2 Configure the App

1.2.1 Configure for non Indian payments

  1. Open Hyperswitch App installed on your saleor dashboard.

  2. Click on Add new configuration, which opens a popup to select non Indian payments. This will open a form to collect credentials.

  • Enter a unique configuration name. This name will be used later to assign the configuration to Saleor channels.

  • Enter your Hyperswitch Publishable Key. You can find this key under the Developers > API Keys section of hyperswitch dasboard.

  • Enter your Hyperswitch Payment Response Hash Key. You can find this key under the Developers > API Keys section of hyperswitch dasboard.

  1. Click on Save Configuration

1.2.2 Configure for Indian payments

  1. Open Hyperswitch App installed on your saleor dashboard.

  2. Click on Add new configuration, which opens a popup to select Indian payments. This will open a form to collect credentials.

  • Enter a unique configuration name. This name will be used later to assign the configuration to Saleor channels.

  • Enter your Hypercheckout merchant id. You can find this by clicking on your account symbol in navbar.

  • Enter your username to receive webhooks. To get username visit Payments > Setting > Webhooks.

  • Enter your password to receive webhooks. To get passowrd visit Payments > Setting > Webhooks.

  • Enter your Hypercheckout client id. To get client id you can visit studio from the sidebar Payment Page > Studio.

  1. Click on Save Configuration

1.3 Assign Channel to your configuration

For each channel, payments will be processed according to configurations assigned to it.

Now Hyperswitch Saleor App is configured to receive payments

2. Accept payments through Juspay Saleor App

Get available payment gateways

If you have configured Juspay in your Saleor dashboard, you will receive the Juspay App ID in the response

query {
  checkout(id: "saleor_checkout_id") {
    availablePaymentGateways {
      id
      name
    }
  }
}

Response

{
  "data": {
    "checkout": {
      "availablePaymentGateways": [
        {
          "id": "app.saleor.juspay-test",
          "name": "Juspay"
        }
      ]
    }
  }
}

Initialize the payment gateway

This call returns whether the payment is going through hyperswitch or hypercheckout.

mutation JuspaypaymentGatewayInitialize {
  paymentGatewayInitialize(id: "payment_gateway_id") {
    gatewayConfigs {
      data
      id
    }
  }
}

Response

{
  "data": {
    "paymentGatewayInitialize": {
      "gatewayConfigs": [
        {
          "data": {
            "orchestra": "HYPERSWITCH/HYPERCHECKOUT"
          },
          "id": "app.saleor.juspay-test"
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 0,
      "maximumAvailable": 50000
    }
  }
}

Initialize the transaction

To initialize the transaction with hyperswitch, one needs to create a transaction in Saleor by calling the transactionInitialize mutation.

mutation JuspayTransactionInitialize($data: JSON!) {
  transactionInitialize(
    id: "saleor_checkout_id"
    amount: 54.24
    paymentGateway: { id: "app.saleor.juspay-test", data: $data }
  ) {
    transactionEvent {
      pspReference
      amount {
        amount
        currency
      }
      type
    }
    data
    errors {
      field
      message
      code
    }
  }
}

You can pass additional fields while initiating the transaction through the $data JSON object. The additional fields you can pass include:

  1. customerId: [Optional String] The identifier for the customer

  2. authenticationType: This is used for non Indian payments. Pass this parameter to force 3DS or non 3DS auth for this payment. Some connectors will still force 3DS auth even in case of passing 'no_three_ds' here and vice versa. Default value is 'no_three_ds' if not set Available options: three_ds, no_three_ds

  3. billingEmail: [Optional String] customer's billing email

  4. shippingEmail : [Optional String] customer's shipping email

  5. statementDescriptorName: [Optional String] This is used for non Indian payments. For non-card charges, you can use this value as the complete description that appears on your customers’ statements. Must contain at least one letter, maximum 22 characters

  6. statementDescriptorSuffix: [Optional String] This is used for non Indian payments. Provides information about a card payment that customers see on their statements. Concatenated with the prefix (shortened descriptor) or statement descriptor that’s set on the account to form the complete statement descriptor. Maximum 22 characters for the concatenated descriptor.

  7. description: [Optional String] A description for the payment

  8. returnUrl: [Optional String] The URL to which you want the user to be redirected after the completion of the payment operation (Mandatory Field for Payment Links),

  9. manualRetryAllowed: [Optional Boolean] This is used for non Indian payments. If true the payment can be retried with same or different payment method which means the confirm call can be made again.

  10. allowedPaymentMethods: [Optional JSON] This helps you to select which payment options you want to show on your payment page.

Example Response for Initializing a Non-Indian Transaction

{
  "data": {
    "transactionInitialize": {
      "transactionEvent": {
        "pspReference": "pay_ezKjsngnqMCYbx0ke8PK",
        "amount": {
          "amount": 18,
          "currency": "USD"
        },
        "type": "CHARGE_ACTION_REQUIRED"
      },
      "data": {
        "paymentLinks": {
          "paymentLinkId": "payment_link_id",
          "web": "payment_link"
        },
        "sdkPayload": {
          "payload": {
            "clientSecret": "pay_exxxxxxxxxxx",
            "publishableKey": "pk_snd_xxxxxxx"
          }
        },
        "errors": []
      },
      "errors": [],
      "transaction": {
        "id": "VHJhbnNhY3Rxxxxxxxxxxxx,
        "token": "a795d869xxxxxxxx"
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 0,
      "maximumAvailable": 50000
    }
  }
}

Handle Response for Initializing Non-Indian Payment Transactions

  • You can use the paymentLinks.web to redirect the customer to hyperswitch payment page. Additionally, this URL can also be embedded within an iframe

Example Response for Initializing a Indian Transaction

{
  "data": {
    "transactionInitialize": {
      "transactionEvent": {
        "pspReference": "8b2e87ac-xxxxx-xxxx-xxxx",
        "amount": {
          "amount": 200,
          "currency": "INR"
        },
        "type": "CHARGE_ACTION_REQUIRED"
      },
      "data": {
        "paymentLinks": {
          "web": "https://sandbox.assets.juspay.in/payment-page/order/ordeh_9b82xxxxxxxxxxx",
          "expiry": "2024-08-15T11:33:59Z"
        },
        "sdkPayload": {
          "requestId": "f2724dd953394f04bxxxxxxxxxxxxx",
          "service": "in.juspay.hyperpay",
          "payload": {
            "clientId": "xxxxxx",
            "amount": "200.0",
            "merchantId": "merchant_success",
            "clientAuthToken": "tkn_5f2c7edebf7143a7bfxxxxxxxxxxxxx",
            "clientAuthTokenExpiry": "2024-08-12T11:48:59Z",
            "environment": "sandbox",
            "lastName": "Doe",
            "action": "paymentPage",
            "returnUrl": "https://www.google.com/",
            "currency": "INR",
            "firstName": "Rayan",
            "customerEmail": "customer@example.com",
            "orderId": "8b2e87ac-a238-4d79-bedb-xxxxxxxxxxxxx"
          },
          "expiry": "2024-08-15T11:33:59Z"
        },
        "errors": []
      },
      "errors": [],
      "transaction": {
        "id": "VHJhbnNhY3Rpb25JdGVtOjUzYzdjNTFjLTY5NWYtxxxxxxxxxxxxx==",
        "token": "53c7c51c-695f-464d-b78d-xxxxxxxxxxxxx"
      }
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 0,
      "maximumAvailable": 50000
    }
  }
}

Hanlde Response for Initializing Indian Payment Transactions

  • You can use the paymentLinks.web to redirect the customer to Hypercheckout payment page. Additionally, this URL can also be embedded within an iframe

Retrieve the transaction

The payment status will be automatically updated by the App in the backend upon Juspay receiving a webhook from the connector. Alternatively, you can call Saleor's Transaction Process mutation to retrieve the status of an initiated payment.

mutation JuspayTransactionProcess {
  transactionProcess(
    id: "saleor_transaction_id"
  ) {
    data
    errors {
      code
      field
      message
    }
    transaction {
      actions
    }
    transactionEvent {
      type
      pspReference
    }
  }
}

The Juspay Saleor App also supports additional flows such as payment capture, cancellation, and refunds. These actions can be triggered directly through the Saleor dashboard.

Note: If you trigger refunds through the Hyperswitch/Hypercheckout dashboard instead of the Saleor dashboard, you will need to manually update the refund status in the Saleor dashboard.

To access the Juspay Saleor Payment App, . You will be directed to a form where you can enter your Saleor API URL.

Enter your Hyperswitch API key. For instructions on how to create an API Key with Hyperswitch, refer to .

Enter your Hyperswitch Profile ID. For more information on Profile ID, please refer to

Once you save the configuration, You will be provided with a webhook URL, please update it in your

Note: To customize, your payment page. Please contact

Enter your Hypercheckout API key. You can get API key in Hypercheckout dashboard under Payments > Setting > Security. For more instructions on how to create an API Key, refer to .

Once you save the configuration, you will be provided with a webhook URL, Please update it in your

gatewayReferenceId: [Optional String] This is used for Indian payments. The id refers to the payment gateway reference id which you configured in hypercheckout dashboard. It becomes mandatory when multiple instances of the same gateway are configured. Sending this id will route the transaction via selected gateway.Refer for details.

Indian Payments: This expects a json object to enable and disable payment options. For more info refer .

Non-Indian Payments: This expects a json array of enums to enable and disable payment options. For more info refer allowed_payment_method_types in .

You can use clientSecret and publishableKey to invoke the OR

You can use sdkPayload to invoke the OR

Sign up
Sign up
refer
Saleor
click here
this guide
this guide
hyperswitch dashboard
hyperswitch support
this guide
Hypercheckout dashboard
here
here
payments-create
Hyperswitch SDK
Hypercheckout SDK