Amwal Checkout Button

To set up your website to use Amwal checkout button, follow the following steps:

Prerequisite

Sign up with amwal merchant for your country. for KSA, visit https://merchant.sa.amwal.tech to obtain a sandbox key or production key

Installation.

npm i amwal-checkout-angular

Usage

In your component.module.ts file, import amwal module:

// component.module.ts
import { AmwalCheckoutButtonModule } from "amwal-checkout-angular/dist/amwal-checkout-button";
@NgModule({
  declarations: [
    ....
  ],
  imports: [
    ...
    AmwalCheckoutButtonModule,
    ...
  ],
  exports: [
    ...
  ],
  providers: [
    ....
  ]
})
export class ComponentModule { }

In your component.component.html:

<amwal-checkout-button 
  merchantId="your-merchant-id" 
  darkMode="off"
  amount="1" 
  countryCode="SA" 
  [locale]="en"
  addressRequired='true' 
  shippingMethods='[{"id": "free-shipping","label": "3 days free shipping","price": 0},{"id": "express-shipping","label": "1 day delivery","price": 10}]' 
  addressHandshake='true'
  (amwalCheckoutSuccess)="paymentSuccessful($event)"
  (amwalAddressUpdate)="addressHandler($event)">
</amwal-checkout-button>

Handling shipping value change to complete address handshake:

  paymentSuccessful(event: any) {
    console.log('Payment successful:', event);
    // Handle payment success (e.g., update your order status)
  }

  addressHandler(event: any) {
    console.log('Address updated:', event);
    // Handle address update
    setTimeout(() => window.dispatchEvent(new Event('amwalAddressAck')), 1000);
  }

Properties

Property	Attribute	Description	Type	Default
`addressHandshake`	`address-handshake`	addressHandshake specifies if address event and ack is activated ("true" or "false")	`boolean`	`false`
`addressRequired`	`address-required`	addressRequired specifies if shipping address is required or not ("true" or "false")	`boolean`	`true`
`allowedAddressCities`	--	allowedAddressCities specifies an array of allowed states for the address example {"SA":{"XX1":["Riady","Afif"],"XX2":["Jeddah","Makkah"]},"US":{"US1":["San Jose","San Francisco"],"US2":["New york"]}}	`{ [index: string]: CitySpecs; }`	`undefined`
`allowedAddressCountries`	--	allowedAddressCountries specifies an array of allowed countries for the address	`string[]`	`undefined`
`allowedAddressStates`	--	allowedAddressStates specifies an array of allowed states for the address example {"SA":{"XX1":"State 1","XX2":"State 2"},"US":{"US1":"State 1","US2":"State 2"}}	`{ [index: string]: StateSpecs; }`	`undefined`
`amount`	`amount`	The amount of money to charge the customer	`number`	`undefined`
`countryCode`	`country-code`	The country code of the merchant (e.g. SA)	`string`	`"SA"`
`darkMode`	`dark-mode`	Dark Mode: - on: turns on dark mode - off: turns on light mode - auto: use customer preference for dark mode	`"auto" \| "off" \| "on"`	`"off"`
`debug`	`debug`	debug flag for verbose printing of debug messages	`boolean`	`false`
`disabled`	`disabled`	disables the checkout button	`boolean`	`false`
`discount`	`discount`	discount specifies any discount to be applied	`number`	`0`
`discountDescription`	`discount-description`	discountDescription provides description for the discount	`string`	`undefined`
`fees`	`fees`	fees specifies any fees to be applied	`number`	`0`
`feesDescription`	`fees-description`	feesDescription provides description for the fees	`string`	`undefined`
`emailRequired`	`email-required`	emailRequired specifies if email address is required or not ("true" or "false"). Can only be true if addressRequired is true.	`boolean`	`false`
`enablePreCheckoutTrigger`	`enable-pre-checkout-trigger`	enable triggering a pre checkout click event to do initial tasks such as adding items to carts	`boolean`	`false`
`enablePrePayTrigger`	`enable-pre-pay-trigger`	enable triggering a pre pay event to do final task such as order creation	`boolean`	`false`
`initialAddress`	--	initialAddress specifies a default address, Country field is country code (two letter ISO country code)	`IAddress`	`undefined`
`initialEmail`	`initial-email`	initialEmail specifies a default email	`string`	`undefined`
`initialPhoneNumber`	`initial-phone-number`	initialPhone specifies a default phone number	`string`	`undefined`
`initialFirstName`	`initial-first-name`	initialFirstName specifies a default first name	`string`	`undefined`
`initial-first-name`	`initial-last-name`	initialLastName specifies a default last name	`string`	`undefined`
`label`	`label`	the label of the button. Either checkout for final checkout or quicky-buy for per product buy	`"checkout" \| "quick-buy"`	`"checkout"`
`locale`	`locale`	the language of the plugin. supported languages are Arabic ("ar") and English ("en")	`string`	`"en"`
`merchantId`	`merchant-id`	merchantId is the key to use obtained from https://merchant.sa.amwal.tech	`string`	`undefined`
`refId`	`ref-id`	refId a unique identifier to be included in the payment transaction	`string`	`undefined`
`uniqueRef`	`unique-ref`	uniqueRef a boolean to enforce the uniqueness of refId	`boolean`	`false`
`shippingMethods`	--	shippingMethods an array of shipping methods	`IShippingMethod[]`	`[]`
`showContinueShoppingButton`	`show-continue-shopping-button`	debug flag for verbose printing of debug messages	`boolean`	`false`
`taxes`	`taxes`	taxes specifies any additional taxes	`number`	`0`
`testEnvironment`	`test-environment`	this is an internal testing feature. don't specify	`string`	`undefined`
`installmentOptionsUrl`	`installment-options-url`	The installment options url is URL for the checkout page in the merchant website	`string`	`undefined`
`postcodeOptionalCountries`	`installment-options-url`	enable postal code required option	`string[]`	`undefined`

Events

Event	Description	Type
`amwalAddressUpdate`	amwalAddressUpdate is a dom event fired on address selection. It waits for either amwalAddressAck or amwalAddressTriggerError events to be sent back before proceeding to address update or aborting respectively.	`CustomEvent<IAddress>`
`amwalCheckoutSuccess`	amwalCheckoutSuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at https://backend.sa.amwal.tech	`CustomEvent<AmwalCheckoutStatus>`
`amwalDismissed`	amwalDismissed is a dom event fired when the amwal modal or popup window is dismissed, event.detail indicates if it's successfull or not (boolean)	`CustomEvent<any>`
`amwalPreCheckoutTrigger`	amwalPreCheckoutTrigger is a dom event fired once amwal checkout button is clicked before a transaction is created. It is enabled if enablePreCheckoutTrigger is set. It waits for either amwalPreCheckoutTriggerAck or amwalPreCheckoutTriggerError events to be sent back before proceeding with the normal checkout flow.	`CustomEvent<ITransactionDetails>`
`amwalPrePayTrigger`	amwalPrePayTrigger is a dom event fired once payment button is clicked before payment is processed. It is enabled if enablePrePayTrigger is set. It waits for either amwalPrePayTriggerAck or amwalPrePayTriggerError events to be sent back before proceeding to payment or aborting respectively.	`CustomEvent<ITransactionDetails>`
`updateOrderOnPaymentsuccess`	updateOrderOnPaymentsuccess is a dom event fired on success of payment. the event has orderId field which can be used to lookup transaction status at https://backend.sa.amwal.tech	`CustomEvent<AmwalCheckoutStatus>`

AngularLibrary

This project was generated with Angular CLI version 14.2.9.