<script type="text/javascript" src="BLUESNAPDOMAINPATH/web-sdk/5/bluesnap.js"></script>

SdkRequest = {
    token: 'TOKEN_STRING', // The token you created in Step 1.
    googlePay: true, // OPTIONAL default is true.
    applePay: false, // OPTIONAL default is true.
    paymentData: {
        currencyCode: 'USD', // The three-letter ISO 4217 currency code for the payment.
         countryCode: 'US', // The merchant’s two-letter ISO 3166 country code.
        total: {
            label: 'My Total',
            amount: '123.45',
        }                                },
        // Use black buttons on white or light backgrounds to provide contrast.
        // Use white buttons on dark or colorful backgrounds.
        theme: 'white', // OPTIONAL black or white default is 'black'
        emailRequired: true, // OPTIONAL default false
        phoneRequired: true, // OPTIONAL default false
        fullBilling: true, // OPTIONAL default false
        shippingRequired: true, // OPTIONAL default false
        shippingOptions: [ // OPTIONAL, MANDATORY if shippingRequired: true
          { // first item is the default selection
            identifier: "FREE",
            detail: "A free of charge",
            label: "my label",
            amount: "12.23"
          },
          {
            identifier: "EXPRESS",
            detail: "A costly one",
            label: "my second label",
            amount: "45.1"
          }
        ]
    },
    onEvent: { // this event handler will handle all the events arriving from the Payment Request Button
        paymentAuthorized: function (success, error) {
            // here you will create the transaction Server2Server call Auth / Capture
            // transaction result will decide which function to activate
            // according to the transaction result status we will activate either success() or error()
            if (transactionResultStatus === 'success') {
                success();
            } else {
                error('here you will write a msg to the shopper')
            }
            // Note: IT IS MANDATORY TO CALL ONE OF THE FUNCTIONS.                    
        },
        shippingOptionChange: function (shippingOptionsData, oldData, update) {
            // shippingOptionsData = {identifier}  
            // oldData = {currencyCode, countryCode, total, shippingOptions}                               
            // relevant only if shipping option is true
            // IT IS MANDATORY TO CALL update() IN ONE OF THE VARIATION BELOW           
            update({ total, shippingOptions, error }); // or update({}); for no change
        },
        shippingAddressChange: function (shippingAddressData, oldData, update) {
            // shippingAddressData = {administrativeArea, countryCode, locality, postalCode}   
            // oldData = {currencyCode, countryCode, total, shippingOptions}                        
            // relevant only if shippingRequired is true
            // IT IS MANDATORY TO CALL update() IN ONE OF THE VARIATION BELOW           
            update({ total, shippingOptions, error }); // or update({}); for no change
        },
        error: function (event) {
            // handle error event
            /* for example when code = 40 (Can't use requested Wallet/s, no payment option is available)
            event = {
                status: "No payment method available",
                code: "40",
                info: {
                    errors: [                                 
                            "Can't use requested Wallet/s, no payment option is available."                                  
                    ]                        
                }                    
            */
        },
        warning: function (event) {
            // handle warning event

        },

    },

}

// taken from the sdkRequest event handler
    
    paymentAuthorized: function (success, error /*, threeDSecure /*) {
                 // here you will create the transaction Server2Server call Auth/Capture
                 // transaction result will decide which function to activate
                 // according to the transaction result status we will activate either success() or error()
                 if (transactionResultStatus === 'success') {
                     success();
                 } else {
                     error('here you will write a msg to the shopper')
                 }               
                 // Please Note: IT IS MANDATORY TO CALL ONE OF THE FUNCTIONS.                     
    },

let paymentData = {
  currencyCode: 'USD',
  countryCode: 'US',
  total: {
    label: 'My final total',
    amount: '123.45',
  }
};

let total = {
  label: 'My final total',
  amount: '123.45'
};

let shippingOptions = [
  {
    identifier: 'shipping-001',
    detail: 'A free of charge shipping',
    label: '10 business days',
    amount: '0.00',
  },
  {
    identifier: 'shipping-002',
    detail: 'An express shipping',
    label: '3 business days',
    amount: '10.00',
  },
];

.
.
.
if (transactionResultStatus === 'success') {
  success();
} else {
  error('here you will write a msg to the shopper')
}
.
.
.               
Note: IT IS MANDATORY TO CALL ONE OF THE FUNCTIONS.

event = {
  status: 'No payment method available',
  code: '40',
  info: {
    errors: [
      "Can't use requested Wallet/s, no payment option is available."
    ]
  }
}

event = {
  status: 'Invalid Data',
  code: '15',
  info: {
    warnings: [
      'shippingRequired was set to true but shippingOptions was not provided'
    ]
  }
}

sdkRequest: {
  //...
  onEvent: {
    shippingAddressChange: function (
      shippingAddressData,
      oldData,
      update
    ) {
      if (shippingAddressData.countryCode !== 'US') {
        // Shipping address is invalid since merchant doesn't ship outside the US
        // Update payment UI with an error
        // IT IS MANDATORY TO CALL THE update() BELOW
        update({
          error: {
            message: 'Can only ship to the US',
            reason: 'SHIPPING_ADDRESS_INVALID '
          }
        });
      } else {
        // Shipping address is valid
        // Fetch shipping options...
        //... return shipping options
        // For example:
        let shippingOptions = [
          {
            // first item is the default selection
            identifier: 'FREE',
            detail: 'A free of charge',
            label: 'my label',
            amount: '12.23'
          },
          {
            identifier: 'EXPRESS',
            detail: 'A costly one',
            label: 'my second label',
            amount: '45.1'
          }
        ];

        // Update payment UI
        update({
          total: {
            label: 'My final total',
            amount: '123.45'
          },
          shippingOptions: shippingOptions
        });
      }
    }
  }
  //...
}

sdkRequest: {
  //...
  onEvent: {
    shippingOptionChange: function (
      shippingOptionsData,
      oldData,
      update
    ) {
      // Get the ID of the selected shipping option
      let selectedId = shippingOptionsData.identifier;

      // extract selected option
      let selectedShippingOption;
      oldData.shippingOptions.forEach(function (option) {
        if (option.identifier === selectedId) {
          selectedShippingOption = option;
        }
      });

      // Update display items and total
      let subtotal = '100.00'; // total without shipping
      let shippingPrice = selectedShippingOption.amount;
      let totalAmount = (
        Number(subtotal) + Number(shippingPrice)
      ).toFixed(2);
      let total = {
        label: 'My final total',
        amount: totalAmount.toString()
      };

      // Update payment UI

      // IT IS MANDATORY TO CALL THE update() IN ONE OF THE VARIATION BELOW
      update({
        total: total
      });
    }
  }
  //...
}