The SDK enables a modular payment process that integrates directly into your site.
It avoids the use of redirects or iframes, improving user experience and maintaining integration flexibility.

📘
NOTE:

The SDK must be used together with the server-side createPaymentProcess method,
configured with a pageCode that is set to Wallet SDK mode.

The wallet session becomes valid as soon as you call the backend createPaymentProcess API.
To avoid timeouts during checkout, make this call only immediately before rendering the wallet.

All scripts must be embedded on the frontend of the checkout page.

Integration steps :

Begin by loading the SDK into your webpage as shown below:

<script>
   (function () {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
     s.onload = configureGrowSdk; //replace with your callback function
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
   })();
 </script>

The scripts 'onload' event should call a function that initializes and configures the wallet:

function configureGrowSdk() {
	let config = {
		environment: "DEV",
		version: 1,
		events: {
			onSuccess: (response) => {},
			onFailure: (response) => {},
			onError: (response) => {},
			onTimeout: (response) => {},
			onWalletChange: (state) => {},
			onPaymentStart: (response) => {},
			onPaymentCancel: (response) => {},
       }
   };
	growPayment.init(config);
}

Name

Type

Required

Options

Description

Response Examples

environment

String

required

“PRODUCTION”, “DEV”

version

String

required

Current stable version is 1

Target the preferred base version

events

Object

optional

onSuccess: Gets triggered on payment success, receives a response with information about the payment (confirmation number, payment method, and more).

onFailure: Gets triggered on payment failure, receives a message describing what caused the failure.

onError: Gets triggered on payment error, receives a message describing what caused the error.

onWalletChange: Gets triggered on wallet state change, receives the current wallet state - open/closed.
Note: useful for changing your loaders state.

onPaymentStart: Gets triggered when a payment process starts, receives a response with the triggered paymentType and paymentName.

onPaymentCancel: Gets triggered when a payment process is cancelled, receives a response with the triggered paymentType and paymentName.

Attach callback functions to handle each event type

onSuccess:
{
"status": 1,
"data": {
"payment_sum": "1",
"full_name": "example example",
"payment_method": "credit",
"number_of_payments": 1,
"confirmation_number": "12345678"
}
}

onFailure:
{
"status": 0,
"message": "תשלום נכשל"
}

onError:
{
"status": 0,
"message": "לא ניתן לבצע עסקת תשלומים על כרטיס מסוג זה"
}

{
"status": 0,
"message": "התשלום סורב"
}

onWalletChange:
open
Close

onPaymentStart:
{
"paymentType": 15,
"paymentName": "bank_transfer"
}

onPaymentCancel:
{
"paymentType": 15,
"paymentName": "bank_transfer"
}

onSuccess events:

payment method	Response Examples
bit	{ "status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "bit", "number_of_payments": 1, "confirmation_number": "12345678" }
Google Pay	{ "status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "google", "number_of_payments": 1, "confirmation_number": "12345678" }
Apple Pay	"status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "apple", "number_of_payments": 1, "confirmation_number": "12345678" }
Credit Card	{ "status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "credit", "number_of_payments": 1, "confirmation_number": "12345678" }
Bank Transfer	{ "status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "bank_transfer", "number_of_payments": 1, "confirmation_number": "12345678" }
Pay Box	{ "status": 1, "data": { "payment_sum": "1", "full_name": "example example", "payment_method": "paybox", "number_of_payments": 1, "confirmation_number": "12345678" }

Note: The init method can also be used to update the entire SDK configuration. However, this will reset all previously registered events and replace them with the new ones provided.

Once the user clicks the checkout button (or any other payment trigger), call createPaymentProcess on your server.
You’ll receive an authCode, which you can pass into renderPaymentOptions to display the wallet.

Below is a sample response returned by createPaymentProcess when called with the wallet-specific pageCode.
As shown, the response contains an authCode that is required to open the wallet.

{
  "status": 1,
  "err": "",
  "data": {
    "processId": 413133,
    "processToken": "92ab69240c00aa073eb818dc646e2c32",
    "authCode": "beb1064aa495042a69c9c5e2dc384180%NDEzMTM0"
  }
}

Here’s how you can use the authCode from createPaymentProcess to render the wallet:

// response - the response you received from 'createPaymentProcess'
if (response.status && growPayment) {
   growPayment.renderPaymentOptions(response.authCode);
}

📘
NOTE:

When renderPaymentOptions is invoked, the SDK initiates a request to the Grow backend before rendering the wallet UI.
To properly handle loading states, listen for the onWalletChange event, which indicates that the wallet is about to open.

After opening the wallet, track the events configured in configureGrowSdk and monitor the server update to keep the payment flow in sync.