npm

amwal-checkout-angular

0.0.52 • Public • Published

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

  1. 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 { }
  1. In your component.component.html:
<amwal-checkout-button merchantId="sandbox-amwal-7eb745d1-b917-47c9-8ad7-921f6c8b6f5f" darkMode="off"
          amount="1" countryCode="SA" [locale]="en"
          addressRequired='true' shippingMethods='[]' addressHandshake='true'(amwalCheckoutSuccess)="paymentSuccessful($event)"
          (amwalAddressUpdate)="addressHandler($event)">
</amwal-checkout-button>
  1. Handling shipping value change to complete address handshake:
  addressHandler(event: any) {
    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
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
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
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

Events

Event Description Type
amwalAddressUpdate amwalAddressUpdate is a dom event fired on address selection. 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.

Readme

Keywords

none

Package Sidebar

Install

npm i amwal-checkout-angular

Weekly Downloads

6

Version

0.0.52

License

none

Unpacked Size

82 kB

Total Files

18

Last publish

Collaborators

  • nohaamwal