Web SDK Integration

Payment Flow#

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

Payment Flow Sequence Diagram

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://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.

Parameter list#

Parameter	Datatype	Obligatory/Optional	Description
Key		Obligatory	PortOne Key provided to merchants
PmtChannel		Obligatory	Name of the payment channel
PmtMethod		Obligatory	Payment Method to be used
environment	Text	Obligatory	Environment of the payment
description		Obligatory	Order description set in PSP order creation
MerchantOrderId		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
SuccessUrl		Obligatory	Redirection url for success
FailureUrl		Obligatory	Redirection url for failure
Signature		Obligatory	Signature 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 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
        }
    ],
    "response_type": "redirect_url_only",
    "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 portone = new window.PortOne({
    // Your PortOne Key
    portOneKey: 'pptafmcddmszvgXl',
    jwtToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJOUFNrWlpZZWZHeUt2QnhpIiwiaXNzIjoiQ0hBSVBBWSIsImlhdCI6MTYzMzMzOTAzMiwiZXhwIjoxNjczMzM5MDMy',
})
portone.checkoutService.checkout({
    "merchant_details": {
        "name": "Downy",
        "logo": "images/v184_135.png",
        "back_url": "https://demo.portone.cloud/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>