Web SDK Integration

Payment Flow

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

Payment Flow Sequence Diagram

:::note

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

:::

Embed Script

Embed the 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/[email protected]/dist/axios.min.js"></script>
<script src="https://static.portone.cloud/portone.js"></script>

:::tip

Refer to 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	The environment of the payment
description		Obligatory	Order description set in PSP order creation
MerchantOrderId		Obligatory	Order reference is 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 the 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 PortOne 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": "[email protected]",
        "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": "[email protected]",
        "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 the following JS code snippet to initiate the payment in the 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 PortOne 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": "[email protected]",
        "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": "[email protected]",
        "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>