Sample Codes

If you want to list all the payment methods offered by RHB bank, allow card payments for Am bank only and hide wallet payment method from the Checkout, you can do so as follows: (Change in code accordingly)

<html>
<button id="rzp-button1" class="btn btn-outline-dark btn-lg"><i class="fas fa-money-bill"></i> Own Checkout</button>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
  var options = {
    "key": "[YOUR_KEY_ID]", // Enter the Key ID generated from the Dashboard
    "amount": "1000",
    "currency": "MYR",
    "description": "Acme Corp",
    "image": "example.com/image/rzp.jpg",
    "prefill":
    {
      "email": "gaurav.kumar@example.com",
      "contact": +919900000000,
    },
    config: {
      display: {
        blocks: {
          hsbc: { //name for HSBC block
            name: "Pay using HSBC Bank",
            instruments: [
              {
                method: "card",
                issuers: ["HSBC"]
              },
              {
                method: "fpx",
                banks: ["HSBC"]
              },
            ]
          },
          other: { //  name for other block
            name: "Other Payment modes",
            instruments: [
              {
                method: "card",
                issuers: ["PHBM"]
              },
              {
                method: 'fpx',
              }
            ]
          }
        },
        hide: [
          {
          method: "wallet"
          }
        ],
        sequence: ["block.hsbc", "block.other"],
        preferences: {
          show_default_blocks: false // Should Checkout show its default blocks?
        }
      }
    },
    "handler": function (response) {
      alert(response.razorpay_payment_id);
    },
    "modal": {
      "ondismiss": function () {
        if (confirm("Are you sure, you want to close the form?")) {
          txt = "You pressed OK!";
          console.log("Checkout form closed by the user");
        } else {
          txt = "You pressed Cancel!";
          console.log("Complete the Payment")
        }
      }
    }
  };
  var rzp1 = new Razorpay(options);
  document.getElementById('rzp-button1').onclick = function (e) {
    rzp1.open();
    e.preventDefault();
  }
</script>
</html>

Watch Out!

You can use the payment methods enabled for your account on the Curlec Dashboard. Also, you can raise a request with our

Support team

for additional payment methods or providers.

Show Grab Pay Separately on Checkout

Use the code given below to show Grab Pay separately on Checkout:

config: {
    display: {
      blocks: {
        banks: {
          name: 'Methods With Offers',
          instruments: [
            {
              method: 'wallet',
              wallets: ['grabpay']
            }]
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: true,
      },
    },
  },
};

Show Most Used Methods

Use the code given below to show the most used methods:

config: {
    display: {
      blocks: {
        banks: {
          name: 'Most Used Methods',
          instruments: [
            {
              method: 'wallet',
              wallets: ['grabpay']
            },
            {
                method: 'card'
            },
            ],
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: true,
      },
    },
  },
};

Show Instruments of a Certain Bank Only

Use the code given below to show the instruments of a certain bank only on Checkout:

config: {
    display: {
      blocks: {
        banks: {
          name: 'Pay Using HSBC bank',
          instruments: [
            {
              method: 'fpx',
              banks: ['HSBC'],
            },
            {
              method: 'card',
              issuers: ['HSBC'],
            }
          ],
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: false,
      },
    },
  },
};

Watch Out!

This configuration is not applicable for

Recurring Payments

Highlight Instruments of a Certain Bank

Use the code given below to highlight the instruments of a certain bank only on Checkout:

config: {
    display: {
      blocks: {
        banks: {
          name: 'Pay Using HSBC Bank',
          instruments: [
            {
              method: 'fpx',
              banks: ['HSBC'],
            },
            {
              method: 'card',
              issuers: ['HSBC'],
            }
          ],
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: true,
      },
    },
  },
};

Reorder Payment Methods

Use the code given below to reorder payment methods on Checkout:

config: {
    display: {
      blocks: {
        banks: {
          name: 'All Payment Options',
          instruments: [
            {
              method: 'card'
            },
            {
                method: 'wallet'
            },
            {
                method: 'fpx'
            }
          ],
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: false,
      },
    },
  },
};

Remove a Method from Checkout

Use the code given below to remove a method from Checkout:

config: {
    display: {
      hide: [
        {
          method: 'wallet'
        }
      ],
      preferences: {
        show_default_blocks: true,
      },
    },
  },
};

Show Only a Certain Payment Method on Checkout

Use the code given below to show only a certain payment method on Checkout:

Card

config: {
    display: {
      blocks: {
        banks: {
          name: 'Pay via Card',
          instruments: [
            {
              method: 'card'
            }
          ],
        },
      },
      sequence: ['block.banks'],
      preferences: {
        show_default_blocks: false,
      },
    },
  },
};