payfast javascript integration

1const params = new URLSearchParams({
2  merchant_id: "....",
3  merchant_key: "....",
4  return_url: "https://yourApplication/paymentscreen",
5  cancel_url: "https://yourApplication/paymentscreen",
6  notify_url: "https://yourApplication/paymentscreen",
7  name_first: name,
8  email_address: email,
9  m_payment_id: unique_id_for_user,
10  amount: amount,
11  item_name: payment_name,
12  item_description: description_if_any,
13  custom_int1: custome_integer_value_if_any,
14  custom_str1: custome_string_value_if_any,
15  custom_str2: custome_string_value_if_any,
16  passphrase: passphrase_set_in_payfast_account.
17});
18
19// Create an MD5 signature of it.
20const MD5Signature = md5(params.toString())

1<form action="https://www.payfast.co.za/eng/process" method="POST">
2          <input type="hidden" name="merchant_id" value="...." />
3          <input type="hidden" name="merchant_key" value="....." />
4          <input type="hidden" name="return_url" value="https://yourApplication/paymentscreen" />
5          <input type="hidden" name="cancel_url" value="https://yourApplication/paymentscreen" />
6          <input type="hidden" name="notify_url" value="https://yourApplication/paymentscreen" />
7          <input type="hidden" name="name_first" value={name} />
8          <input type="hidden" name="email_address" value={email} />
9          <input type="hidden" name="m_payment_id" value={unique_id_for_user} />
10          <input type="hidden" name="amount" value={amount} />
11          <input type="hidden" name="item_name" value={payment_name} />
12          <input type="hidden" name="item_description" value={description_if_any} />
13          <input type="hidden" name="custom_int1" value={custome_integer_value_if_any} />
14          <input type="hidden" name="custom_str1" value={custome_string_value_if_any} />
15          <input type="hidden" name="custom_str2" value={custome_string_value_if_any} />
16          <input type="hidden" name="passphrase" value="passphrase" />
17          <input type="hidden" name="signature" value={MD5Signature} />
18          <div className="row" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
19            <div className="col-lg-6">
20              <img alt="payfast" src="../public/upload/payfastpaynow.png" vspace="3" width="100%" height="100%" />
21            </div>
22            <div className="col-lg-6">
23                <input style={{marginRight: 20, float: 'right'}} name="disable" type="submit" disabled={isEnablePayment} width="100%" height="100%" alt="Submit" align="bottom" value="Purchase" />
24            </div>
25          </div>
26        </form>

1<input type="hidden" name="subscription_type" value="2">