Secure Payment Links

Learn how to configure and use secure payment links embedded within iframes of trusted domains for safe payment method storage.

Juspay Hyperswitch secure payment links are those embedded within the iframe of a trusted domain. These links cannot be directly opened in a browser tab and are designed to provide a safe environment for users to view and save their payment methods.

Using Secure Payment Links

To use secure payment links, you need to configure a list of trusted domains in the business profile under the allowed_domains field. Once set up, any payment link you create will include two URLs:

An open link for direct browser access.
A secure link intended for embedding in an iframe.

The domain of the parent webpage embedding the secure link must match one of the domains listed in allowed_domains.

Steps for using secure payment links

1. Configure allowed_domains in business profile

Set up a trusted domain, such as localhost:5500, by updating the business profile configuration.

curl --location '{{BASE_URL}}/account/{{MERCHANT_ID}}/business_profile/{{PROFILE_ID}}' \
    --header 'Content-Type: application/json' \
    --header 'api-key: {{ADMIN_API_KEY}}' \
    '{
        "payment_link_config": {
            "allowed_domains": [
                "localhost:5500"
            ]
        }
    }'

2. Create payment links

Use the following API request to create payment links, which will return both the open and secure links.

curl --location '{{BASE_URL}}/payments' \
    --header 'Content-Type: application/json' \
    --header 'api-key: {{API_KEY}}' \
    '{
        "amount": 100,
        "currency": "USD",
        "payment_link": true,
        "profile_id": "pro_YXlbYtgiANENrZgxdL8Q"
    }'

The response includes the following fields:

{
  ...

  "payment_link": {
    "link": "http://localhost:8080/payment_link/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en",
    "secure_link": "http://localhost:8080/payment_link/s/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en",
    "payment_link_id": "plink_lF9deXMRrdIEs1drMVhF"
  },

  ...
}

3. Embedding secure payment links in an iframe

To embed a secure payment link, include it in an iframe within your HTML:

<html>
  <head>
    <style>
      html,
      body {
        margin: 0;
        height: 100vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: bisque;
      }
      iframe {
        border-radius: 4px;
        height: 80vh;
        width: 80vw;
      }
    </style>
  </head>
  <body>
    <iframe
      src="http://localhost:8080/payment_link/s/merchant_1734676749/pay_Dw4CBoUWGGkvSXcfz1Mu?locale=en"
      frameborder="0"
    ></iframe>
  </body>
</html>

Next Steps

Setup Custom Domain

Last updated 2 months ago

Was this helpful?