Low-Code Checkout Button
This integrate a checkout button to your e-commerce website with minimal code.
Setup & Configuration
Go to RM Merchant Portal, and login with your merchant account.
Go to Developer > Applications > Choose Your Application > Low Code Checkout
Low Code Checkout Host
To enhance the security of your e-commerce website, it is essential to allow us to identify requests originating from your site rather than from others. This will enable us to provide improved security measures during the order process.
For instance, if your website URL is https://somedomain.com/webpage/order, you should configure it so that only somedomain.com is authorized to proceed with the checkout payment.
- Redirect URL
The URL to redirect when the payment for the order is completed by the user (either successful or failed) and example of redirect url parameters so you can handle page rendering accordingly with status, id and reason.
- Notify URL ( Optional )
Client can also specify the URL to which users should be redirected after completing their payment for the order, regardless of whether the transaction was successful or failed. Additionally, refer to the example of redirect URL parameters to ensure you can manage page rendering based on the status, ID, and reason provided.
Example of notify url parameters
Checkout Button
- Add the stylsheet and script tag to your head
<head>
<!--- ... -->
<link rel="stylesheet" href="https://rm-component.oss-ap-southeast-3.aliyuncs.com/checkout-button/index.css"/>
<script type="module" src="https://rm-component.oss-ap-southeast-3.aliyuncs.com/checkout-button/index.js"></script>
</head>
Alternatively, if you are developing for sandbox environment, please amend the link to below
<head>
<!--- ... -->
<link rel="stylesheet" href="https://rm-component-sandbox.oss-ap-southeast-3.aliyuncs.com/checkout-button/index.css"/>
<script type="module" src="https://rm-component-sandbox.oss-ap-southeast-3.aliyuncs.com/checkout-button/index.js"></script>
</head>
- Add the button with the checkout details to the body
<body>
<!--- ... -->
<rm-pay-button
clientId="1698131134927762904"
orderId="1234567890"
storeId="10946114768247530"
customerId="123123123"
currency="MYR"
amount="1390"
title="Product X"
detail="Detail of the order"
>
Checkout
</rm-pay-button>
</body>
Button Parameters
Client ID of your application
Example: 1698131134927762904
Order ID, unique for each order
Example: 1234567890
Store ID for the order
Example: 10946114768247530
Currency
Example: "MYR"
Amount in cents
Example: 1390 => RM13.90
Order title
Example: "Product X"
Order detail
Example: "Detail of the order"
Order additional data
Example: Any data relevant to the order
Customer ID, required for tokenization
Example: 1234567890
Customer name
Example: "John"
Customer email
Example: "john@example.com"
Button variant types
Custom class for custom styling
| Variant | Button |
|---|---|
| default | |
| destructive | |
| outline | |
| secondary | |
| ghost | |
| link |