Skip to main content

Integrate Payment Method Management for Checkout (PMMC)

After creating a customer portal, you can allow customers to add credit cards, edit payment information, and manage stored cards directly from the customer portal by integrating Payment Method Management for Checkout (PMMC).

Prerequisites​

  1. Bold Checkout must be installed.
  2. Complete all the steps outlined in Build a Customer Portal.
  3. The plugin that accesses the PMMC must have the modify_customer, read_customers, modify_payment_methods, and add_payments scopes enabled.

Build the URLs for the PMMC iFrame​

You must retrieve a series of values to build the correct URLs for the PMMC iFrame. In total, you need the following values to build the two PMMC URLs:

ValueDefinition
checkout_urlThe URL for the storefront's checkout page.
platform_typeThe platform the storefront runs on: for example, shopify or bigcommerce.
shop_domainThe unique ID of the storefront.
bold_platform_customer_idThe unique ID of the customer whose subscription payment information you'd like to change.
proxy_session_idThe unique ID for the session.
signatureThe unique signature value for the session.
billing_addressThe billing address of the customer. This address must be URI encoded.

Retrieve the PMMC URL values​

  1. Retrieve the checkout_url value.
  2. Retrieve the platform_type value.
  3. Retrieve the shop_domain value. Call the Get Shop Info endpoint and note the endpoint's shop_domain response.
  4. Retrieve the bold_platform_customer_id value. Call the List Customers endpoint and note the endpoint's bold_platform_customer_id response.
  5. Retrieve the proxy_session_id and the signature values. Make a proxy call using the following code to return the proxy_session_id and the signature.
GET {checkout_url}/proxy/payment-method-management/{platform_type}/{shop_domain}/?customer_id={bold_platform_customer_id}

Encode the billing address​

The billing_address value for the customer must be URI encoded before embedding the PMMC endpoints in the iFrame. For example, the following billing address must be converted to URL format:

billing_address="{"address_line1":"145 Park West Drive","address_line2":"","address_city":"Winnipeg","address_country":"Canada","address_state":"Manitoba","address_zip":"R3Y 0W2"}"

After URI encoding, the billing address should have the following format:

billing_address=%22%7B%5C%22address_line1%5C%22%3A%5C%22145%20Park%20West%20Drive%5C%22%2C%5C%22address_line2%5C%22%3A%5C%22%5C%22%2C%5C%22address_city%5C%22%3A%5C%22Winnipeg%5C%22%2C%5C%22address_country%5C%22%3A%5C%22Canada%5C%22%2C%5C%22address_state%5C%22%3A%5C%22Manitoba%5C%22%2C%5C%22address_zip%5C%22%3A%5C%22R3Y%200W2%5C%22%7D%22

Embed the PMMC URLs in the iFrame​

After retrieving the values listed above, you are ready to build the two URLs for the PMMC iFrame.

  1. To give the customer the ability to add or update their subscription payment method within the PMMC iFrame, embed the following endpoint in your storefront code:
{checkout_url}/payment-method-management/{platform_type}/{shop_domain}/get-payment-info/{bold_platform_customer_id}?currency={currency_iso}}&billing_address={billing_address}&customer_id={bold_platform_customer_id}&proxy_session_id={proxy_session_id}&signature={signature}
  1. To display the payment method within the iFrame, embed the following endpoint in your storefront code:
{checkout_url}/payment-method-management/{platform_type}/{shop_domain}/get/{public_payment_id}/{bold_platform_customer_id}?billing_address={billing_address}&customer_id={bold_platform_customer_id}&proxy_session_id={proxy_session_id}&signature={signature}