Low-Code Checkout Button

note

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

Your e-commerce website Host, it's a must have to let us identify come from your ecommerce website instead other and provide better security always check while there's an order.

Example: https://somedomain.com/webpage/order, you will need to set somedomain.com only will allow to proceed 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 )

The URL where we can notify you regarding the order status and example of notify url parameters. This is optional for low code checkout use case, unless you have your own server and have extra business logic is needed after payment is completed.

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>

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

Parameter	Type	Required	Description	Example
`clientId`	Uint	Yes	Client ID of your application	1698131134927762904
`orderId`	Uint	No	Order ID, unique for each order	1234567890
`storeId`	Uint	Yes	Store ID for the order	10946114768247530
`currency`	String	Yes	Currency	"MYR"
`amount`	Uint	Yes	Amount in cents	1390 => RM13.90
`title`	String	Yes	Order title	"Product X"
`detail`	String	No	Order detail	"Detail of the order"
`additionalData`	String	No	Order additional data	Any data relevant to the order
`customerId`	Uint	No	Customer ID, required for tokenization	1234567890
`customerName`	String	No	Customer name	"John"
`customerEmail`	String	No	Customer email	"john@example.com"

Styling Paramters

Parameter	Type	Description
`variant`	String	Button variant types
`class`	String	Custom class for custom styling

Example (Variants)

Variant	Button
default	Checkout
destructive	Checkout
outline	Checkout
secondary	Checkout
ghost	Checkout
link	Checkout

Setup & Configuration​

Checkout Button​

Setup & Configuration

Checkout Button