--- url: >- https://acquirer-api-docs-v4-en.pingpongx.com/en/notes/services/checkout/hosted/sdk/index.md description: >- Embed PingPongCheckout checkout via JS-SDK, suitable for scenarios requiring payment functionality integration in web pages. Supports custom theme colors and multi-language configuration. Main parameters include innerJsUrl and token for loading and initializing the SDK. When creating payment, pass the order object and set mode to sandbox or production. The checkout supports re-payment within 48 hours --- ## Render Checkout Obtain the following key response parameters from Order Creation | Parameter Name | Description | |:-----------|:--------------| | innerJsUrl | JS-SDK loading address | | token | Parameter required for SDK initialization | ### Import JS-SDK PingPongCheckout provides two ways to import the SDK + Import JS in advance, copy the following code to import PingPongCheckout JS-SDK via CDN address ```javascript ``` + Import using the value of innerJsUrl field after order creation #### SDK-config Schematic Diagram
SDK-config Schematic Diagram
::: note In the above diagram, you can configure font styles, spacing, etc. more precisely. However, if you only want to change the theme color, please use the following parameters: - themeColor: Checkout theme color, applied to loading animations, fonts, buttons, form focus border colors, etc. - themeLightColor: Checkout light theme color, applied to some shadows, light background colors, etc. If you don't pass these parameters, Pingpong theme colors will be used by default. ::: #### JS-SDK Checkout Language Support ::: note Configure in SDK `lang` parameter, default English For more languages, see Locale ::: #### Initialize SDK Sample Code When the client clicks the order button and submits the order, obtain order-related parameters (order object) from the server, after initializing PingPongCheckout JS-SDK, pass the order object to the createPayment method to start interacting with PingPongCheckout, after success, the PingPongCheckout checkout will be rendered ```javascript window.addEventListener('load', loadHandle); function loadHandle() { const conf = { mode: 'sandbox', //sandbox/production (required parameter) lang: 'en', // language, default English if not passed - de German en English es Spanish fr French it Italian ru Russian zh Chinese jp Japanese root: '#payment-wrap', // Where PingPong checkout renders, must be an id (required) manul: false, // Manual mode. That is: payment button needs to be rendered by yourself, after enabling, can use client.actionPayment() method to call payment showPrice: true, // Whether to display price bill: true, // Whether to display bill located: true, // Whether to display located (default true) menu: true, //Whether to display payment method buttons base: { width: '100%', // Checkout width height: '800px', // Checkout height backgroundColor: '#fff', // Checkout overall background color // Top price and currency priceBgColor: '#fff', // Top price area background color priceFontColor: '#1fa0e8', // Top price font color priceFontSize: '32px', // Top price font size priceMB: '10px', // Top price area bottom margin // Guide title: "How would you like to pay" showHeaderLabel: true, // Whether to display guide title headerMB: '24px', // Guide title bottom margin headerSize: '20px', // Guide title font size headerColor: 'rgba(0, 0, 0, 0.85)', // Guide title font color headerfontWeight: 700, // Guide title bold // Payment methods payMethodsWidth: '240px', // Payment method button width payMethodsHeight: '48px', // Payment method button height payMethodsColor: 'rgba(0, 0, 0, 0.85)', // Payment method button font color payMethodsActiveColor: '#1fa0e8', // Payment method button font color after click payMethodsFontsize: '14px', // Payment method button font size payMethodsActiveBorderColor: '#1fa0e8', // Payment method button border color after click payMethodsActiveBorderShadow: '0 2px 8px 0 rgb(31 160 232 / 20%)', // Payment method button shadow after click showIcons: true, // Whether to display card icons showHeaderAmount: true, // Whether to display header payment amount // Form related formItemMargin: '16px', // Form bottom margin formItemBorderColor: 'rgba(0, 0, 0, 0.08)', // Form border color formItemFocusColor: '#1fa0e8', // Form focus prompt text and border color // Payment button btnSize: '100%', // Button width percentage or px btnColor: '#fff', // Button font color btnFontSize: '14px', // Button font size btnMarginTop: '10px', // Button top margin btnMarginBottom: "24px", // Button bottom margin btnBackgroundColor: '#1fa0e8', // Button background color btnBorderRadius: '8px', // Button border radius btnBorderColor: '#1fa0e8', // Can separately configure btn border color to override colors set in btnBorder } } let client = new ppPay(conf); // Pass in the token obtained from the interface here let token ="EU:Dt10Deb05qeI0HFWg0DU1NPcLE-dxCDiU40wyKBxHw1w1RDULBtXXtI2dsgSX8L7"; //Using this method will create checkout client.createPayment(token); // manul mode Using this method will not show payment button, payment timing will depend on cardholder's call // client.actionPayment(callback) } ``` ::: danger 1. Parameter mode must be filled correctly, use sandbox for development testing, use production after going live, please check parameter mode before going live; 2. Checkout does not support disabling cookies. ::: ### Complete Payment After correctly setting up as above, the checkout should render normally, correctly enter card number, expiration date and CVV information to complete the transaction. The checkout in sandbox mode is shown below
## Re-payment If the checkout payment is not successful, you can manually open the URL again to initiate payment, a checkout URL is valid for 48 hours