amwal-checkout-button-react

amwal-checkout-react

This is a react wrapper for the amwal-checkout-button package allowing it to be used directly in react projects

Installation.

npm i amwal-checkout-button-react

Usage

import { AmwalCheckoutButton } from 'amwal-checkout-button-react'

const ReactPage= () => {
    ...
    <AmwalCheckoutButton merchantId="sandbox-amwal-4e876d00-a50e-482c-a6e1-a1a9df400ce5" amount="20" countryCode="SA"
    locale="ar" darkMode="auto"/>
    ...
}

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	allowed-address-cities	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	allowed-address-countries	allowedAddressCountries specifies an array of allowed countries for the address	string[]	undefined
allowedAddressStates	allowed-address-states	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	initial-address	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
initialLastName	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	shipping-methods	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
showPaymentBrands	show-payment-brands	showPaymentBrands to show supporeted brands under button values are ("true" or "false")	boolean	false

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>