Overview

The Update Card SDK is a JavaScript SDK for updating bank card information. It is embedded into your webpage using an iframe and provides a complete card-update form.

Integration example


!-- sandbox -->
<script src="https://ramptest.osl-pay.com/js/op-update-card-frames.min.js"></script>
<!-- production -->
<script src="https://ramp.osl-pay.com/js/op-update-card-frames.min.js"></script>

<script>
  // nitialization
  OSLPayUpdateCardFrames.init({
    cardId: 'card_123456789', // Required: the card ID to be updated
    updateCardToken: 'edb73993c42xxxca57b4b9db56', // Required: update token
    locale: 'en', // Optional: language setting, default 'en'
    style: {}, // See style example below
    getContainer: function() { // Optional: container element
        return document.querySelector('#updateCardFrameBox'); }
    });
</script>
<div id="oslpayFrameUpdateCard"></div>

Initialization

init(options) Initializes the SDK, creates and renders the card-update form.

Parameters

Parameter	Type	Required	Description
cardId	string	Yes	The card ID to be updated
updateCardToken	string	Yes	Token for updating the card
locale	string	No	Language setting ('en', 'zh-CN', 'zh-TW'), default 'en'
style	object	No	Custom style configuration
getContainer	function	No	Function returning the container element, defaults to #updateCardFrameBox

Example

OSLPayUpdateCardFrames.init({
  cardId: 'card_123456789',
  updateCardToken: '4dbacc39fd9dc13c08edb73993c42ca57b4b9db56',
  locale: 'zh-CN',
  style: customStyle // See customStyle example below
});

Event methods

addEventHandler(eventName, callback) Registers an event listener.

Parameters

Parameter	Type	Description
eventName	string	Event name (from OSLPayUpdateCardFrames.Events)
callback	string	Callback function

Example

sdk.addEventHandler(sdk.Events.UPDATE_CARD_READY, () => {
  console.log('SDK ready');
});

sdk.addEventHandler(sdk.Events.UPDATE_CARD_SUCCESS, (data) => {
  console.log('Update successful:', data);
});

sdk.addEventHandler(sdk.Events.UPDATE_CARD_ERROR, (data) => {
  console.error('Update failed:', data);
});

sdk.addEventHandler(sdk.Events.UPDATE_CARD_VALIDATION_CHANGED, (data) => {
  console.log('Validation status:', data.isValid);
});

removeEventHandler(eventName, callback) Removes a specific event listener.

Example

const handler = (data) => {
  console.log('Update successful:', data);
};

sdk.addEventHandler(sdk.Events.UPDATE_CARD_SUCCESS, handler);
// Remove later
sdk.removeEventHandler(sdk.Events.UPDATE_CARD_SUCCESS, handler);

removeAllEventHandlers(eventName) Removes all listeners for a specific event.

Example

sdk.removeAllEventHandlers(sdk.Events.UPDATE_CARD_SUCCESS);

Control methods

dispatch(eventName, callback) Triggers an internal SDK event and fetch results.

Parameters

Parameter	Type	Description
eventName	string	Name of the event
callback	function	Callback function that receives the event result

Example

// Submit card-update form
sdk.dispatch(sdk.Events.UPDATE_CARD_SUBMIT, (result) => {
  if (result?.status) {
    console.log('Update successful');
  } else {
    console.error('Update failed:', result?.error);
  }
});

// Reset the form
sdk.dispatch(sdk.Events.UPDATE_CARD_RESET_FORM, () => {
  console.log('Form reset');
});

// Get form validation status
sdk.dispatch(sdk.Events.UPDATE_CARD_IS_VALID, (result) => {
  console.log('Is form valid:', result?.isValid);
});

destroy() Destroys the SDK instance and removes the iframe and all event listeners.

Example

sdk.destroy();

Available events The SDK provides the following event constants (accessible via sdk.Events):

Event Name	Constant	Description
UPDATE_CARD_READY	'updateCardReady'	SDK iframe is ready
UPDATE_CARD_VALIDATION_CHANGED	'updateCardValidationChanged'	Form validation state changed
UPDATE_CARD_SUCCESS	'updateCardSuccess'	Card update succeeded
UPDATE_CARD_ERROR	'updateCardError'	Card update failed or card details fetch failed

Dispatchable events You can trigger the following events using the dispatch method:

Event Name	Constant	评分
UPDATE_CARD_SUBMIT	'updateCardSubmit'	Submit the update form
UPDATE_CARD_RESET_FORM	'updateCardResetForm'	Reset the form
UPDATE_CARD_IS_VALID	'updateCardIsValid'	Get form validation status

Custom style object ```customStyle

const customStyle = {
  backgroundColor: '#FFF',              // Background color
  padding: '20px 16px',                 // Padding
  itemMarginBottom: '20px',             // Spacing between form items
  input: {
    color: '#040B0F',                    // Text color
    backgroundColor: '#F2F4F5',          // Input background color
    fontSize: '15px',                    // Font size
    lineHeight: '22px',                  // Line height
    height: '46px',                      // Input height
    padding: '12px',                     // Inner padding
    rounded: '10px',                     // Border radius
    border: 'none'                       // Border
  },
  label: {
    color: '#2A373D',                    // Label color
    fontSize: '14px',                    // Font size
    lineHeight: '20px',                  // Line height
    paddingBottom: '6px'                 // Bottom padding
  },
  focus: {
    color: '#252629',                    // Text color when focused
    border: '1px solid #00f'             // Border when focused
  },
  invalid: {
    color: '#9a1313',                    // Text color when invalid
    fontSize: '14px',                    // Font size
    padding: '10px',                     // Inner padding
    border: '1px solid #f00'            // Border when invalid
  },
  placeholder: {
    color: '#B6BEC2'                     // Placeholder color
  },
  select: {
    options: {
      activeBackgroundColor: '#F2F4F5',  // Background color of active option
      fontSize: '14px',                   // Option font size
      height: '36px'                      // Option height
    }
  },
  message: {
    backgroundColor: '#ffffff',          // Message background color
    border: '1px solid #eaeaed',         // Border
    textColor: '#252629',                 // Text color
    iconColor: '#f59e0b',                 // Icon color
    borderRadius: '12px',                 // Border radius
    padding: '16px',                      // Inner padding
    fontSize: '14px',                     // Font size
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)' // Shadow
  }
};