Paytabs express checkout sample

For more information please see the website.

Install

Read the documentation to know how to integrate your application with the library documentation v4.0

<script src="https://paytabs.com/express/v4/paytabs-express-checkout.js"
   id="paytabs-express-checkout"
   data-secret-key="merchant_secret_key"
   data-merchant-id="merchant_id"
   data-url-redirect="http://example.com/callback/"
   data-amount="10.0"
   data-currency="SAR"
   data-title="John Doe"
   data-product-names="Iphone"
   data-order-id="25"
   data-customer-phone-number="5486253"
   data-customer-email-address="[email protected]"
   data-customer-country-code="973"
>
</script>

Overview

PayTabs Express Checkout is a solution that provides an efficient checkout process for online shoppers which keeps them on the merchant’s website while making a payment and even after the payment is complete.

Request

You have to Login to get your data-secret-key and data-merchant-id

Required

Element	Description
`data-secret-key` `String`	Merchant Secret Key which is found in `Merchant Dashboard > Navigation Menu > Secret Key`
`data-merchant-id` `String`	Merchant ID found at the top-right corner of the Merchant Dashboard. Example: 10012345
`data-amount` `Decimal`	Final amount requested for payment should include the total amount of the products, discount, shipping charges, VAT and any other charges.
`data-currency` `String`	Currency of the amount stated: 3 character ISO currency code Examples: `USD` for US dollars `AED` for Emirati Dirham `SAR` for Saudi Riyal
`data-title` `String`	Title of the transaction, Example: Billing for Order 1234, or Bill To Mr. John Doe, etc
`data-product-names` `String`	For multiple products use comma separated products (i.e: iPhone X, iPhone, Lightning Dock, iPhone earphones)
`data-order-id` `String`	Order ID generated on merchant's Website.
`data-customer-phone-number` `String`	Phone number of the customer: minimum length 5, maximum length 15
`data-customer-email-address` `String`	Email of the customer
`data-customer-country-code` `String`	International dialing code for phone number of the customer. Please enter country code without ‘0’ or ‘+’ Example: UAE country code is `971` USA country code is `1`
`data-url-redirect` `String`	Call back URL after payment is successful. Example: https://www.example.com/payment_result

Billing address (optional)

Element	Description
`data-billing-full-address` `String`	Full billing Address Multiple address lines will be merged into one single line. maximum string length 60
`data-billing-city` `String`	Billing city maximum string length 50
`data-billing-state` `String`	Billing state For USA and Canada please use the correct state and province 2-character codes. https://www.ups.com/worldshiphelp/WS16/ENU/AppHelp/Codes/State_Province_Codes.htm Note: Correct State field is a mandatory field in case billing country is US or Canada
`data-billing-country` `String`	Billing country: 3-Character ISO country code. Examples: `ARE` for United Arab Emirates `SAU` for Kingdom of Saudi Arabia `USA` for United States of America
`data-billing-postal-code` `String`	Billing postal code When the billing country is the U.S., the 9-digit postal code must follow this format: `[5 digits][dash][4 digits]`Example `12345-6789` When the billing country is Canada, the 6-digit postal code must follow this format: `[alpha][numeric][alpha][space][numeric][alpha][numeric]` Example `A1B 2C3`

Shipping address (optional)

Element	Description
`data-shipping-full-address` `String`	Full shipping address. Multiple address lines will be merged into one single line. maximum string length 60
`data-shipping-city` `String`	Shipping city maximum string length 50
`data-shipping-state` `String`	Shipping State For USA and Canada please use the correct state and province 2-character codes. https://www.ups.com/worldshiphelp/WS16/ENU/AppHelp/Codes/State_Province_Codes.htm Note: Correct State field is a mandatory field in case billing country is US or Canada
`data-shipping-country` `String`	Shipping country 3-Character ISO country code. Examples: `ARE` for United Arab Emirates `SAU` for Kingdom of Saudi Arabia `USA` for United States of America
`data-shipping-postal-code` `String`	Shipping Postal code When the billing country is the U.S., the 9-digit postal code must follow this format: `[5 digits][dash][4 digits]`Example `12345-6789` When the billing country is Canada, the 6-digit postal code must follow this format: `[alpha][numeric][alpha][space][numeric][alpha][numeric]` Example `A1B 2C3`

Additional redirecting settings (optional)

Element	Description
`data-url-cancel` `String`	Call back URL after payment is cancelled. Example: https://www.example.com/payment_cancel In case the user closes the popup during the transactions and `data-url-cancel` parameter is not passed in the merchant's Express Checkout button script, a query param is_canceled_pt=1 is passed in the return link `data-url-redirect`
`data-redirect-on-reject` `Boolean`	If you wish the cardholder to be redirected to `data-url-redirect` even if the payment is rejected the pass this value as `true`, if you wish the merchant to remain on the same page pass this value as `false`
`data-is-self` `Boolean`	If you wish to override the mandatory redirection after successful payment you can pass this value as “true” and user will not be redirected after the payment whether its successful or rejected and will stay on the same page

iFrame settings (optional)

Element	Description
`data-ui-type` `String`	User interface implementation, the option allows you to customize express checkout and choose between three different option `Button` Default, Express Checkout Button is displayed and when clicked will load Express Checkout popup `Iframe` Loads Express Checkout as an embedded iframe `Click` You can use this with your custom checkout button and use `Paytabs.openPaymentPage()` with JS or after ajax requests
`data-ui-element-id` `String`	Dom element id to show payment page
`data-is-popup` `Boolean`	Show payment page as popup full screen if you pass as `true`
`data-color` `String`	Payment page theme color Default color `#0075c9`
`data-ui-show-header` `Boolean`	To enable or disable the header which includes the logo and close button. Default value is `true`. This feature will only work if `data-is-pop` is `false`
`data-ui-show-billing-address` `Boolean`	Shows or hides the billing address, default value is `true`
`data-language` `String`	Language `"en"` , `"ar"` Default `"en"`

Payment button customization (optional)

Element	Description
`data-checkout-button-width` `String`	Pay Now button width
`data-checkout-button-height` `String`	Pay Now button height
`data-checkout-button-img-url` `Link`	Pay Now image source

Paytabs

Support | Terms of Use | Privacy Policy

patrick-nurt / paytabs-express-checkout-sample Goto Github PK