Web SDK Integration for Saved Cards Flow
note
- Both
Sandbox
andProduction
mode integration can be managed via same APIs and same account on PortOne platform. - Please refer following instructions to use appropriate
environment
flags while integration.
#
Embed ScriptEmbed following JS snippet in your Checkout UI
#
New setup detailsFor integration embed the following scripts in your Checkout UI code.
tip
Refer Integration Sheet to check the extensive list of available Payment Channels & Payment Methods for Integration in your country.
#
Environment FlagPass the environment
flag in above payload. Environment is the mandatory field, by default the value of environment is sandbox
while initiating payment.
Production
Sandbox
#
Initialize the Web SDKUse following JS code snippet to initialize the web sdk
#
Generate OTPUse following JS code snippet to generate the otp in payment service using the end user's phone number. An otp will be send on the provided phone number
#
Get Saved CardsUse following JS code snippet to fetch the saved cards in payment service using the end user's phone number and the otp received by the end user on the phone number for authorization.
A list of saved cards will be received in response if the cards are saved for this user in earlier payment transactions.
#
Payment ServiceUse 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.
#
Parameter listParameter | Datatype | Obligatory/Optional | Description |
---|---|---|---|
key | Obligatory | PortOne Key provided to merchants | |
pmt_channel | Obligatory | Name of the payment channel | |
pmt_method | Obligatory | Payment Method to be used | |
environment | Text | Obligatory | Environment of the payment |
description | Obligatory | Order description set in PSP order creation | |
merchant_order_id | Obligatory | Order reference given by merchant ID | |
amount | Numeric[1,12] | Obligatory | Amount for transaction |
currency | Obligatory | Currency for transaction | |
billing_details | Optional | Details of billing | |
shipping_details | Optional | Details of shipping | |
merchant_details | Optional | Merchant details | |
order_details | Obligatory | Order Details like quantity, id, name, price are Obligatory, while image is Optional | |
token_params | Optional | Saved Card token details like token, expiry_year, expiry_month to initaite payment using saved cards | |
success_url | Obligatory | Redirection url for success | |
failure_url | Obligatory | Redirection url for failure | |
signature_hash | Obligatory | Signature calculated using this link |