` at the exact location in your page where the payment form should appear:
```html theme={null}
```
* `id="PayGlocal_payments"` is **mandatory** and must be exactly this value
* `data-width` is optional — accepted range is `350px` to `450px`, default is `400px`
Skip this step for `modal` and `drawer` modes.
***
### Step 4 — Launch the Payment Form
When the customer clicks your payment button, call your backend to get the `redirectUrl`, then pass it to CodeDrop:
```javascript theme={null}
window.PGPay.launchPayment({
redirectUrl: '
'
});
```
A complete example using `axios`:
```javascript theme={null}
function displayPaymentPage() {
axios
.get("")
.then((res) => {
window.PGPay.launchPayment({
redirectUrl: res.data.redirectUrl
});
});
}
```
Replace `` with your own backend endpoint that returns the `redirectUrl`.
***
### Step 5 — Handle the Payment Callback
After the payment completes, is cancelled, or is abandoned, CodeDrop invokes your callback function with the payment result. Pass the callback as the second argument to `launchPayment()`:
```javascript theme={null}
function paymentCallback(data) {
// handle payment status based on data parameter
}
window.PGPay.launchPayment(
{ redirectUrl: res.data.redirectUrl },
paymentCallback
);
```
The `data` object passed to your callback contains:
```javascript theme={null}
const data = {
gid: "gl_o-62693b07-1059-45f3-b353-d65cbfa2bee1", // identify transaction in GCC
status: "SENT_FOR_CAPTURE", // current payment status
merchantTxnId: "23AEE8CB6B62EE2AF07", // your transaction reference
"x-gl-token": "eyJpc3N1ZWQtYnkiOiJHbG9..." // use to fetch full status from PayGlocal
};
```
***
### Step 6 — Custom Pay Now Action *(Inline mode only)*
If you have hidden the default PayNow button inside the inline payment form, expose your own button and wire it to:
```javascript theme={null}
function payNowClicked(event) {
// perform custom action
window.PGPay.handlePayNow(event);
}
```
Add this to the `onclick` of your own PayNow button. The `event` parameter is the click event and is mandatory.
***
### Step 7 — Pass Updated Billing & Shipping Details *(Inline mode only)*
If your billing and shipping forms are on the same page as the inline payment widget, the customer might update their address while interacting with the payment form. To keep the payment form in sync, call:
```javascript theme={null}
function updateData() {
const merchantPayload = {};
window.PGPay.modifyPayment(merchantPayload);
}
```
The `merchantPayload` format:
```javascript theme={null}
const merchantPayload = {
paymentData: {
billingData: {
firstName: "John",
lastName: "Doe",
emailId: "something@gmail.com",
addressStreet1: "Block-2B",
addressStreet2: "Hamilton street",
addressCity: "Bangalore",
addressState: "Karnataka",
addressCountry: "IN",
addressPostalCode: "123456"
}
},
riskData: {
shippingData: {
firstName: "John",
lastName: "Doe",
emailId: "something@gmail.com",
addressStreet1: "street 1",
addressStreet2: "street 2",
addressCity: "Bangalore",
addressState: "Karnataka",
addressCountry: "IN",
addressPostalCode: "123456"
}
}
};
```
You can send `billingData`, `shippingData`, or both. Any field you omit is left unchanged. Data entered directly by the customer in the payment form always takes highest priority.
***
## For the Full Technical Reference with Code Examples
Complete integration reference with annotated code examples for every step.