Skip to main content

Web SDK Integration for Saved Cards Flow

note
  1. Both Sandbox and Production mode integration can be managed via same APIs and same account on PortOne 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.portone.cloud/portone.js"></script>
tip

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

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"

Initialize the Web SDK#

Use following JS code snippet to initialize the web sdk

<script>
const portone = new window.PortOne({
// Your PortOne Key
portOneKey: 'pptafmcddmszvgXl',
})
</script>

Generate OTP#

Use 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

<script>
portone.paymentService.generateOTP(number, function(error) {
console.log(error)
}, function(response) {
console.log(response)
})
</script>

Get Saved Cards#

Use 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.

<script>
portone.paymentService.getSavedCards(number,otp, function(error) {
console.log(error)
}, function(response) {
console.log(response.data.content)
})
</script>

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 portone = new window.PortOne({
// Your PortOne Key
portOneKey: 'pptafmcddmszvgXl'
})
portone.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
}
],
"token_params":{
"token":"39ad3aac0486492fae11f96327ad9d97",
"partial_card_number": "424242******4242",
"expiry_month": "06",
"expiry_year": "2022",
"type": "visa",
"save_card":true
},
"success_url": "http://www.coolmate.me/result/success",
"failure_url": "http://www.coolmate.me/result/failure",
})
</script>

Parameter list#

ParameterDatatypeObligatory/OptionalDescription
keyObligatoryPortOne Key provided to merchants
pmt_channelObligatoryName of the payment channel
pmt_methodObligatoryPayment Method to be used
environmentTextObligatoryEnvironment of the payment
descriptionObligatoryOrder description set in PSP order creation
merchant_order_idObligatoryOrder 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
token_paramsOptionalSaved Card token details like token, expiry_year, expiry_month to initaite payment using saved cards
success_urlObligatoryRedirection url for success
failure_urlObligatoryRedirection url for failure
signature_hashObligatorySignature calculated using this link