Skip to main content

Web SDK Integration

Payment Flow#

Refer following sequence diagram to get gist of payment flow via CHAIPort platform

Payment Flow Sequence Diagram

note
  1. Both Sandbox and Production mode integration can be managed via same APIs and same account on CHAIPort platform.
  2. Please refer following instructions to use appropriate environment flags while integration.

Embed Script#

Embed following JS snippet in your Checkout UI

New setup details#

For integration embed the following scripts in your Checkout UI code.

<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script src="https://static.chaiport.io/chaiport.js"></script>
tip

Refer Integration Sheet to check the extensive list of available Payment Channels & Payment Methods for Integration in your country.

Parameter list#

ParameterDatatypeObligatory/OptionalDescription
KeyObligatoryCHAIPort Key provided to merchants
PmtChannelObligatoryName of the payment channel
PmtMethodObligatoryPayment Method to be used
environmentTextObligatoryEnvironment of the payment
descriptionObligatoryOrder description set in PSP order creation
MerchantOrderIdObligatoryOrder reference given by merchant ID
AmountNumeric[1,12]ObligatoryAmount for transaction
CurrencyObligatoryCurrency for transaction
billing_detailsOptionalDetails of billing
shipping_detailsOptionalDetails of shipping
merchant_detailsOptionalMerchant details
order_detailsObligatoryOrder Details like quantity, id, name, price are Obligatory, while image is Optional
SuccessUrlObligatoryRedirection url for success
FailureUrlObligatoryRedirection url for failure
SignatureObligatorySignature calculated using this link

Environment Flag#

Pass the environment flag in above payload. Environment is the mandatory field, by default the value of environment is sandbox while initiating payment.

Production

"environment": "live"

Sandbox

"environment": "sandbox"

Payment Service#

Use following JS code snippet to initiate the payment using the respective supported payment channels (e.g. MOMO, ZaloPay, Mastercard, etc).

To generate the signature hash, refer Generate Signature Hash link.

<script>
const chaipay = new window.ChaiPay({
// Your Chai Pay Key
client_key: 'pptafmcddmszvgXl'
})
chaipay.paymentService.payment({
// new uniform payment request format example for Momopay
"key": "pptafmcddmszvgXl",
"pmt_channel": "STRIPE",
"pmt_method": "STRIPE_CARD",
"merchant_order_id":"MERCHANT1617366877238",
"signature_hash": "10b664f803035a2146b26949041c2ce8c8693512e4b85159d3c43b001a714af0",
"amount": 4000,
"currency": "VND",
"environment": "live",
"description": "Product description",
"billing_details": {
"billing_name": "Mark Weins",
"billing_email": "markweins@gmail.com",
"billing_phone": "1234567890",
"billing_address": {
"city": "Ho Chi Minh City",
"country_code": "VN",
"locale": "en",
"line_1": "address_1",
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"shipping_details": {
"shipping_name": "Mark Weins",
"shipping_email": "markweins@gmail.com",
"shipping_phone": "1234567890",
"shipping_address": {
"city": "Ho Chi Minh City",
"country_code": "VN",
"locale": "en",
"line_1": "address_1",
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"order_details": [
{
"id": 1,
"price": 2000,
"name": "Stubborn Attachments",
"quantity": 1
},
{
"id": 2,
"price": 2000,
"name": "Stubborn Attachments",
"quantity": 1
}
],
"card_details": {
"card_number": "4242424242424242",
"card_type": "visa",
"cardholder_name": "Mark",
"service_code": "100",
"expiration_month": "05",
"expiration_year": "2022"
},
"success_url": "http://www.coolmate.me/result/success",
"failure_url": "http://www.coolmate.me/result/failure",
})
</script>

Checkout Service#

Use following JS code snippet to initiate the payment in checkout service using the respective supported payment channels (e.g. MomoPay, ZaloPay, Mastercard, etc).

To generate the signature hash, refer Generate Signature Hash link.

To generate the jwt token, refer Generate JWT Token link.

<script>
const chaipay = new window.ChaiPay({
// Your Chai Pay Key
client_key: 'pptafmcddmszvgXl',
jwtToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJOUFNrWlpZZWZHeUt2QnhpIiwiaXNzIjoiQ0hBSVBBWSIsImlhdCI6MTYzMzMzOTAzMiwiZXhwIjoxNjczMzM5MDMy',
})
chaipay.checkoutService.checkout({
"merchant_details": {
"name": "Downy",
"logo": "images/v184_135.png",
"back_url": "https://demo.chaiport.io/checkout",
"promo_code": "Downy350",
"promo_discount": 0.0,
"shipping_charges": 0.0,
},
"merchant_order_id":"MERCHANT1617366877238",
"signature_hash": "10b664f803035a2146b26949041c2ce8c8693512e4b85159d3c43b001a714af0",
"amount": 4000,
"currency": "VND",
"environment": "live",
"description": "Product description",
"order_details": [{
"id":"1",
"price": 2000,
"name": "Stubborn Attachments",
"quantity": 1
},
{
"id":"2",
"price": 2000,
"name": "Stubborn Attachments",
"quantity": 1
}
],
"billing_details": {
"billing_name": "Test mark",
"billing_email": "markweins@gmail.com",
"billing_phone": "9998878788",
"billing_address": {
"city": "VND",
"country_code": "VN",
"locale": "en",
"line_1": "address",
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"shipping_details": {
"shipping_name": "xyz",
"shipping_email": "xyz@gmail.com",
"shipping_phone": "1234567890",
"shipping_address": {
"city": "abc",
"country_code": "VN",
"locale": "en",
"line_1": "address_1",
"line_2": "address_2",
"postal_code": "400202",
"state": "Mah"
}
},
"country_code": "VN",
"expiry_hours":24,
"is_checkout_embed": true,
"show_back_button": false,
"show_shipping_details": false,
"default_guest_checkout": true,
"show_items": false,
"success_url": "http://www.coolmate.me/result/success",
"failure_url": "http://www.coolmate.me/result/failure",
})
</script>