Web SDK Integration for Saved Cards Flow

note

Both Sandbox and Production 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 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://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,environment,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",
    "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>

Detailed script for payment service (including optional fields).

<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#

Parameter	Datatype	Obligatory/Optional	Description
key	string	Obligatory	The unique PortOne key for merchant
pmt_channel	string	Obligatory	The Payment Channel Key listed in PortOne docs
pmt_method	string	Obligatory	The Payment Method Key listed in PortOne docs
environment	string	Obligatory	Environment of the payment
description	string	Obligatory	Order description set in PSP order creation
merchant_order_id	string	Obligatory	The unique merchant order reference generated by the merchant
amount	double	Obligatory	The amount of transaction, can be a floating-point number
currency	string	Obligatory	Currency for transaction
billing_details	object	Optional	The JSON object for billing details
shipping_details	object	Optional	The JSON object for shipping details
order_details	array of objects	Optional	Order Details like quantity, id, name, price are Obligatory, while image is Optional
token_params	object	Obligatory	Saved Card token details like token, expiry_year, expiry_month to initaite payment using saved cards
success_url	string	Obligatory	Redirection url for success
failure_url	string	Obligatory	Redirection url for failure
signature_hash	string	Obligatory	Signature calculated using this link